flutter內(nèi)置了各種類型的show彈框，可以增加開發(fā)效率。以下是每種show的基本用法。

showDialog

---

showDialog(context: context, builder: (context){return AlertDialog(title: Text('溫馨提示'),content: Text('確定要刪除嗎？'),actions: [ElevatedButton(onPressed: (){Navigator.of(context).pop(false);}, child: Text('取消')),ElevatedButton(onPressed: (){Navigator.of(context).pop(true);}, child: Text('確認(rèn)')),],);})

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

useRootNavigator參數(shù)用于確定是否將對話框推送到給定“context”最遠(yuǎn)或最接近的Navigator。默認(rèn)情況下，useRootNavigator為“true”，被推送到根Navigator。如果應(yīng)用程序有多個Navigator，關(guān)閉對話框需要使用

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

barrierDismissible參數(shù)確認(rèn)點擊提示框外部區(qū)域時是否彈出提示框，默認(rèn)true。?

showCupertinoDialog

---

showCupertinoDialog 用于彈出ios風(fēng)格對話框，基本用法如下：

showCupertinoDialog(context: context, builder: (context){return CupertinoAlertDialog(title: Text('溫馨提示'),content: Text('確定要刪除嗎？'),actions: [CupertinoButton(onPressed: (){Navigator.of(context).pop(false);}, child: Text('取消')),CupertinoButton(onPressed: (){Navigator.of(context).pop(true);}, child: Text('確認(rèn)')),],);});

?builder通常返回CupertinoDialog或者CupertinoAlertDialog。actions中使用CupertinoButton才能還原iOSUI彈框風(fēng)格。

showGeneralDialog

---

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

showGeneralDialog(context: context,pageBuilder: (BuildContext context,Animation<double> animation,Animation<double>secondaryAnimation){return Center(child: Container(height: 250,width: 200,color: Colors.lightBlueAccent,),);});

?添加背景顏色：

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

barrierDismissible:是否可以點擊背景關(guān)閉。

barrierColor：背景顏色

transitionDuration：動畫時長，

transitionBuilder是構(gòu)建進(jìn)出動畫，默認(rèn)動畫是漸隱漸顯，構(gòu)建縮放動畫代碼如下：

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

showAboutDialog

---

AboutDialog用于描述當(dāng)前App信息，底部提供2個按鈕：查看許可按鈕和關(guān)閉按鈕。AboutDialog需要和showAboutDialog配合使用，用法如下：

showAboutDialog(context: context,applicationIcon: Image.network('https://img0.baidu.com/it/u=3335395408,3367072408&fm=26&fmt=auto',height: 100,width: 100,),applicationName: '汽車頭條',applicationVersion: '9.1.5',applicationLegalese: 'copyright 汽車資訊第一站',children: [Container(height: 200,color: Colors.yellow,child: Text('汽車頭條于2014年4月成立于北京，隸屬于北京智閱網(wǎng)絡(luò)科技有限公司。專注于移動互聯(lián)的汽車類垂直內(nèi)容資訊網(wǎng)站，結(jié)合智能搜索、興趣推薦、內(nèi)容聚合等技術(shù)，為用戶打造和提供全面、準(zhǔn)確汽車資訊的內(nèi)容平臺。'),),Container(height: 300,child: Text('汽車頭條APP，你的汽車移動資訊站。專注于移動端的專業(yè)汽車傳播平臺；能夠迅速掌握你的閱讀興趣點，提供真正有價值的汽車資訊；我們以汽車愛好者、汽車消費者和汽車從業(yè)者為核心用戶，通過新車、行業(yè)、科技幾大板塊，傳遞你所關(guān)心的汽車資訊。我們的使命是，重塑汽車移動傳播鏈條，打造精準(zhǔn)汽車資訊站點，滿足用戶在移動互聯(lián)網(wǎng)時代悅讀車聞以及參與車聞創(chuàng)作的需求。 [1] '),),],)

?

屬性說明如下：

• applicationIcon：應(yīng)用程序的圖標(biāo)。

• applicationName：應(yīng)用程序名稱。

• applicationVersion：應(yīng)用程序版本。

• applicationLegalese：著作權(quán)（copyright）的提示。

• children：位置如上圖的yellowContainer的位置。

所有的屬性都需要手動設(shè)置，不是自動獲取的。

下面的2個按鈕根據(jù)應(yīng)用程序支持的語言顯示相應(yīng)的語言，比如顯示中文方法如下：

在pubspec.yaml中配置支持國際化：

dependencies:flutter:sdk: flutterflutter_localizations:sdk: flutter

在MaterialApp中配置當(dāng)前區(qū)域：

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

showLicensePage

---

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

LicensePage用于描述當(dāng)前App許可信息，LicensePage需要和showLicensePage配合使用，用法如下：

showLicensePage(context: context,applicationIcon: Image.network('https://img0.baidu.com/it/u=3335395408,3367072408&fm=26&fmt=auto',height: 100,width: 100,),applicationName: '測試數(shù)據(jù)名稱',applicationVersion: 'V 1.1.1',applicationLegalese: 'copyright 汽車資訊第一站',)

showBottomSheet

---

在最近的Scaffold父組件上展示一個material風(fēng)格的bottom sheet，位置同Scaffold組件的bottomSheet，如果Scaffold設(shè)置了bottomSheet，調(diào)用showBottomSheet拋出異常。

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

showModalBottomSheet

---

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

showModalBottomSheet(context: context,builder: (BuildContext context){return BottomSheet(onClosing: _onClosing, builder: (BuildContext context){return Container(height: 500,color: Colors.red,child: ElevatedButton(onPressed: (){},child: Text('點擊'),),);});});

?設(shè)置背景、陰影、形狀：

showModalBottomSheet(context: context,barrierColor: Colors.lightGreenAccent,elevation: 10,shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),...)

?

isDismissible:是否可以點擊背景關(guān)閉。

isScrollControlled參數(shù)指定是否使用可拖動的可滾動的組件，如果子組件是ListView或者GridView，此參數(shù)應(yīng)該設(shè)置為true，設(shè)置為true后，最大高度可以占滿全屏。用法如下：

showModalBottomSheet(context: context,isScrollControlled: true,builder: (BuildContext context) {return ListView.builder(itemBuilder: (context, index) {return ListTile(title: Center(child: Text('是否可以點擊背景關(guān)閉$index'),),);},itemExtent: 50,itemCount: 50,);});

showCupertinoModalPopup

---

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

showCupertinoModalPopup(context: context,builder: (context){return CupertinoActionSheet(title: Text('提示'),message: Text('是否刪除當(dāng)前選項'),actions: [CupertinoActionSheetAction(onPressed: (){}, child: Text('刪除')),CupertinoActionSheetAction(onPressed: (){}, child: Text('暫時不刪')),],);});

filter參數(shù)可以對彈出框以外的區(qū)域做模糊或者矩陣操作，用法如下：

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

?

彈出框以外的區(qū)域有毛玻璃的效果。?

showMenu

---

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

showMenu(context: context,position: RelativeRect.fill,items: <PopupMenuEntry>[PopupMenuItem(child: Text('語文'),onTap: (){print('語文');},),PopupMenuDivider(),CheckedPopupMenuItem(checked: true,child: Text('數(shù)學(xué)'),),PopupMenuDivider(),PopupMenuItem(child: Text('政治')),PopupMenuDivider(),PopupMenuItem(child: Text('英語')),PopupMenuDivider(),PopupMenuItem(child: Text('體育')),]);

?彈出的位置在屏幕的左上角，我們希望彈出的位置在點擊按鈕的位置，固定設(shè)置位置：

position: RelativeRect.fromLTRB(100.0, 200.0, 100.0, 100.0),

如需要計算按鈕的位置，計算如下：

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 是直接跳轉(zhuǎn)到搜索頁面，用法如下：

showSearch(context: context, delegate: CustomSearchDelegate());class CustomSearchDelegate extends SearchDelegate<String>{@overrideList<Widget> buildActions(BuildContext context) {return [IconButton(icon: Icon(Icons.clear,),onPressed: () {query = '';},)];}@overrideWidget buildLeading(BuildContext context) {return IconButton(icon: Icon(Icons.arrow_back,color: Colors.blue,),onPressed: (){close(context, '');},);}@overrideWidget 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,);}@overrideWidget 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),);return Container(height: 200,color: Colors.lightGreen,);}}

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

buildLeading表示構(gòu)建搜索框前面的控件，一般是一個返回按鈕，點擊退出，代碼如下：

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

buildSuggestions是用戶正在輸入時顯示的控件，輸入框放生變化時回調(diào)此方法，通常返回一個ListView，點擊其中一項時，將當(dāng)前項的內(nèi)容填充到輸入框，用法如下：

@overrideWidget buildSuggestions(BuildContext context) {return ListView(children: List.generate(20, (index){return Container(height: 44,color: Colors.black.withOpacity(0.5),child: Text('buildSuggestions$index',style: TextStyle(fontSize: 20),),);}),);return Container(height: 200,color: Colors.lightGreen,);}

buildActions輸入框后面的控件，一般情況下，輸入框不為空，顯示一個清空按鈕，點擊清空輸入框：

@overrideList<Widget> buildActions(BuildContext context) {return [IconButton(icon: Icon(Icons.clear,),onPressed: () {query = '';},)];}

buildSuggestions是用戶正在輸入時顯示的控件，輸入框放生變化時回調(diào)此方法，通常返回一個ListView，點擊其中一項時，將當(dāng)前項的內(nèi)容填充到輸入框，用法如上：

buildActions輸入框后面的控件，一般情況下，輸入框不為空，顯示一個清空按鈕，點擊清空輸入框：

buildResults是構(gòu)建搜索結(jié)果控件，當(dāng)用戶點擊軟鍵盤上的“Search”時回調(diào)此方法，一般返回ListView，用法如上：

測試demo源碼git地址：flutter_demo: flutter組件測試學(xué)習(xí)demo

總結(jié)

以上是生活随笔為你收集整理的18、 Flutter Widgets 之 内置各种show的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。