基本属性介绍
几个自带的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,//点击背后蒙层是否关闭弹框，默认为 true
Color? barrierColor = Colors.black54,//背后蒙层颜色
String? barrierLabel,
bool useSafeArea = true,//是否使用安全区域，默认为 true
bool useRootNavigator = true,//是否使用根导航，默认为 true
RouteSettings? routeSettings,//路由设置
})
showCupertinoDialog 也是控制 Dialog 弹出的 api。其实与 showDialog
一样，两者都可以调用各种弹框，但是 showCupertinoDialog 默认是不可以点击空白区域隐藏的。
Future<T?> showCupertinoDialog<T>({
required BuildContext context,
required WidgetBuilder builder,//需要显示的弹窗
String? barrierLabel,
bool useRootNavigator = true,//是否使用根导航，默认为 true
bool barrierDismissible = false,//点击背后蒙层是否关闭弹框，默认为 false
RouteSettings? routeSettings,//路由设置
})
1.AlertDialog确认对话框
_alertDialog() async{
var result= await showDialog(
barrierDismissible:false, //表示点击灰色背景的时候是否消失弹出框
context:context,
builder: (context){
return AlertDialog(
title: Text("提示信息!"),
content:Text("您确定要删除吗?") ,
actions: <Widget>[
TextButton(
child: Text("取消"),
onPressed: (){
print("取消");
Navigator.pop(context,'Cancle');//点击之后使这个页面消失
},
),
TextButton(
child: Text("确定"),
onPressed: (){
print("确定");
Navigator.pop(context,"Ok");
},
)
],
);
}
);
print(result);
}
2.SimpleDialog选择对话框
_simpleDialog() async{
var result=await showDialog(
barrierDismissible:false, //表示点击灰色背景的时候是否消失弹出框
context:context,
builder: (context){
return SimpleDialog(
title:Text("选择内容"),
children: <Widget>[
SimpleDialogOption(
child: Text("Option A"),
onPressed: (){
print("Option A");
Navigator.pop(context,"A");
},
),
Divider(),
SimpleDialogOption(
child: Text("Option B"),
onPressed: (){
print("Option B");
Navigator.pop(context,"B");
},
),
Divider(),
SimpleDialogOption(
child: Text("Option C"),
onPressed: (){
print("Option C");
Navigator.pop(context,"C");
},
),
Divider(),
],
);
}
);
print(result);
}
3.showModalBottomSheet底部弹出的对话框
_modelBottomSheet() async{
var result=await showModalBottomSheet(
context:context,
builder: (context){
return Container(
height: 220,
child: Column(
children: <Widget>[
ListTile(
title: Text("分享 A"),
onTap: (){
Navigator.pop(context,"分享 A");
},
),
Divider(),
ListTile(
title: Text("分享 B"),
onTap: (){
Navigator.pop(context,"分享 B");
},
),
Divider(),
ListTile(
title: Text("分享 C"),
onTap: (){
Navigator.pop(context,"分享 C");
},
)
],
),
);
}
);
print(result);
}
4.showToast提示信息框
这是一个第三方组件，需要我们手动导入：https://pub.dev/packages/fluttertoast
其实直接在控制台运行以下命令即可：
flutter pub add fluttertoast
Fluttertoast.showToast(
msg: "提示信息",
toastLength: Toast.LENGTH_LONG, //长度
gravity: ToastGravity.BOTTOM, //配置方位
timeInSecForIosWeb: 1, //显示时间,这个配置只在IOS上有效
backgroundColor: Colors.black,
textColor: Colors.white,
fontSize: 16.0
);
5.自定义Dialog
自定义 Dialog 对象，需要继承 Dialog 类，尽管 Dialog 提供了 child 参数可以用来写视图界面，但是往往会达不到我们想要的效果，因为默认的 Dialog 背景框是满屏的。如果我们想完全定义界面，就需要重写 build 函数。
这是一个结合定时器的自定义Dialog：
import 'dart:async';
import 'package:flutter/material.dart';
class MyDialog extends Dialog{
String title;
String content;
MyDialog(this.title,this.content);
//定时器,自动关闭Diolog
_showTimer(context){
var timer;
timer = Timer.periodic(
Duration(milliseconds: 3000),//3000毫秒就是三秒
(t){
Navigator.pop(context);
t.cancel(); //取消定时器 timer.cancel();
}
);
}
@override
Widget build(BuildContext context) {
_showTimer(context);
// TODO: implement build
return Material(
type: MaterialType.transparency,
child: Center(
child: Container(
width: 300,
height: 300,
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(10),
child: Stack(
children: [
Align(
child: Text('${
this.title}'),
alignment: Alignment.center,
),
Align(
alignment: Alignment.centerRight,
child: InkWell(
child: Icon(Icons.close),
onTap: () {
Navigator.pop(context);
},
),
),
],
)
),
Divider(),
Container(
padding: EdgeInsets.all(10),
width: double.infinity,
child: Text('${
this.content}',textAlign: TextAlign.left,),
)
],
),
),
),
);
}
}
