![](https://upload-images.jianshu.io/upload_images/20353030-213bff718bbcfad0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

## showDialog

showDialog 用於彈出Material風格對話方塊，基本用法如下：

```dart
showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        ...
      );
    }
);
```

效果如下：

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

`builder`通常返回`Dialog`元件，比如`SimpleDialog`和`AlertDialog`。

`useRootNavigator`引數用於確定是否將對話方塊推送到給定“context”最遠或最接近的`Navigator`。預設情況下，`useRootNavigator`為“true”，被推送到根`Navigator`。如果應用程式有多個`Navigator`，關閉對話方塊需要使用

```dart
Navigator.of(context, rootNavigator: true).pop(result)
```

而不是

```dart
Navigator.pop(context, result)
```

`barrierDismissible`引數確認點選提示框外部區域時是否彈出提示框，預設true。

## showCupertinoDialog

showCupertinoDialog 用於彈出ios風格對話方塊，基本用法如下：

```dart
showCupertinoDialog(
    context: context,
    builder: (context) {
      return CupertinoAlertDialog(
       ...
      );
    });
```

效果如下：

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

`builder`通常返回`CupertinoDialog`或者`CupertinoAlertDialog`。

## showGeneralDialog

如果上面2種提示框不滿足你的需求，還可以使用showGeneralDialog自定義提示框，事實上，showDialog和showCupertinoDialog也是透過showGeneralDialog實現的，基本用法如下：

```dart
showGeneralDialog(
    context: context,
    barrierDismissible:true,
    barrierLabel: '',
    transitionDuration: Duration(milliseconds: 200),
    pageBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation) {
      return Center(
        child: Container(
          height: 300,
          width: 250,
          color: Colors.lightGreenAccent,
        ),
      );
    });
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-3b3cb0fb37478220.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

加上背景顏色：

```dart
showGeneralDialog(
    context: context,
    barrierColor: Colors.black.withOpacity(.5),
    ...
  )
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-d18db6164caa7e32.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

`barrierDismissible`:是否可以點選背景關閉。

`barrierColor`：背景顏色

`transitionDuration`：動畫時長，

`transitionBuilder`是構建進出動畫，預設動畫是漸隱漸顯，構建縮放動畫程式碼如下：

```dart
showGeneralDialog(
    transitionBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation, Widget child) {
      return ScaleTransition(scale: animation, child: child);
    },
    ...
  )
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-04f7931b2f8a4a85.gif?imageMogr2/auto-orient/strip)

## showAboutDialog

AboutDialog用於描述當前App資訊，底部提供2個按鈕：檢視許可按鈕和關閉按鈕。AboutDialog需要和showAboutDialog配合使用，用法如下：

```dart
showAboutDialog(
  context: context,
  applicationIcon: Image.asset(
    'images/bird.png',
    height: 100,
    width: 100,
  ),
  applicationName: '應用程式',
  applicationVersion: '1.0.0',
  applicationLegalese: 'copyright 老孟，一枚有態度的程式設計師',
  children: <widget>[
    Container(
      height: 30,
      color: Colors.red,
    ),
    Container(
      height: 30,
      color: Colors.blue,
    ),
    Container(
      height: 30,
      color: Colors.green,
    )
  ],
);
```

效果如下：

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

屬性說明如下：

- `applicationIcon`：應用程式的圖示。
- `applicationName`：應用程式名稱。
- `applicationVersion`：應用程式版本。
- `applicationLegalese`：著作權（copyright）的提示。
- `children`：位置如上圖的紅藍綠色的位置。

所有的屬性都需要手動設定，不是自動獲取的。

下面的2個按鈕根據應用程式支援的語言顯示相應的語言，比如顯示中文方法如下：

1. 在`pubspec.yaml`中配置支援國際化：

```dart
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
```

2. 在MaterialApp中配置當前區域：

```dart
MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],
      locale: Locale('zh'),
      ...
  )
```

此時效果：

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

此時點選檢視許將會呼叫`showLicensePage`,相關效果可以檢視`showLicensePage`。

## showLicensePage

此控制元件基本不會用到，瀏覽一下即可。

LicensePage用於描述當前App許可資訊，LicensePage需要和showLicensePage配合使用，用法如下：

```dart
showLicensePage(
  context: context,
  applicationIcon: Image.asset(
    'images/bird.png',
    height: 100,
    width: 100,
  ),
  applicationName: '應用程式',
  applicationVersion: '1.0.0',
  applicationLegalese: 'copyright 老孟，一枚有態度的程式設計師',
);
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-cfbfac1b36d84be3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

下面的英文我們是無法更改的。

## showBottomSheet

在最近的`Scaffold`父元件上展示一個material風格的bottom sheet，位置同`Scaffold`元件的`bottomSheet`，如果`Scaffold`設定了`bottomSheet`，呼叫showBottomSheet丟擲異常。

基本用法如下：

```dart
showBottomSheet(
    context: context,
    builder: (context) {
      return Container(height: 200, color: Colors.lightBlue);
    });
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-a2fd1e5b578b3176.gif?imageMogr2/auto-orient/strip)

設定其背景顏色、陰影值、形狀：

```dart
showBottomSheet(
    context: context,
    backgroundColor: Colors.lightGreenAccent,
    elevation:20,
    shape: CircleBorder(),
    builder: (context) {
      return Container(height: 200);
    });
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-b8803f4b53029a49.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

通常情況下，我們希望直接從底部彈出，`showModalBottomSheet`提供了直接從底部彈出的功能。

## showModalBottomSheet

從底部彈出，通常和BottomSheet配合使用，用法如下：

```dart
showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return BottomSheet(...);
        });
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-7e5f0e02810328ed.gif?imageMogr2/auto-orient/strip)

設定背景、陰影、形狀：

```dart
showModalBottomSheet(
    context: context,
    backgroundColor: Colors.lightBlue,
    elevation: 10,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
    ...
  )
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-b5438ea6ad7d4ba4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

`isDismissible`:是否可以點選背景關閉。

`isScrollControlled`引數指定是否使用可拖動的可滾動的元件，如果子元件是ListView或者GridView，此引數應該設定為true，設定為true後，最大高度可以佔滿全屏。用法如下：

```dart
showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return ListView.builder(
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('老孟$index'),
          );
        },
        itemExtent: 50,
        itemCount: 50,
      );
    });
```

## showCupertinoModalPopup

showCupertinoModalPopup 展示ios的風格彈出框，通常情況下和CupertinoActionSheet配合使用，用法如下：

```dart
showCupertinoModalPopup(
    context: context,
    builder: (BuildContext context) {
      return CupertinoActionSheet(
        title: Text('提示'),
        message: Text('是否要刪除當前項？'),
        actions: <widget>[
          CupertinoActionSheetAction(
            child: Text('刪除'),
            onPressed: () {},
            isDefaultAction: true,
          ),
          CupertinoActionSheetAction(
            child: Text('暫時不刪'),
            onPressed: () {},
            isDestructiveAction: true,
          ),
        ],
      );
    }
);
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-228cb491f6e7e73e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

`filter`引數可以對彈出框以外的區域做模糊或者矩陣操作，用法如下：

```dart
showCupertinoModalPopup(
    context: context,
    filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
    ...
  )
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-13b6e85fa7fbe419.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

彈出框以外的區域有毛玻璃的效果。

## showMenu

showMenu彈出一個Menu選單，用法如下：

```dart
showMenu(
    context: context,
    position: RelativeRect.fill,
    items: <popupmenuentry>[
      PopupMenuItem(child: Text('語文')),
      PopupMenuDivider(),
      CheckedPopupMenuItem(
        child: Text('數學'),
        checked: true,
      ),
      PopupMenuDivider(),
      PopupMenuItem(child: Text('英語')),
    ]);
```

`position`參數列示彈出的位置，效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-5b076fd73981424e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

彈出的位置在螢幕的左上角，我們希望彈出的位置在點選按鈕的位置，因此需要計算按鈕的位置，計算如下：

```dart
final RenderBox button = context.findRenderObject();
final RenderBox overlay = Overlay.of(context).context.findRenderObject();
final RelativeRect position = RelativeRect.fromRect(
  Rect.fromPoints(
    button.localToGlobal(Offset(0, 0), ancestor: overlay),
    button.localToGlobal(button.size.bottomRight(Offset.zero),
        ancestor: overlay),
  ),
  Offset.zero & overlay.size,
);
```

你需要將按鈕單獨封裝為StatefulWidget元件，否則context代表的就不是按鈕元件。

## showSearch

showSearch 是直接跳轉到搜尋頁面，用法如下：

```dart
showSearch(context: context, delegate: CustomSearchDelegate());

class CustomSearchDelegate extends SearchDelegate<string>{
  @override
  List<widget> buildActions(BuildContext context) {
    return null;
  }

@override
  Widget buildLeading(BuildContext context) {
    return null;
  }

@override
  Widget buildResults(BuildContext context) {
    return null;
  }

@override
  Widget buildSuggestions(BuildContext context) {
    return null;
  }

}
```

使用showSearch，首先需要重寫一個SearchDelegate，實現其中的4個方法。

`buildLeading`表示構建搜尋框前面的控制元件，一般是一個返回按鈕，點選退出，程式碼如下：

```dart
@override
Widget buildLeading(BuildContext context) {
  return IconButton(
    icon: Icon(Icons.arrow_back,color: Colors.blue,),
    onPressed: (){
      close(context, '');
    },
  );
}
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-6694a705f96368d8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

`buildSuggestions`是使用者正在輸入時顯示的控制元件，輸入框放生變化時回撥此方法，通常返回一個ListView，點選其中一項時，將當前項的內容填充到輸入框，用法如下：

```dart
@override
Widget buildSuggestions(BuildContext context) {
  return ListView.separated(
    itemBuilder: (context, index) {
      return ListTile(
        title: Text('老孟 $index'),
        onTap: () {
          query = '老孟 $index';
        },
      );
    },
    separatorBuilder: (context, index) {
      return Divider();
    },
    itemCount: Random().nextInt(5),
  );
}
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-63588fd84d015958.gif?imageMogr2/auto-orient/strip)

`buildActions`輸入框後面的控制元件，一般情況下，輸入框不為空，顯示一個清空按鈕，點選清空輸入框：

```dart
@override
List<widget> buildActions(BuildContext context) {
  return [
    IconButton(
      icon: Icon(
        Icons.clear,
      ),
      onPressed: () {
        query = '';
      },
    )
  ];
}
```

`buildResults`是構建搜尋結果控制元件，當使用者點選軟鍵盤上的“Search”時回撥此方法，一般返回ListView，用法如下：

```dart
@override
Widget buildResults(BuildContext context) {
  return ListView.separated(
    itemBuilder: (context, index) {
      return Container(
        height: 60,
        alignment: Alignment.center,
        child: Text(
          '$index',
          style: TextStyle(fontSize: 20),
        ),
      );
    },
    separatorBuilder: (context, index) {
      return Divider();
    },
    itemCount: 10,
  );
}
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-a2ae4cb9a5c69645.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

歡迎加入Flutter的微信交流群(<font color="red">laomengit</font>)，一起學習，一起進步，生活不止眼前的苟且，還有詩和《遠方》。

當然我也非常希望您關注我個人的公眾號，裡面有各種福利等著大家哦。

![](https://upload-images.jianshu.io/upload_images/20353030-9462936ebcbd6fb1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</widget></widget></string></popupmenuentry></widget></widget></double></double></double></double>

你知道嗎，Flutter內建了10多種show

相關文章