继续趁着等后端修bug的等待情况下,继续看flutter的视频教程。今天想实现一个简单弹窗效果,学习了一些视频教程。为了控制这个代码量,尽量保持到少量一点代码去接触flutter。避免一下子看不习惯的代码造成代码书写困扰。下面就是一个很小的代码,尽量保持100行左右。保障到自身初学不会太吃力,做做练习题那样。
实现一个简单弹窗交互功能。
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //开始结构 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text("合同应用"),), body:HomeContent(), ), ); } } //简化组件使用 class HomeContent extends StatelessWidget{ _onClick(){ print("点击了按钮"); } _onItemClick(){ print("点击了按钮"); } @override Widget build(BuildContext context) { return ListView( children: [ ListTile( leading:Image.network("https://img12.360buyimg.com/n1/jfs/t1/44303/14/1165/281427/5cc53c63Eb79cabfb/a2a8c2f082c16238.jpg"), title: Text("Java开发宝典"), subtitle: Text("人民出版社"), onTap: (){ showDialog( context: context, builder:(context){ return AlertDialog( title: Text("提示"), content: Text("是否真的移除该数据?"), ); }, ); }, ) , ListTile( leading:Image.network("https://img12.360buyimg.com/n1/jfs/t1/44303/14/1165/281427/5cc53c63Eb79cabfb/a2a8c2f082c16238.jpg"), title: Text("Go开发宝典"), subtitle: Text("工业出版社"), onTap:_onItemClick ), // , FlatButton(onPressed: _onClick, child: Text("查看更多")) ], ); } }以下是弹窗的代码。需要有context的填写。(但是为何要这样?心里会觉得一阵啰嗦) 使用showDialog弹窗。
showDialog( context: context, builder:(context){ return AlertDialog( title: Text("提示"), content: Text("是否真的移除该数据?"), ); }, ); },一个简单效果已经出来了。