當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

18、 Flutter Widgets 之内置各种show

發布時間：2024/1/1 编程问答 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 18、 Flutter Widgets 之内置各种show 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

flutter內置了各種類型的show彈框，可以增加開發效率。以下是每種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('確認')),],);})

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

useRootNavigator參數用于確定是否將對話框推送到給定“context”最遠或最接近的Navigator。默認情況下，useRootNavigator為“true”，被推送到根Navigator。如果應用程序有多個Navigator，關閉對話框需要使用

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

barrierDismissible參數確認點擊提示框外部區域時是否彈出提示框，默認true。?

showCupertinoDialog

showCupertinoDialog 用于彈出ios風格對話框，基本用法如下：

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('確認')),],);});

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

showGeneralDialog

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

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:是否可以點擊背景關閉。

barrierColor：背景顏色

transitionDuration：動畫時長，

transitionBuilder是構建進出動畫，默認動畫是漸隱漸顯，構建縮放動畫代碼如下：

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

showAboutDialog

AboutDialog用于描述當前App信息，底部提供2個按鈕：查看許可按鈕和關閉按鈕。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月成立于北京，隸屬于北京智閱網絡科技有限公司。專注于移動互聯的汽車類垂直內容資訊網站，結合智能搜索、興趣推薦、內容聚合等技術，為用戶打造和提供全面、準確汽車資訊的內容平臺。'),),Container(height: 300,child: Text('汽車頭條APP，你的汽車移動資訊站。專注于移動端的專業汽車傳播平臺；能夠迅速掌握你的閱讀興趣點，提供真正有價值的汽車資訊；我們以汽車愛好者、汽車消費者和汽車從業者為核心用戶，通過新車、行業、科技幾大板塊，傳遞你所關心的汽車資訊。我們的使命是，重塑汽車移動傳播鏈條，打造精準汽車資訊站點，滿足用戶在移動互聯網時代悅讀車聞以及參與車聞創作的需求。 [1] '),),],)

屬性說明如下：

applicationIcon：應用程序的圖標。
applicationName：應用程序名稱。
applicationVersion：應用程序版本。
applicationLegalese：著作權（copyright）的提示。
children：位置如上圖的yellowContainer的位置。

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

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

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

dependencies:flutter:sdk: flutterflutter_localizations:sdk: flutter

在MaterialApp中配置當前區域：

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

showLicensePage

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

LicensePage用于描述當前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: '測試數據名稱',applicationVersion: 'V 1.1.1',applicationLegalese: 'copyright 汽車資訊第一站',)

showBottomSheet

在最近的Scaffold父組件上展示一個material風格的bottom sheet，位置同Scaffold組件的bottomSheet，如果Scaffold設置了bottomSheet，調用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('點擊'),),);});});

?設置背景、陰影、形狀：

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

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

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

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

showCupertinoModalPopup

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

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

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

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

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

showMenu

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

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

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

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

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，實現其中的4個方法。

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

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

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

@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是用戶正在輸入時顯示的控件，輸入框放生變化時回調此方法，通常返回一個ListView，點擊其中一項時，將當前項的內容填充到輸入框，用法如上：