16、 Flutter Widgets 之内置各种show，showBottomSheet,showMenu...

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情

概述

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('确认')),
        ],
      );
    })

运行效果：

图片.png

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('确认')),
     ],
     );
   });

运行效果：

图片.png

builder通常返回CupertinoDialog或者CupertinoAlertDialog。actions中使用CupertinoButton才能还原iOSUI弹框风格。

showGeneralDialog

如果上面2种提示框不满足你的需求，还可以使用showGeneralDialog自定义提示框，事实上，showDialog和showCupertinoDialog也是通过showGeneralDialog实现的，构造函数“

Future<T?> showGeneralDialog<T extends Object?>({
  required BuildContext context,
  required RoutePageBuilder pageBuilder,
  bool barrierDismissible = false,
  String? barrierLabel,
  Color barrierColor = const Color(0x80000000),
  Duration transitionDuration = const Duration(milliseconds: 200),
  RouteTransitionsBuilder? transitionBuilder,
  bool useRootNavigator = true,
  RouteSettings? routeSettings,
})

参数说明：图片.png

基本用法如下：

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

运行效果：

图片.png

添加背景颜色

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

图片.png 动画：

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

图片.png

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]  '),),
 
      ],
    )

运行效果：

图片.png

属性说明如下：

applicationIcon：应用程序的图标。

applicationName：应用程序名称。

applicationVersion：应用程序版本。

applicationLegalese：著作权（copyright）的提示。

children：位置如上图的yellowContainer的位置。

下面的2个按钮根据应用程序支持的语言显示相应的语言，比如显示中文方法如下：

1、在pubspec.yaml中配置支持国际化：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

2、在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 汽车资讯第一站',
 
    )

图片.png

showBottomSheet

在最近的Scaffold父组件上展示一个material风格的bottom sheet，位置同Scaffold组件的bottomSheet，如果Scaffold设置了bottomSheet，调用showBottomSheet抛出异常。

图片.png

通常情况下，我们希望直接从底部弹出，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('点击'),),
            
            );
          });
        });

图片.png

设置背景、阴影、形状：

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

图片.png 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,
          );
        });

图片.png

showCupertinoModalPopup

showCupertinoModalPopup 展示ios的风格弹出框，通常情况下和CupertinoActionSheet配合使用，用法如下：

showCupertinoModalPopup(
    context: context,
    builder: (context){
      return CupertinoActionSheet(
        title: Text('提示'),
        message: Text('是否删除当前选项'),
        actions: [
          CupertinoActionSheetAction(onPressed: (){}, child: Text('删除')),
          CupertinoActionSheetAction(onPressed: (){}, child: Text('暂时不删')),
        ],
      );
    });

运行效果：

图片.png

filter参数可以对弹出框以外的区域做模糊或者矩阵操作，用法如下：

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

图片.png

弹出框以外的区域有毛玻璃的效果。

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('体育')),
 
 
 
 
        ]
    );

图片.png

弹出的位置在屏幕的左上角，我们希望弹出的位置在点击按钮的位置，固定设置位置：

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,
    );
  }
}

图片.png

使用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，用法如上：

图片.png

总结：

本篇主要介绍了 showDialog， showCupertinoDialog， showGeneralDialog， showAboutDialog， showLicensePage， showBottomSheet， showModalBottomSheet， showCupertinoModalPopup， showMenu， showSearch，等弹出视图的基本使用和效果。

git代码地址

16、 Flutter Widgets 之 内置各种show，showBottomSheet,showMenu...

概述

showDialog

showCupertinoDialog

showGeneralDialog

showAboutDialog

showLicensePage

showBottomSheet

showModalBottomSheet

showCupertinoModalPopup

showMenu

showSearch

总结：

16、 Flutter Widgets 之内置各种show，showBottomSheet,showMenu...