實現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.頁面跳轉》 來回顧回顧。

這意味着，彈出一個 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 有些什麼經常使用參數：

屬性	類型	說明
title	Widget	Dialog的標題
titlePadding	EdgeInsetsGeometry	title周圍的 Padding
children	List	child內容數組，會從上到下的排列 child
contentPadding	EdgeInsetsGeometry	內容區域周圍的 Padding
backgroundColor	Color	Dialog的背景色
elevation	double	Dialog 的懸浮高度，和陰影效果有關
shape	ShapeBorder	Dialog的邊框形狀

🌰 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 有哪些經常使用的屬性：

屬性	類型	說明
title	Widget	Dialog的標題
titlePadding	EdgeInsetsGeometry	title周圍的 Padding
content	Widget	Dialog 中間的內容
contentPadding	EdgeInsetsGeometry	內容區域周圍的 Padding
backgroundColor	Color	Dialog的背景色
elevation	double	Dialog 的懸浮高度，和陰影效果有關
shape	ShapeBorder	Dialog的邊框形狀
actions	List	一般爲Dialog底部的操做按鈕

🌰 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快速上手指南》先導篇

如何找到我？

傳送門：CoorChice 的主頁

傳送門：CoorChice 的 Github