![](https://img-blog.csdnimg.cn/20200303202847532.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

> 注意：無特殊說明，Flutter版本及Dart版本如下：
> - Flutter版本： 1.12.13+hotfix.5 
> - Dart版本： 2.7.0

當應用程式進行重要操作時經常需要使用者進行2次確認，以避免使用者的誤操作，比如刪除檔案時，一般會彈出提示“是否要刪除當前檔案”，使用者點選確認後才會進行刪除操作，這時我們可以使用提示框（AlertDialog或者CupertinoAlertDialog）。

根據設計的不同，我們可以選擇Material風格的AlertDialog或者Cupertino（ios）風格的CupertinoAlertDialog，

Material風格基礎用法如下：

```dart
RaisedButton(
  child: Text('切換'),
  onPressed: () {
    showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('提示'),
            content: Text('確認刪除嗎？'),
            actions: <widget>[
              FlatButton(child: Text('取消'),onPressed: (){},),
              FlatButton(child: Text('確認'),onPressed: (){},),
            ],
          );
        });
  },
)
```

Material風格效果：

![](https://img-blog.csdnimg.cn/20200303175148609.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

Cupertino（ios）風格基礎用法如下：

```dart
RaisedButton(
  child: Text('切換'),
  onPressed: () {
    showCupertinoDialog(
        context: context,
        builder: (context) {
          return CupertinoAlertDialog(
            title: Text('提示'),
            content: Text('確認刪除嗎？'),
            actions: <widget>[
              CupertinoDialogAction(child: Text('取消'),onPressed: (){},),
              CupertinoDialogAction(child: Text('確認'),onPressed: (){},),
            ],
          );
        });
  },
)
```

Cupertino（ios）風格效果如下：

![](https://img-blog.csdnimg.cn/20200303175317388.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

`showDialog`和`AlertDialog`配合使用展示Material風格對話方塊，`showCupertinoDialog`和`CupertinoAlertDialog`配合使用展示iOS風格對話方塊，`showCupertinoDialog`點選空白處是無法退出對話方塊的，而`showDialog`點選空白處預設退出對話方塊，`barrierDismissible`屬性控制點選空白處的行為，用法如下：

```dart
showDialog(
    barrierDismissible: false,
    )
```

AlertDialog的屬性相對比較豐富，可以設定title樣式、content樣式、背景顏色、陰影值，設定是形狀：

```dart
AlertDialog(
  title: Text('提示'),
  content: Text('確認刪除嗎？'),
  backgroundColor: Colors.lightBlueAccent,
  elevation: 24,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
  actions: <widget>[
    FlatButton(child: Text('取消'),onPressed: (){},),
    FlatButton(child: Text('確認'),onPressed: (){},),
  ],
)
```

![](https://img-blog.csdnimg.cn/20200303181237114.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

使用者點選“取消”或者“確定”按鈕後退出對話方塊，App需要知道知道使用者選擇了哪個選項，用法如下：

```dart
RaisedButton(
  child: Text('切換'),
  onPressed: () async {
    var result = await showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('提示'),
            content: Text('確認刪除嗎？'),
            actions: <widget>[
              FlatButton(
                child: Text('取消'),
                onPressed: () {
                  Navigator.of(context).pop('cancel');
                },
              ),
              FlatButton(
                child: Text('確認'),
                onPressed: () {
                  Navigator.of(context).pop('ok');
                },
              ),
            ],
          );
        });
    print('$result');
  },
)
```

如果你覺得系統提供的這2個風格的對話方塊不夠個性，你可以試試SimpleDialog，用法和AlertDialog基本相同，如下：

```dart
SimpleDialog(
  title: Text('提示'),
  children: <widget>[
    Container(
      height: 80,
      alignment: Alignment.center,

child: Text('確認刪除嗎？'),
    ),
    Divider(height: 1,),
    FlatButton(
      child: Text('取消'),
      onPressed: () {
        Navigator.of(context).pop('cancel');
      },
    ),
    Divider(height: 1,),
    FlatButton(
      child: Text('確認'),
      onPressed: () {
        Navigator.of(context).pop('ok');
      },
    ),
  ],
)
```

效果如下：

![](https://img-blog.csdnimg.cn/20200303182859154.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

如果你覺得這還是不夠個性，那可以祭出終極大招了，直接使用Dialog，Dialog可以定製任何對話方塊，只需將對話方塊的內容給child屬性：

```dart
Dialog(
  child: MyDialog(),
);
```

當然一般情況下，系統提供的對話方塊就夠用了，這幾個對話方塊元件用法基本一樣，不同的地方僅僅是靈活性和使用簡易程度的不要，Dialog最靈活，但使用起來比AlertDialog複雜一些，AlertDialog使用起來非常簡單，但佈局和基本樣式都已經固定好，不如Dialog靈活。

##### 今天的文章對大家是否有幫助？如果有，請在文章底部留言和點贊，以表示對我的支援，你們的留言、點贊和轉發關注是我持續更新的動力！

![](https://img-blog.csdnimg.cn/2020012208322494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9tZW5ncWQuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70)

### 更多相關閱讀：

- [Flutter系列文章總覽](https://blog.csdn.net/mengks1987/article/details/84868953)
- [Flutter Widgets 之 Expanded和Flexible](https://mengqd.blog.csdn.net/article/details/104414251)
- [Flutter Widgets 之 AnimatedList ](https://blog.csdn.net/mengks1987/article/details/103689129)
- [Flutter Widgets 之 SliverAppBar](https://blog.csdn.net/mengks1987/article/details/104031790)</widget></widget></widget></widget></widget>

Flutter Widgets 對話方塊-Dialog

相關文章