Flutter 的原生弹窗比较简单,其内部实现暂未深究,只做简单使用汇总
ShowDialog
showDialog(
//点击屏障时自动消除
//false时安卓手机实体返回键依然可以返回
barrierDismissible: true,
barrierColor: Colors.orange.withOpacity(0.3),
context: context,
builder: (context) {
return Align(
alignment: Alignment.center,
child: Container(color: Colors.red,width: 210,height: 100,),
);
},
);
AlertDialog
AlertDialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
elevation: 10,
icon: Icon(Icons.tiktok),
title: Text("标题"),
content: Text("内容文字"),
actions: [
TextButton(
onPressed: () { Navigator.pop(context); },
child: Text("确认"),
),
TextButton(
onPressed: () {},
child: Text("取消"),
),
TextButton(
onPressed: () {},
child: Text("选项"),
),
],
);
SimpleDialog
SimpleDialog(
title: const Text("选择标题"),
children: [
SimpleDialogOption(onPressed: () {}, child: Text("选项一")),
SimpleDialogOption(onPressed: () {}, child: Text("选项二")),
SimpleDialogOption(onPressed: () {}, child: Text("选项三")),
SimpleDialogOption(onPressed: () {}, child: Text("选项四")),
],
);
showModalBottomSheet
showModalBottomSheet(
context: context,
builder: (context) {
return Container(
height: 300,
width: double.infinity,
child: Center(
child: TextButton(onPressed: ()=>Get.back(),child: Text("aaaa"),)
),
);
},
);