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: flutter flutter_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>{
@override
List<Widget> buildActions(BuildContext context) {
return [
IconButton(
icon: Icon(
Icons.clear,
),
onPressed: () {
query = '';
},
)
];
}
@override
Widget buildLeading(BuildContext context) {
return IconButton(
icon: Icon(Icons.arrow_back,color: Colors.blue,),
onPressed: (){
close(context, '');
},
);
}
@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,
);
}
@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),
);
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,点击其中一项时,将当前项的内容填充到输入框,用法如下:
@override
Widget 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
输入框后面的控件,一般情况下,输入框不为空,显示一个清空按钮,点击清空输入框:
@override
List<Widget> buildActions(BuildContext context) {
return [
IconButton(
icon: Icon(
Icons.clear,
),
onPressed: () {
query = '';
},
)
];
}
buildSuggestions
是用户正在输入时显示的控件,输入框放生变化时回调此方法,通常返回一个ListView,点击其中一项时,将当前项的内容填充到输入框,用法如上:
buildActions
输入框后面的控件,一般情况下,输入框不为空,显示一个清空按钮,点击清空输入框:
buildResults
是构建搜索结果控件,当用户点击软键盘上的“Search”时回调此方法,一般返回ListView,用法如上:
测试demo源码git地址:flutter_demo: flutter组件测试学习demo