前言：
各位同学大家好 ，相信移动端（安卓， iOS )和前端的同学都有使用过dialog对话框 ,移动端（安卓 iOS ）和前端 对于diaog 的实现 都有很好用的对应的原生api支持, 网上也有很多开源博客 我这边就不展开详细讲了，今天给大家分享一下flutter中dialog对话框的各种用法 。
准备工作：
安装flutter环境 如果只是跑安卓设备 win系统就行了 要是同时运行安卓和iOS 就需要mac电脑了 配置环境变量这边就不展开讲了大家可以看我之前的文章
需要用到的三方库
fluttertoast: ^3.1.3 toast 库
效果图
alertDialog:
QQ截图20200531131836.png
simpleDialog:
QQ截图20200531131903.png
QQ截图20200531131851.png
QQ截图20200531131911.png
modeBottomDialog:
QQ截图20200531131929.png
toastDialog:
QQ截图20200531131945.png
自定义LoadingDialog （网络加载） :
QQ截图20200531132014.png
具体代码实现：
alertDialog:
alertDialog警报对话框会通知用户需要确认的情况。警报对话框具有可选标题和可选的操作列表。标题显示在内容上方，操作显示在内容下方。通常我们在点击一些需要用户确认操作的功能（例如删除，等 ）的时候就会用到这个alertDialog 警报对话框。
如图：
QQ截图20200531131836.png
alertDialog的代码实现 ：
Future _alertDialog()async{
var result =await showDialog(
context: context,
builder: (context){
return AlertDialog(
title: Text("提示信息"),
content: Text("您确定要删除吗"),
actions: <Widget>[
RaisedButton(
child: Text("取消"),
color: Colors.blue,
textColor: Colors.white,
onPressed: (){
print("取消");
Toast.show("你取消了", context);
Navigator.pop(context);
},
),
RaisedButton(
child: Text("确定"),
color: Colors.blue,
textColor: Colors.white,
onPressed: (){
print("确定");
Toast.show("你确定了", context);
Navigator.pop(context,"ok");
},
),
],
);
}
);
print("result -- > "+result);
return result;
}
这边我们定义了_alertDialog 方法 然后在里面调用了showDialog()组件 返回一个 AlertDialog（）组件
AlertDialog()组件中我们设置 title 和content , 然后 actions 属性中插入 两个RaisedButton 来处理对话框里点击的操作， 通过调用Navigator.pop(context); 来处理 对话框架 点击销毁 以及点击拿的结果 最我们将选择项点击的操的结果赋值给 var result 变量并返回 。
具体 _alertDialog ()方法的调用
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("alertDialog弹出演示"),
),
body: Container(
child: RaisedButton(
child: Text(
"点击显示alertDialog"
),
onPressed: (){
_alertDialog().then((value){
print(value);
});
},
),
),
);
}
simpleDialog:
简单的对话框为用户提供了多个选项之间的选择。一个简单的对话框有一个可选的标题，显示在选项上方。下面则是具体的选择项 ,通常我们在项目中用这个simpleDialog 来实现一些列表选择则的功能的实现 。
如图：
QQ截图20200531131903.png
QQ截图20200531131851.png
QQ截图20200531131911.png
simpleDialog的代码实现 ：
Future simpleDialog()async{
var result=await showDialog(context: context,
builder:(context){
return SimpleDialog(
title: Text("选择角色"),
children: <Widget>[
SimpleDialogOption(
child: Text("旋涡名人"),
onPressed: (){
print("旋涡名人");
Navigator.pop(context,"旋涡名人");
},
),
SimpleDialogOption(
child: Text("宇智波佐助 "),
onPressed: (){
print("宇智波佐助");
Navigator.pop(context,"宇智波佐助");
},
),
SimpleDialogOption(
child: Text("千手柱间"),
onPressed: (){
print("千手柱间");
Navigator.pop(context,"千手柱间");
},
),
SimpleDialogOption(
child: Text("宇智波斑"),
onPressed: (){
print("宇智波斑");
Navigator.pop(context,"宇智波斑");
},
),
],
);
}
);
print("result --- > "+result);
return result;
}
这边我们定义了simpleDialog方法 然后在里面调用了showDialog()组件 返回一个 SimpleDialog（）组件
SimpleDialog()组件中我们设置 title , 然后通过 children属性中插入 多个SimpleDialogOption来处理对话框里面的选择项的操作 通过调用Navigator.pop(context); 来处理 对话框架 点击销毁 以及点击拿的结果 最我们将选择项点击的操的结果赋值给 var result 变量并返回
具体调用：
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("simpleDialog "),
),
body: Container(
color: Colors.white,
child: Center(
child: RaisedButton(
child: Text(textStr),
onPressed:(){
simpleDialog().then((value){
setState(() {
if(!textStr.isEmpty){
textStr=value;
}
});
});
} ,
),
),
),
);
}
通过调用 simpleDialog方法的 then属性拿到返回的结果 然后赋值给我们点击的RaisedButton 的Text 里面的变量
onPressed:(){
simpleDialog().then((value){
setState(() {
if(!textStr.isEmpty){
textStr=value;
}
});
});
}
modeBottomDialog:
modeBOttomDialog 通常我用来实现一键分享的功能的实现 （如分享到微信 微博 QQ等 ）
如图：
QQ截图20200531145448.png
具体代码实现：
Future _modeBottomDialog()async{
var result=await showModalBottomSheet(context: context,
builder: (context){
return Container(
child: Column(
children: <Widget>[
ListTile(
title: Text("分享到 QQ"),
onTap: (){
Navigator.pop(context,"分享到 QQ");
}
),
ListTile(
title: Text("分享到 微信 "),
onTap: (){
Navigator.pop(context,"分享到 微信");
}
),
ListTile(
title: Text("分享到 微博"),
onTap: (){
Navigator.pop(context,"分享到 微博");
}
),
ListTile(
title: Text("分享到 知乎"),
onTap: (){
Navigator.pop(context,"分享到 知乎");
}
),
],
),
);
}
);
print("分享 --- > "+result);
return result;
}
这边我们定义了_modeBottomDialog方法 然后在里面调用了showModalBottomSheet()组件, 传入context 上下文返回一个 widget。（widget 你想要返回 什么样看你自己发挥 这我返回一个 Container 里面包裹一个 Column）然后我们再Column 的 children 里面插入多条ListTitle 来显示分享的点击条目，同simple 一样通过调用Navigator.pop(context,"分享到 知乎"); 来处理 对话框架 点击销毁 以及点击拿的结果 最我们将选择项点击的操的结果赋值给 var result 变量并返回。
具体调用：
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("modeBOttomDialog"),
),
body: Container(
child: RaisedButton(
child: Text("分享"
),
onPressed: (){
_modeBottomDialog().then((value){
print("value --- > "+value );
});
},
),
),
);
}
toastDialog:
toastDialog 是平时用来做提示的 toast 信息实现 （例如， 账号密码不能为空 ，账号或者密码不对 ）
toastDialog 这个需要用到三方库 fluttertoast: ^3.1.3 我们先要在 pubspec.yaml 中添加依赖
QQ截图20200531153402.png
然后执行 在控制台 执行flutter pub get 下载依赖
使用需要导入这个包
import 'package:fluttertoast/fluttertoast.dart';
toastDialog具体代码实现 ：
_toast()async{
Fluttertoast.showToast(
msg: "This is Center Short Toast", //弹出内容
toastLength: Toast.LENGTH_SHORT, //弹出时间长短
gravity: ToastGravity.CENTER, //弹出位置 上 下 中
timeInSecForIos: 3, //在什么平台上面使用 安卓 IOS Web
backgroundColor: Colors.black, // 背景颜色
textColor: Colors.white, //字体颜色
fontSize: 16.0 //字体大小
);
我们调用三方库里面的 showToast ()组件反别设置
msg: "This is Center Short Toast", //弹出内容
toastLength: Toast.LENGTH_SHORT, //弹出时间长短
gravity: ToastGravity.CENTER, //弹出位置 上 下 中
timeInSecForIos: 3, //在什么平台上面使用 安卓 IOS Web
backgroundColor: Colors.black, // 背景颜色
textColor: Colors.white, //字体颜色
fontSize: 16.0 //字体大小
各个属性来满足我们实际需求
具体调用：
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("_toastDialogState"),
),
body: Container(
child: Column(
children: <Widget>[
RaisedButton(
child: Text("点击弹出toast"),
onPressed: _toast,
),
RaisedButton(
child: Text("调用封装的方法弹出"),
onPressed: ()async{
ToastUtil.showInfo("显示toast");
},
)
],
)
),
);
}
我们也可以对toast进行适当的封装
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class ToastUtil{
static void showInfo(String str)async {
Fluttertoast.showToast(
msg: str,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIos: 3,
backgroundColor: Colors.black,
textColor: Colors.white,
fontSize: 16.0
);
}
}
然后再其他类只需要导入我这个工具类就行了
直接调用：
RaisedButton(
child: Text("调用封装的方法弹出"),
onPressed: ()async{
ToastUtil.showInfo("显示toast");
},
)
自定义 LoadingDialog（网络加载对话框)：
通常我们再加载网络 请求后台的数据展示再我们的app上面的时候 这个过程需要一定的时间
所以这个时候我们需要做一个loadingDialog 页面来处理 这个等待的过程
如图：
QQ截图20200531132014.png
具体代码实现：
import 'package:flutter/material.dart';
class LoadingDialog extends Dialog {
String text;
LoadingDialog({Key key, @required this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
return new Material(
//创建透明层
type: MaterialType.transparency, //透明类型
child: new Center(
//保证控件居中效果
child: new SizedBox(
width: 100.0,
height: 100.0,
child: new Container(
decoration: ShapeDecoration(
color: Color(0xffffffff),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
),
),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new CircularProgressIndicator(),
new Padding(
padding: const EdgeInsets.only(
top: 20.0,
),
child: new Text(
text,
style: new TextStyle(fontSize: 12.0),
),
),
],
),
),
),
),
);
}
}
这里我们自己创建一个loadingDialog 需要继承flutter sdk 里面的Dialog 然后重写 build 方法 需要返回一个widget
我们这里返回Material 来设置透明效果 然后再里面嵌套 Center 来使得我们的要展示的内容居中显示
然后创建 Sizebox 盒子模型组件 设置宽高 各100的正方形 来装载我们显示的的内容
我们通过 ShapeDecoration 组件来实现 loading 动画效果
在下面我们加一个text显示我们需要显示的提示的文字 （加载中 等待中 等等 ）
具体调用 :
我们需要写一个 showCustomDialog 方法来转载我们的loadingDialog
void showCustomDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return LoadingDialog(text: "加载中");
});
}
然后我们在具体的业务逻辑中的widget 或者网络请求中调用
import 'package:flutter/material.dart';
import '../dialog/loading_dialog.dart';
class LoagingWidget extends StatefulWidget {
LoagingWidget({Key key}) : super(key: key);
@override
_LoagingWidgetState createState() {
return _LoagingWidgetState();
}
}
class _LoagingWidgetState extends State<LoagingWidget> {
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("网络加载loading"),
),
body: Container(
child: RaisedButton(
child: Text("点击加载"),
onPressed: (){
setState(() {
showCustomDialog(context);
});
},
),
),
);
}
void showCustomDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return LoadingDialog(text: "加载中");
});
}
}
关闭对话框 通过调用 Navigator.pop(context) 来关闭
Navigator.pop(context);
到此flutter 中dialog 的各种用法就介绍完了 如果有错误或者遗漏的地方希望各位同学及时指正
项目地址：https://github.com/xq19930522/flutter_dialog_demo.git
最后总结 ：
flutter中的dialog提供的api比较丰富 例如 alertDialog simpleDialog modeBottomDialog toastDialog
这些都可以实现很多功能的需求 这些dialog我们都可以自己自定义dialog 继承flutter sdk里面的Dialog来实现的 有兴趣的同学可以自己在私下研究 这里就不过多讲了 最后希望我的文章能帮助到各位解决问题，各位同学如果觉得文章还不错 ，麻烦给关注和star，小弟在这里谢过啦
网友评论