[- Flutter基础篇 -] 聊聊那些弹框

对话框作为一个挺重要的东西，这里来说一下，细细一数也蛮多的，本文包括

[1].SimpleDialog
[2].AlertDialog
[3].CupertinoAlertDialog
[4].Dialog中的组件状态更新
[5].SnackBar
[6].BottomSheet
[7].DatePicker
[8].TimePickerwTimePicker,
[9].CupertinoPicker
[10].CupertinoDatePicker
[11].CupertinoTimerPicker 

---

0.搭个场子再说

class DialogShow extends StatefulWidget {
  @override
  _DialogShowState createState() => _DialogShowState();
}

class _DialogShowState extends State {
  @override
  Widget build(BuildContext context) {
    var title = Container(
      alignment: AlignmentDirectional.center,
      child: Text(
        "Dialog Unit",
        style: TextStyle(fontSize: 30),
      ),
    );
    
    Map buttons = {
      "对话框SimpleDialog": _showSimpleDialog,
      "对话框AlertDialog": _showAlertDialog,
      "对话框CupertinoAlertDialog": _showCupertinoAlertDialog,
      "对话框显示自己": _showWidgetDialog,
      "对话框显示StatefulWidget": _showStatefulWidgetDialog,
      "Scaffold": _showScaffold,
      "BottomSheet": _showBottomSheet,
      "DatePicker": _showDatePicker,
      "TimePicker": _showTimePicker,
      "CupertinoPicker": _showCupertinoPicker,
      "CupertinoDatePicker": _showCupertinoDatePicker,
      "CupertinoTimerPicker": _showCupertinoTimerPicker,
    };
    
    var btns=  buttons.keys.toList().map((str){//构建按钮组件列表
      return RaisedButton(
        onPressed: () {
          buttons[str](context);
        },
        child: Text(str),
      );
    }).toList();

    var result =Column(children: [title,Column(
      children: btns,
    )],) ;
    return result;
  }
} 

---

1.对话框:SimpleDialog

通过showDialog来创建对话框，传入BuildContext对象，通过builder构造器来创建组件

简单的对话框，只要一条条的东西可以选择SimpleDialog，比如：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VLvZIRfe-1629539195947)(https://user-gold-cdn.xitu.io/2019/8/8/16c6f355d96f276b?imageView2/0/w/1280/h/960/ignore-error/1)]

_showSimpleDialog(BuildContext context) {
  var strs=['云深不知处内亥时息,卯时起',
    "云深不知处内不可挑食留剩,不可境内杀生",
    "云深不知处内不可私自斗殴,不可淫乱",
    "云深不知处禁止魏无羡入内,不可吹笛"];
  
  var title = Row(//标题
    children: [
      Image.asset("images/icon_lwj.png", width: 30,height: 30,),
      SizedBox(width: 10,),
      new Text("蓝氏家规")],
  );
  showDialog(
      context: context,
      builder: (context) {
        return SimpleDialog(
          title: title,
          children: strs.map((str){
            return SimpleDialogOption(
              child: Row(children: [
                Icon(Icons.turned_in_not,color: Colors.blue,),Text(str)],) ,
              onPressed: () {
                Navigator.of(context).pop(str);
                print(str);
              },
            );
          }).toList(),
        );
      });
} 

---

3.对话框:AlertDialog

AlertDialog组件包括标题(title)、内容(content)、actions(行为)，还有一些阴影，颜色形状等辅助属性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SyNRvg06-1629539195948)(https://user-gold-cdn.xitu.io/2019/8/8/16c6f145e19c8ac3?imageView2/0/w/1280