AlertDialog
const AlertDialog({
Key key,
this.title, //标题
this.titlePadding, // 标题内边距
this.titleTextStyle, //标题样式
this.content, // 内容
this.contentPadding,//内容内边距
this.contentTextStyle,// 内容样式
this.actions, // 按钮数组
this.backgroundColor, // 背景色
this.elevation,// 阴影
this.shape, // 外形
})
//AlertDialog
Future showExitDialog() {
return showDialog<bool>(
context: context,
builder: (context) {
return AlertDialog(
title: Text("提示"),
content: Text("您确定要退出吗?"),
actions: <Widget>[
FlatButton(
child: Text("取消"),
onPressed: () => Navigator.of(context).pop(false), // 关闭对话框返回false
),
FlatButton(
child: Text("退出"),
onPressed: () {
//关闭对话框并返回true
Navigator.of(context).pop(true);
},
),
],
);
},
);
}
效果
SimpleDialog
展示一个列表,用于列表选择的场景。
//SimpleDialog选择框
Future<void> changeLanguage() async {
var i = await showDialog<int>(
context: context,
builder: (context){
return SimpleDialog(
title: Text("选择语言"),
children: <Widget>[
SimpleDialogOption(
child: Text("英文"),
onPressed: (){
Navigator.pop(context,1);
},
),
SimpleDialogOption(
child: Text("简体中文"),
onPressed: (){
Navigator.pop(context,2);
},
),
SimpleDialogOption(
child: Text("繁体中文"),
onPressed: (){
Navigator.pop(context,3);
},
),
],
);
}) ;
switch(i){
case 1:
print("英文");
break;
case 2:
print("简体中文");
break;
case 3:
print("繁体中文");
break;
}
}
效果
Dialog
弹出一个有100个列表项的对话框
//ListDialog
Future<void> showListDialog() async{
var index = await showDialog<int>(
context: context,
builder: (context){
var child = Container(
child: Column(
children: <Widget>[
ListTile(title: Text("请选择"),),
Expanded(
child: ListView.builder(
itemBuilder: (context,index){
return ListTile(
title: Text("第 $index 个"),
onTap: (){
Navigator.of(context).pop(index);
},
);
},
itemCount: 100,
),
),
],
),
height: 400,
);
return Dialog(child: child,);
}
) ;
if(index != null){
print("选了第$index个");
}
}
效果
状态管理
bool checked = false; // 复选框选中状态
Future showCheckDialog() {
checked = false;
return showDialog<bool>(
context: context,
builder: (context) {
return AlertDialog(
title: Text("提示"),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("您确定要退出吗?"),
Row(
children: <Widget>[
Text("同时删除缓存?"),
Builder(builder: (BuildContext context){
return Checkbox(
value: checked,
onChanged: (value){
(context as Element).markNeedsBuild();
checked = !checked;
}
);
})
],
),
],
),
actions: <Widget>[
FlatButton(
child: Text("取消"),
onPressed: () => Navigator.of(context).pop(),
),
FlatButton(
child: Text("退出"),
onPressed: () {
//关闭对话框并返回true
Navigator.of(context).pop(checked);
},
),
],
);
},
);
}
TextButton(
onPressed: () async {
var checked = await showCheckDialog();
if (checked == null) {
print("取消");
} else {
checked as bool;
print("是否删除缓存? $checked");
}
},
child: Text("复选对话框")),
效果
底部菜单列表
showModalBottomSheet方法可以弹出一个Material风格的底部菜单列表模态对话框
//底部菜单列表
Future showBottomSheetDialog() {
return showModalBottomSheet<int>(
context: context,
builder: (context) {
return ListView.builder(
itemBuilder: (context, index) {
return ListTile(
title: Text("漩涡鸣人 $index"),
onTap: () {
Navigator.of(context).pop(index);
},
);
},
itemCount: 20,
);
});
}
效果
全屏底部菜单列表
TextButton(
onPressed: () async {
Scaffold.of(context)
.showBottomSheet((BuildContext context) {
return ListView.builder(
itemBuilder: (context, index) {
return ListTile(
title: Text("佐助 $index"),
onTap: () {
Navigator.of(context).pop(index);
print(index);
},
);
},
itemCount: 50,
);
});
},
child: Text("全屏底部菜单列表")),
效果
注意:
调用showBottomSheet方法就必须得保证父级组件中有Scaffold。
Loading框
Loading框可以直接通过showDialog+AlertDialog
TextButton(
onPressed: () {
showDialog(
context: context,
barrierDismissible: false, //点击遮罩不关闭对话框
builder: (context) {
return UnconstrainedBox(
constrainedAxis: Axis.vertical,
child: SizedBox(
width: 240,
child: AlertDialog(
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
CircularProgressIndicator(),
//progress
Padding(
padding:
const EdgeInsets.only(top: 20),
child: Text("正在加载中..."),
)
],
),
)),
);
});
},
child: Text("加载框")),
效果
日历选择框
TextButton(
onPressed: () async {
var date = DateTime.now();
Locale myLocale = Localizations.localeOf(context);
DateTime? time = await showDatePicker(
context: context,
initialDate: date,
firstDate: DateTime(date.year - 1),
locale: myLocale,
lastDate: date.add(
Duration(days: 100),
),
);
print(time.toString());
},
child: Text("日期选择"),
),
效果
此处引入了flutter_localizations
1, pubspec.yaml中添加
flutter_localizations:
sdk: flutter
2,MaterialApp中添加
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
],
supportedLocales: [
const Locale('zh', 'CH'),
],