showDialogshowDialog 用于弹出Material风格对话框,基本用法如下: showDialog( context: context, builder: (context) { return AlertDialog( ... ); } ); 效果如下:
Navigator.of(context, rootNavigator: true).pop(result) 而不是 Navigator.pop(context, result)
showCupertinoDialogshowCupertinoDialog 用于弹出ios风格对话框,基本用法如下: showCupertinoDialog( context: context, builder: (context) { return CupertinoAlertDialog( ... ); }); 效果如下:
showGeneralDialog如果上面2种提示框不满足你的需求,还可以使用showGeneralDialog自定义提示框,事实上,showDialog和showCupertinoDialog也是通过showGeneralDialog实现的,基本用法如下: 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, ), ); }); 效果如下: 加上背景颜色: showGeneralDialog( context: context, barrierColor: Colors.black.withOpacity(.5), ... ) 效果如下:
showGeneralDialog( transitionBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) { return ScaleTransition(scale: animation, child: child); }, ... ) 效果如下: showAboutDialogAboutDialog用于描述当前App信息,底部提供2个按钮:查看许可按钮和关闭按钮。AboutDialog需要和showAboutDialog配合使用,用法如下: 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, ) ], ); 效果如下: 属性说明如下:
所有的属性都需要手动设置,不是自动获取的。 下面的2个按钮根据应用程序支持的语言显示相应的语言,比如显示中文方法如下:
dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter
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.asset( 'images/bird.png', height: 100, width: 100, ), applicationName: '应用程序', applicationVersion: '1.0.0', applicationLegalese: 'copyright 老孟,一枚有态度的程序员', ); 效果如下: 下面的英文我们是无法更改的。 showBottomSheet在最近的 基本用法如下: showBottomSheet( context: context, builder: (context) { return Container(height: 200, color: Colors.lightBlue); }); 效果如下: 设置其背景颜色、阴影值、形状: showBottomSheet( context: context, backgroundColor: Colors.lightGreenAccent, elevation:20, shape: CircleBorder(), builder: (context) { return Container(height: 200); }); 效果如下: 通常情况下,我们希望直接从底部弹出, showModalBottomSheet从底部弹出,通常和BottomSheet配合使用,用法如下: showModalBottomSheet( context: context, builder: (BuildContext context) { return BottomSheet(...); }); 效果如下: 设置背景、阴影、形状: showModalBottomSheet( context: context, backgroundColor: Colors.lightBlue, elevation: 10, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)), ... ) 效果如下:
showModalBottomSheet( context: context, isScrollControlled: true, builder: (BuildContext context) { return ListView.builder( itemBuilder: (context, index) { return ListTile( title: Text('老孟$index'), ); }, itemExtent: 50, itemCount: 50, ); }); showCupertinoModalPopupshowCupertinoModalPopup 展示ios的风格弹出框,通常情况下和CupertinoActionSheet配合使用,用法如下: 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, ), ], ); } ); 效果如下:
showCupertinoModalPopup( context: context, filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0), ... ) 效果如下: 弹出框以外的区域有毛玻璃的效果。 showMenushowMenu弹出一个Menu菜单,用法如下: showMenu( context: context, position: RelativeRect.fill, items: <PopupMenuEntry>[ PopupMenuItem(child: Text('语文')), PopupMenuDivider(), CheckedPopupMenuItem( child: Text('数学'), checked: true, ), PopupMenuDivider(), PopupMenuItem(child: Text('英语')), ]);
弹出的位置在屏幕的左上角,我们希望弹出的位置在点击按钮的位置,因此需要计算按钮的位置,计算如下: 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代表的就不是按钮组件。 showSearchshowSearch 是直接跳转到搜索页面,用法如下: 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个方法。
@override Widget buildLeading(BuildContext context) { return IconButton( icon: Icon(Icons.arrow_back,color: Colors.blue,), onPressed: (){ close(context, ''); }, ); } 效果如下:
@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), ); } 效果如下:
@override List<Widget> buildActions(BuildContext context) { return [ IconButton( icon: Icon( Icons.clear, ), onPressed: () { query = ''; }, ) ]; }
@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, ); } 效果如下: 欢迎加入Flutter的微信交流群(laomengit),一起学习,一起进步,生活不止眼前的苟且,还有诗和《远方》。 当然我也非常希望您关注我个人的公众号,里面有各种福利等着大家哦。 |
|