【Flutter组件】Dialog使用说明

Dialog相关说明

对话框本质上是属于一个路由的页面route，由Navigator进行管理，所以控制对话框的显示和隐藏，也是调用Navigator.of(context)的push和pop方法。

在Flutter中，对话框会有两种风格，调用showDialog()方法展示的是material风格的对话框，调用showCupertinoDialog()方法展示的是ios风格的对话框。 而这两个方法其实都会去调用showGeneralDialog()方法，可以从源码中看到最后是利用Navigator.of(context, rootNavigator: true).push()一个页面。

基本要传的参数:

• context：上下文
• builder：用于创建显示的widget，barrierDismissible可以控制点击对话框以外的区域是否隐藏对话框

你会注意到，showDialog()方法返回的是一个Future对象,可以通过这个future对象来获取对话框所传递的数据。 比如我们想知道用户是点击了对话框的确认按钮还是取消按钮，那就在退出对话框的时候，利用Navigator.of(context).pop("一些数据");

Future<T> showCupertinoDialog<T>({
  @required BuildContext context,
  @required WidgetBuilder builder,
});

Future<T> showDialog<T>({
  @required BuildContext context,
  bool barrierDismissible = true,
  WidgetBuilder builder,
})

Future<T> showGeneralDialog<T>({
  @required BuildContext context,
  @required RoutePageBuilder pageBuilder,
  bool barrierDismissible,
  String barrierLabel,
  Color barrierColor,
  Duration transitionDuration,
  RouteTransitionsBuilder transitionBuilder,
}) {
  assert(pageBuilder != null);
  assert(!barrierDismissible || barrierLabel != null);
  return Navigator.of(context, rootNavigator: true).push<T>(_DialogRoute<T>(
    pageBuilder: pageBuilder,
    barrierDismissible: barrierDismissible,
    barrierLabel: barrierLabel,
    barrierColor: barrierColor,
    transitionDuration: transitionDuration,
    transitionBuilder: transitionBuilder,
  ));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

AlertDialog和SimpleDialog

• AlertDialog

  _alertDialog() async {
    var alertDialogs = await showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: const Text("提示"),
            content: const Text("确定要删除吗？"),
            actions: <Widget>[
              TextButton(onPressed: () {
                Navigator.pop(context, "Cancel");
              },
                  child: const Text("取消")),
              TextButton(onPressed: () => Navigator.pop(context, "Yes"),
                  child: const Text("确定")),
            ],
          );
        });
    return alertDialogs;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• SimpleDialog

  _simpleDialog() async{
    var simpleDialog = await showDialog(
        context: context,
        builder: (context){
          return SimpleDialog(
            title: Text("提示"),
            children: [
              TextButton(onPressed: (){
                Navigator.pop(context);
              }, child: const Text("Option1")),
              TextButton(onPressed: (){
                Navigator.pop(context);
              }, child: const Text("Option2")),
              TextButton(onPressed: (){
                Navigator.pop(context);
              }, child: const Text("Option3"))
            ],
          );
        });
    return simpleDialog;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

showModalBottomSheet

_modalButtomSheet() async{
    showModalBottomSheet(
        context: context,
        builder: (context){
          return Container(
            height: 200,
            child: Column(
              children: [
                ListTile(
                  leading: const Icon(Icons.settings),
                  title: const Text("设置"),
                  onTap: ()=>Navigator.pop(context),
                ),
                ListTile(
                  leading: const Icon(Icons.home),
                  title: const Text("主页"),
                  onTap: ()=>Navigator.pop(context),
                ),
                ListTile(
                  leading: const Icon(Icons.message),
                  title: const Text("信息"),
                  onTap: ()=>Navigator.pop(context),
                ),
              ],
            ),
          );
        });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

自定义dialog

class CommonDialog extends Dialog {
  
  ......
  static const String MODULE_FOUR = "module_four";

  String? content;
  GestureTapCallback? confirm;
  GestureTapCancelCallback? cancel;
  String type = MODULE_ONE;
  String? subContent;
  String? imageUrl;

  CommonDialog({
    this.content,
    this.confirm,
    this.cancel,
    this.subContent,
    this.imageUrl,
    required this.type,
  });

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Container(
          width: 0.8.sw,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(8.w))),
          child: _getModuleByType(type, context),
        ),
      ),
      type: MaterialType.transparency,
    );
  }
  
  Widget _getModuleByType(String type, BuildContext context) {
    switch (type) {
      case MODULE_ONE:
        return _dialogModuleOne(context);
      case MODULE_TWO:
        return _dialogModuleTwo(context);
      case MODULE_THREE:
        return _dialogModuleThree(context);
      case MODULE_FOUR:
        return _dialogModuleFour(context);
    }
    return _dialogModuleOne(context);
  }
  
  
    ///   -------------------------------
  ///  ｜                      关闭按钮 ｜
  ///  ｜                              ｜
  ///  ｜     主文本：关注公众号/添加微信   ｜
  ///  ｜       副文本：xxx             ｜
  ///  ｜                              ｜
  ///  ｜       图片：二维码
  ///  ｜
  ///  ｜
  ///  ｜     文本：步骤提示文本          ｜
  ///   --------------------------------
  Widget _dialogModuleFour(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        Positioned(
            bottom: 0.w,
            left: 0.w,
            child: Image.asset(
              "assets/dialog_qrcode_bg.webp",
              width: 178.w,
              height: 178.w,
            )),
        Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Align(
              //关闭按钮
              alignment: Alignment.topRight,
              child: IconButton(
                iconSize: 24.w,
                icon: Icon(Icons.close),
                onPressed: () {
                  Navigator.pop(context);
                  this.cancel?.call();
                },
              ),
            ),
            Padding(
              //主标题
              padding: EdgeInsets.only(left: 24.w, right: 24.w),
              child: Text(
                "$content",
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 20.w, fontWeight: FontWeight.bold),
              ),
            ),
            Padding(
              //副文本
              padding: EdgeInsets.only(left: 24.w, right: 24.w),
              child: Text(
                "$subContent",
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 14.w, color: CMColors.color_808080),
              ),
            ),
            Padding(
              //二维码区
              padding: EdgeInsets.only(top: 24.w, left: 24.w, right: 24.w),
              child: Container(
                height: 200.w,
                width: 200.w,
                alignment: Alignment.center,
                child: Image.network(
                  "$imageUrl",
                  width: 168.w,
                  height: 168.w,
                  fit: BoxFit.cover,
                ),
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(Radius.circular(24.w)),
                    boxShadow: [
                      BoxShadow(
                          color: CMColors.color_80d7dae0, blurRadius: 15.w)
                    ]),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                  left: 24.w, top: 16.w, right: 24.w, bottom: 24.w),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    "第一步：截图二维码，保存到相册",
                    style: TextStyle(
                      color: CMColors.color_EB4534,
                      fontSize: 14.w,
                    ),
                  ),
                  Text(
                    "第二步：打开微信“扫一扫”",
                    style: TextStyle(
                      color: CMColors.color_EB4534,
                      fontSize: 14.w,
                    ),
                  )
                ],
              ),
            )
          ],
        )
      ],
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

调用：

showDialog(
      context: context,
      builder: (context) {
        return CommonDialog(
          type: CommonDialog.MODULE_FOUR,
          content: "添加专属顾问二维码",
          subContent: "提前了解上课信息",
          imageUrl: "https://scpic.chinaz.net/files/pic/pic9/202004/zzpic24187.jpg",
          confirm: (){
            Fluttertoast.showToast(msg: "你同意了权限请求");
          },
          cancel: (){
            Fluttertoast.showToast(msg: "你不同意了权限请求");
          },
        );
      });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17