1.AlertDialog使用：
(1)实现确认对话框：
void showAlertDialog() {
showDialog<bool>( //用于弹出居中对齐对话框，或用showGeneralDialog自定义对话框
context: context,
barrierDismissible: true, //点击Dialog之外是否关闭对话框，默认为true
builder: (context) {
return AlertDialog( //AlertDialog也是Widget
title: Text("标题"),
content: Text("提示文字"),
actions: <Widget>[ //按钮列表
TextButton(
child: Text("取消"),
onPressed: () => Navigator.of(context).pop(), //关闭对话框
),
TextButton(
child: Text("确认"),
onPressed: () {
//...执行确认的逻辑
Navigator.of(context).pop(true); //关闭对话框
},
),
],
);
});
}(2)实现加载中对话框：
void showLoadingDialog() {
showDialog( //用于弹出居中对齐对话框
context: context,
barrierDismissible: false, //点击Dialog之外是否关闭对话框，默认为true
builder: (context) {
return UnconstrainedBox( //去除父级限制
child: SizedBox( //用于缩小对话框宽度
width: 200, //设置对话框宽度为200
child: AlertDialog( //此处使用AlertDialog的content属性实现自定义布局
content: Column( //线性布局(垂直方向排列)
children: <Widget>[
Padding(
padding: EdgeInsets.only(bottom: 20.0), //加载框与文本间隔20
child: CircularProgressIndicator(),
),
Text("加载中...")
],
),
),
),
);
},
);
}2.实现列表对话框：
(1)SimpleDialog实现少量列表对话框：
void showSimpleDialog() {
showDialog<int>( //用于弹出居中对齐对话框
context: context,
barrierDismissible: true, //点击Dialog之外是否关闭对话框，默认为true
builder: (context) {
return SimpleDialog(
title: Text('选择列表'),
children: <Widget>[
SimpleDialogOption(
child: item布局,
onPressed: () { //item选择事件
Navigator.pop(context, 0); //选择第0行
}
),
SimpleDialogOption(
child: item布局,
onPressed: () { //item选择事件
Navigator.pop(context, 1); //选择第1行
}
),
... //省略其他item SimpleDialogOption
],
);
});
}(2)Dialog实现大量列表对话框：
void showListDialog() async {
showDialog<int>( //用于弹出居中对齐对话框
context: context,
barrierDismissible: true, //点击Dialog之外是否关闭对话框，默认为true
builder: (BuildContext context) {
return Dialog( //Dialog也是Widget
child: Column(//垂直方向的线性布局
children: <Widget>[
Padding( //标题布局
padding: EdgeInsets.symmetric(vertical: 20),
child: Text('选择列表'),
),
Expanded( //弹性列表布局
child: ListView.builder(
itemCount: 总个数,
itemBuilder: (BuildContext context, int index) {
return item组件名(
child: item布局,
onTap: () => Navigator.of(context).pop(index), //item点击事件
);
},
)
),
],
));
},
);
}(3)showModalBottomSheet实现底部列表对话框：
void showBottomListDialog() {
showModalBottomSheet<int>( //从底部上升，对话框显示在屏幕底部
context: context,
builder: (BuildContext context) {
return ListView.builder(
itemCount: 列表总数,
itemBuilder: (BuildContext context, int index) {
return ...; //item布局
},
);
}
);
}3.实现日历选择对话框：
(1)Android风格日历对话框：
void showAndroidDateDialog() {
var date = DateTime.now(); //当前日历
showDatePicker( //显示日历选择对话框
context: context,
initialDate: date, //初始化日期
firstDate: date, //开始日期
lastDate: date.add( //可选的结束日期
Duration(days: 365), //未来1年
),
);
}(2)iOS风格日历对话框：
DateTime? value = null;
void showIOSDateDialog() {
var date = DateTime.now();
showCupertinoModalPopup<DateTime>( //(iOS风格，上下滚动)显示日历选择对话框
context: context,
builder: (context) {
return Column(
mainAxisSize: MainAxisSize.min, //垂直方向高度为最小
children: [
Padding( //控制标题布局
padding: EdgeInsets.only(left: 10, top: 10, right: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center, //垂直居中对齐
children: [
ElevatedButton(child: Text("取消"), onPressed: () {
Navigator.of(context).pop();
}),
Spacer(flex: 1), //空白Widget，横向撑到最大
ElevatedButton(child: Text("确认"), onPressed: () {
Navigator.of(context).pop(this.value);
})
])),
SizedBox( //控制日历布局高度
height: 200,
child: CupertinoDatePicker( //日历Widget
mode: CupertinoDatePickerMode.dateAndTime,
minimumDate: date, //最小可选日期
maximumDate: date.add(Duration(days: 365)), //最大可选日期
onDateTimeChanged: (DateTime value) { //滚动日期时触发此方法
this.value = value;
},
),
)
],
);
},
);
}