flutter对话框dialog的使用

基本属性介绍

const AlertDialog({Key? key,this.title, //对话框标题组件this.titlePadding, // 标题填充this.titleTextStyle, //标题文本样式this.content, // 对话框内容组件this.contentPadding = const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0), //内容的填充this.contentTextStyle,// 内容文本样式this.actions, // 对话框操作按钮组this.backgroundColor, // 对话框背景色this.elevation,// 对话框的阴影this.semanticLabel, //对话框语义化标签(用于读屏软件)this.shape, // 对话框外形
})

显示dialog：

• showDialog

Future<T?> showDialog<T>({required BuildContext context,required WidgetBuilder builder,//需要显示的弹窗bool barrierDismissible = true,//点击背后蒙层是否关闭弹框，默认为 trueColor? barrierColor = Colors.black54,//背后蒙层颜色String? barrierLabel,bool useSafeArea = true,//是否使用安全区域，默认为 truebool useRootNavigator = true,//是否使用根导航，默认为 trueRouteSettings? routeSettings,//路由设置
}) 

• showCupertinoDialog 也是控制 Dialog 弹出的 api。其实与 showDialog 一样，两者都可以调用各种弹框，但是 showCupertinoDialog 默认是不可以点击空白区域隐藏的。

Future<T?> showCupertinoDialog<T>({required BuildContext context,required WidgetBuilder builder,//需要显示的弹窗String? barrierLabel,bool useRootNavigator = true,//是否使用根导航，默认为 truebool barrierDismissible = false,//点击背后蒙层是否关闭弹框，默认为 falseRouteSettings? routeSettings,//路由设置
})

AlertDialog

class _DialogApp extends StatelessWidget {@overrideWidget build(BuildContext context) => const MaterialApp(home: Scaffold(body: _DialogWidget(),),);
}class _DialogWidget extends StatelessWidget {const _DialogWidget({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [TextButton(onPressed: () async {var dialog = await _show(context);print(dialog);},child: const Text('确定取消'),)],),);}Future<String?> _show(context) {return showDialog<String>(context: context,builder: (context) {return AlertDialog(shape:const RoundedRectangleBorder(),backgroundColor: Colors.red,elevation: 0,title: const Text('提示'),content: const Text('确定要取消吗？'),actions: [TextButton(onPressed: () {Navigator.pop(context, 'false');},child: const Text('取消')),TextButton(onPressed: () {Navigator.pop(context, 'ture');},child: const Text('确定'))],);});}
}

SimpleDialog列表对话框

 Future<String?> _showSimpleDialog(context) {var province = ['四川','重庆','云南','贵州','北京','上海'];List<Widget> _createItem() {var list = <Widget>[];for (var element in province) {list.add(SimpleDialogOption(onPressed: () {Navigator.pop(context, element);},child: Text(element,style: const TextStyle(fontSize: 20),),padding: const EdgeInsets.all(10),));}return list;}return showDialog<String>(context: context,builder: (context) {return SimpleDialog(title: const Text('请选择'),children: _createItem(),);});}

CupertinoAlertDialog IOS风格弹窗

 Future<String?> _cupertinoAlertDialog(context) {return showDialog(context: context,builder: (context) {return CupertinoAlertDialog(title: const Text('提示'),content: const Text('确定要删除吗？'),actions: [TextButton(child: const Text('取消'),onPressed: () {Navigator.pop(context);},),TextButton(child: const Text('删除'),onPressed: () {Navigator.pop(context, '确定');},),],);});}

Dialog，AlterDialog和SimpleDialog都是使用Dialog扩展，而且不支持延时加载数据比如说列表控件（ListView）翻页（PageView）所以可以自己扩展。

• 使用showDialog实现一个联系人列表

Future<String?> _nameListDialog(context) {var contact = ['猪八戒', '孙悟空', '沙和尚', '唐僧', '女儿国王', '玉兔妖精'];return showDialog<String>(context: context,builder: (context) {return Dialog(child: Column(children: [const Text('选择联系人',style: TextStyle(fontSize: 20),),Expanded(child: ListView.separated(itemBuilder: (BuildContext context, int index) {return const Divider(color: Colors.red,);},separatorBuilder: (BuildContext context, int index) {return ListTile(onTap: () {Navigator.pop(context, contact[index]);},title: Text(contact[index]),);},itemCount: contact.length + 1)),],),);});}

• 使用showCupertinoDialog方法显示弹窗，实现一个翻页图片

  Future<String?> _bannerDialog(context) {return showCupertinoDialog<String>(context: context,builder: (context) {return Dialog(child: SizedBox(height: 200,width: 200,child: PageView(children: [Container(color: Colors.blue,child: Image.network('https://tse1.mm.bing.net/th/id/OET.ce0c9f08f5354a209a24a452b765b478?w=135&h=272&c=7&rs=1&o=5&dpr=2&pid=1.9',fit: BoxFit.cover,),),Container(color: Colors.blue,child: Image.network('https://tse1.mm.bing.net/th/id/OET.30e552a6bb934c6e8e3cbda26fd902bd?w=272&h=135&c=7&rs=1&o=5&dpr=2&pid=1.9',fit: BoxFit.cover,),),Container(color: Colors.blue,child: Image.network('https://tse1.mm.bing.net/th/id/OET.ea9650ec7da945e6bbe7098b371807ea?w=135&h=272&c=7&rs=1&o=5&dpr=2&pid=1.9',fit: BoxFit.cover,),),Container(color: Colors.blue,child: Image.network('https://tse1.mm.bing.net/th/id/OET.af308959f6b44b7ea2ed22371a86f237?w=135&h=272&c=7&rs=1&o=5&dpr=2&pid=1.9',fit: BoxFit.cover,),),],),),);});}

• 无论是showDialog还是showCupertinoDialog的builder返回并不是只能返回Dialog、AlertDialog…还可以这样实现：理论上只要是Widget都可以接收，需要注意的是在flutter里面Widget并不一定是一个视图

Future<String?> _bannerDialog(context) {var child = PageView(children: [Container(color: Colors.blue,child: Image.network('https://tse1.mm.bing.net/th/id/OET.ce0c9f08f5354a209a24a452b765b478?w=135&h=272&c=7&rs=1&o=5&dpr=2&pid=1.9',fit: BoxFit.cover,),),Container(color: Colors.blue,child: Image.network('https://tse1.mm.bing.net/th/id/OET.30e552a6bb934c6e8e3cbda26fd902bd?w=272&h=135&c=7&rs=1&o=5&dpr=2&pid=1.9',fit: BoxFit.cover,),),],);return showDialog<String>(context: context,barrierColor: Colors.transparent,builder: (context) {return UnconstrainedBox(child: Container(child: child,height: 200,width: 200,),);// return Dialog(//   child: SizedBox(//     height: 200,//     width: 200,//     child: child,//   ),// );});}

提示：在自定义dialog时他本身定义了一个最小宽度，因此可以使用UnconstrainedBox来抵消然后通过SizedBox或者其他容器重新定义大小.

• showModalBottomSheet底部弹窗

  Future<String?> _showBottomDialog(context) {return showModalBottomSheet(context: context,builder: (context) {return ListView.builder(itemBuilder: (BuildContext context, int index) {return ListTile(title: Text('item$index'),onTap: () {Navigator.pop(context, 'item$index');},);},itemCount: 10,);});}

其他弹窗

• material风格的日期选择器showDatePicker

Future<DateTime?> _showMaterialDateDialog() {return showDatePicker(context: context,//默认选中日期initialDate: DateTime.now(),//开始日期firstDate: DateTime.utc(2000,),//结束日期lastDate: DateTime.utc(DateTime.now().year + 10,));}

• IOS风格的日期选择器showCupertinoModalPopup配合CupertinoDatePicker

 Future<DateTime?> _showIOSDateDialog(context) {return showCupertinoModalPopup<DateTime>(context: context,builder: (BuildContext context) {return SizedBox(height: 200,child: CupertinoDatePicker(backgroundColor: Colors.blue,mode: CupertinoDatePickerMode.dateAndTime,minimumDate: DateTime.utc(200),maximumDate:  DateTime.utc(DateTime.now().year+10),onDateTimeChanged: (DateTime value) {print(value);},),);});}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！