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

编程问答

18、 Flutter Widgets 之内置各种show

发布时间：2024/1/1 编程问答 68 豆豆

生活随笔收集整理的这篇文章主要介绍了 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，点击其中一项时，将当前项的内容填充到输入框，用法如上：