实现Flutter弹窗的正确姿势..

喜欢ヅ旅行 2022-01-19 00:23 1032阅读 0赞

[**目录传送门：**《Flutter快速上手指南》先导篇][Flutter]

Dialog 在现代的视觉交互中是很常用的一种 UI。

做移动端开发的同学一定对它不陌生。

本篇将会探索一下，在 Flutter 中如何构建一个 Dialog UI。

# 1.如何展示一个Dialog？ #

1.导入 `material` 插件

'package:flutter/material.dart'
    复制代码

2.调用 showDialog() 来展示一个 Dialog

Future<T> showDialog<T>({
      @required BuildContext context,
      // 点击 dialog 外部是否可消失
      bool barrierDismissible = true,
      // 构建 Dialog 视图
      WidgetBuilder builder,
    })
    复制代码

没错，只需要调用这个简单的函数就可以展示一个 Dialog。

重点是，在 `builder` 中构建你的 Dialog 视图。

这是一个简单的例子：

showDialog(
      // 传入 context
      context: context,
      // 构建 Dialog 的视图
      builder: (_) => Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Container(
                  alignment: Alignment.center,
                  color: Colors.white,
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(top: 8),
                        child: Text('Custom Dialog',
                            style: TextStyle(
                                fontSize: 16,
                                decoration: TextDecoration.none)),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: 15, bottom: 8),
                        child: FlatButton(
                            onPressed: () {
                              // 关闭 Dialog
                              Navigator.pop(_);
                            },
                            child: Text('确定')),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
    );
    复制代码

看看效果：

其实和平时构建一个页面没多大区别，只不过是在 `showDialog()` 的 `builder` 中构建。

如果你注意细节的话，你会发现上面代码中有一行：

Navigator.pop(_);
    复制代码

它就是用来关闭 Dialog 的操作。

还记得 **Navigator** 吗？

它是用来进行页面跳转的，也许你可以看看 [《8.页面跳转》][8.] 来回顾回顾。

这意味着，弹出一个 Dialog，实际上就是打开了一个 Dialog 风格的页面！！?

跟踪源码会发现，在 `showDialog()` 的最后实现中，实际是这样的：

Navigator.of(context, rootNavigator: true).push<T>(_DialogRoute<T>(
        pageBuilder: pageBuilder,
        barrierDismissible: barrierDismissible,
        barrierLabel: barrierLabel,
        barrierColor: barrierColor,
        transitionDuration: transitionDuration,
        transitionBuilder: transitionBuilder,
      ))
    复制代码

? 可不就是打开了一个页面嘛..

# 2.常用 Dialog #

Flutter 当然会提供一些 Dialog 的封装，帮助开发者快速的构建常用的 Dialog。

## 2.1 SimpleDialog ##

先看看 SimpleDialog 有些什么常用参数：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>Widget</td> 
   <td>Dialog的标题</td> 
  </tr> 
  <tr> 
   <td>titlePadding</td> 
   <td>EdgeInsetsGeometry</td> 
   <td>title周围的 Padding</td> 
  </tr> 
  <tr> 
   <td>children</td> 
   <td>List</td> 
   <td>child内容数组，会从上到下的排列 child</td> 
  </tr> 
  <tr> 
   <td>contentPadding</td> 
   <td>EdgeInsetsGeometry</td> 
   <td>内容区域周围的 Padding</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>Color</td> 
   <td>Dialog的背景色</td> 
  </tr> 
  <tr> 
   <td>elevation</td> 
   <td>double</td> 
   <td>Dialog 的悬浮高度，和阴影效果有关</td> 
  </tr> 
  <tr> 
   <td>shape</td> 
   <td>ShapeBorder</td> 
   <td>Dialog的边框形状</td> 
  </tr> 
 </tbody> 
</table>

? e.g.：

showDialog(
      context: context,
      builder: (ctx) {
        return SimpleDialog(
          title: Text("SimpleDialog"),
          titlePadding: EdgeInsets.all(10),
          backgroundColor: Colors.amber,
          elevation: 5,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(6))),
          children: <Widget>[
            ListTile(
              title: Center(child: Text("Item_1"),),
            ),
            ListTile(
              title: Center(child: Text("Item_2"),),
            ),
            ListTile(
              title: Center(child: Text("Item_3"),),
            ),
            ListTile(
              title: Center(child: Text("Close"),),
              onTap: (){
                Navigator.pop(context);
              },
            ),
          ],
        );
      });
    复制代码

? 看看是啥效果：

## 2.2 AlertDialog ##

上图中的 Dialog 样式是现在比较常用的。

Flutter 帮助我们封装了 **AlertDialog** 来方便的实现这种样式。

看看 **AlertDialog** 有哪些常用的属性：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>Widget</td> 
   <td>Dialog的标题</td> 
  </tr> 
  <tr> 
   <td>titlePadding</td> 
   <td>EdgeInsetsGeometry</td> 
   <td>title周围的 Padding</td> 
  </tr> 
  <tr> 
   <td>content</td> 
   <td>Widget</td> 
   <td>Dialog 中间的内容</td> 
  </tr> 
  <tr> 
   <td>contentPadding</td> 
   <td>EdgeInsetsGeometry</td> 
   <td>内容区域周围的 Padding</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>Color</td> 
   <td>Dialog的背景色</td> 
  </tr> 
  <tr> 
   <td>elevation</td> 
   <td>double</td> 
   <td>Dialog 的悬浮高度，和阴影效果有关</td> 
  </tr> 
  <tr> 
   <td>shape</td> 
   <td>ShapeBorder</td> 
   <td>Dialog的边框形状</td> 
  </tr> 
  <tr> 
   <td>actions</td> 
   <td>List</td> 
   <td>通常为Dialog底部的操作按钮</td> 
  </tr> 
 </tbody> 
</table>

? e.g.：

showDialog(
      context: context,
      builder: (context) => AlertDialog(
            title: Text('Dialog'),
            content: Text(('Dialog content..')),
            actions: <Widget>[
              new FlatButton(
                child: new Text("取消"),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
              new FlatButton(
                child: new Text("确定"),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          ));
    复制代码

这就是上图中的 Dialog 的实现。

[**目录传送门：**《Flutter快速上手指南》先导篇][Flutter]

### 如何找到我？ ###

[**传送门：**CoorChice 的主页][CoorChice]

[**传送门：**CoorChice 的 Github][CoorChice _ Github]

转载于:https://juejin.im/post/5cb46c87e51d456e6479b459

[Flutter]: https://juejin.im/post/5c8f8e62e51d456a0f23d0fe
[8.]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FchenBingX%2FCoorChiceArticale%2Fblob%2Fmaster%2FFlutter
[CoorChice]: https://juejin.im/user/57fc43b67db2a200595ffd94
[CoorChice _ Github]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FchenBingX