Flutter 底部弹窗ModelBottomSheet的使用示例

 更新时间:2021年06月07日 11:51:35   作者:岛上码农  
在实际开发过程中,经常会用到底部弹窗来进行快捷操作,例如选择一个选项,选择下一步操作等等。在 Flutter 中提供了一个 showModelBottomSheet 方法用于弹出底部弹窗,本篇介绍如何使用底部弹窗。

实现效果

最终实现效果如图片所示,分布演示了基础的,全屏的和自定义的底部弹窗形式。

代码结构

在消息页面 message.dart 中,使用 Column 组件构建了三个按钮,点击每个按钮调用不同的底部弹窗显示。这部分代码不展示,核心注意的方式是按钮的 onPressed 响应方法,需要使用 async 修饰,这是因为 ModalBottomSheet 的返回结果是一个 Future 对象,需要通过 await 来获取返回结果。

onPressed: () async {
  int selectedIndex = await _showCustomModalBottomSheet(context, _options);
  print("自定义底部弹层:选中了第$selectedIndex个选项");
},
//...

基本使用

基本使用对于全屏和默认只差一个参数,演示代码中,我们使用了一组模拟的数据构建选项数据,然后再传给显示底部弹窗的方法,实际这组数据大部分是从后台获取的。当 isScrollControlled 是 true 时,则是全屏弹窗,默认是 false。

Future<int> _showBasicModalBottomSheet(context, List<String> options) async {
    return showModalBottomSheet<int>(
      isScrollControlled: false,
      context: context,
      builder: (BuildContext context) {
        return ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
                title: Text(options[index]),
                onTap: () {
                  Navigator.of(context).pop(index);
                });
          },
          itemCount: options.length,
        );
      },
    );
  }

需要注意的有四点:

  • 弹窗需要上下文的 context,这是因为实际页面展示是通过 Navigator 的 push 方法导航的新的页面完成的。
  • 弹窗的组件构建的 builder 方法,这里可以返回自己自定义的组件,后面的自定义组件就是在这里做文章。
  • 在列表的元素的选中点击事件 onTap 方法中,需要使用 Navigator的 pop 方法返回上一个页面,这里可以携带选中的下标(或其他值)返回,上一个页面可以使用 await 的方式接收对应返回的结果。
  • 点击蒙层也可以消失,这时候实际调用的方法是 Navigator.of(context).pop()。因为没有携带参数,所以接收的结果是 null,需要特殊处理一下。

自定义底部弹窗

在自定义底部弹窗中,我们做了如下自定义项:

  • 弹窗的高度指定为屏幕高度的一半,这可以通过自定义组件的 Container 高度实现。
  • 增加了标题栏,且标题栏有关闭按钮:标题在整个标题栏是居中的,而关闭按钮是在标题栏右侧顶部。这可以通过 Stack 堆栈布局组件实现不同的组件层叠及位置。
  • 左上角和右上角做了圆角处理,这个可以通过 Container 的装饰完成,但需要注意的是,由于底部弹窗默认是有颜色的,因此要显示出圆角需要将底部弹窗的颜色设置为透明。

自定义弹窗的代码如下所示:

Future<int> _showCustomModalBottomSheet(context, List<String> options) async {
  return showModalBottomSheet<int>(
    backgroundColor: Colors.transparent,
    isScrollControlled: true,
    context: context,
    builder: (BuildContext context) {
      return Container(
        clipBehavior: Clip.antiAlias,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: const Radius.circular(20.0),
            topRight: const Radius.circular(20.0),
          ),
        ),
        height: MediaQuery.of(context).size.height / 2.0,
        child: Column(children: [
          SizedBox(
            height: 50,
            child: Stack(
              textDirection: TextDirection.rtl,
              children: [
                Center(
                  child: Text(
                    '底部弹窗',
                    style: TextStyle(
                        fontWeight: FontWeight.bold, fontSize: 16.0),
                  ),
                ),
                IconButton(
                    icon: Icon(Icons.close),
                    onPressed: () {
                      Navigator.of(context).pop();
                    }),
              ],
            ),
          ),
          Divider(height: 1.0),
          Expanded(
            child: ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                    title: Text(options[index]),
                    onTap: () {
                      Navigator.of(context).pop(index);
                    });
              },
              itemCount: options.length,
            ),
          ),
        ]),
      );
    },
  );
}

这里有几个额外需要注意的点:

  • 获取屏幕的尺寸可以使用MediaQuery.of(context).size属性完成。
  • Stack 组件根据子元素的次序依次堆叠,最后面的在最顶层。textDirection 用于排布起始位置。
  • 由于 Column 下面嵌套了一个 ListView,因此需要使用 Expanded 将 ListView 包裹起来,以便有足够的空间供 ListView 的内容区滚动,否则会报布局溢出警告。

总结

本篇介绍了三种 ModalBottomSheet 的方式, 可以看到 ModalBottomSheet 非常灵活。实际开发过程中,还可以根据需要,利用 ModalBottomSheet的 builder 方法返回不同的组件进而定制自己的底部弹层组件,能够满足绝大多数场景。同时,借 ModalBottomSheet 的启发,我们自己也可以使用 Navigator方法来实现其他形式的弹层,例如从底部弹出登录页,登录后再返回原页面。

以上就是Flutter 底部弹窗ModelBottomSheet的使用示例的详细内容,更多关于Flutter 底部弹窗ModelBottomSheet的资料请关注脚本之家其它相关文章!

相关文章

  • Android和PC端通过局域网文件同步

    Android和PC端通过局域网文件同步

    这篇文章主要为大家详细介绍了Android和PC端通过局域网文件同步的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • Android在代码中设置沉浸式布局的方法

    Android在代码中设置沉浸式布局的方法

    这篇文章主要介绍了Android在代码中设置沉浸式布局的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • Android 中RecyclerView多种item布局的写法(头布局+脚布局)

    Android 中RecyclerView多种item布局的写法(头布局+脚布局)

    这篇文章主要介绍了Android 中RecyclerView多种item布局的写法(头布局+脚布局)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-01-01
  • Android TreeView实现带复选框树形组织结构

    Android TreeView实现带复选框树形组织结构

    这篇文章主要为大家详细介绍了Android TreeView实现带复选框树形组织结构,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • Android入门教程之RecyclerView的具体使用详解

    Android入门教程之RecyclerView的具体使用详解

    RecyclerView是Android一个更强大的控件,其不仅可以实现和ListView同样的效果,还有优化了ListView中的各种不足。其可以实现数据纵向滚动,也可以实现横向滚动(ListView做不到横向滚动)。接下来讲解RecyclerView的用法
    2021-10-10
  • 详解JS与APP原生控件交互

    详解JS与APP原生控件交互

    本文主要分享了JavaScript与Android、IOS原生控件之间相互通信的详细代码实现,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 结合Windows窗口深入分析Android窗口的实现

    结合Windows窗口深入分析Android窗口的实现

    在Android中,窗口是一个基本的图形用户界面元素,它提供了一个屏幕区域来放置应用程序的用户界面元素。窗口可以是全屏的,也可以是一个小的对话框。每个窗口都有一个特定的主题和样式,可以根据应用程序的需求进行自定义
    2023-04-04
  • Android系统状态栏定制图标显示逻辑控制

    Android系统状态栏定制图标显示逻辑控制

    这篇文章主要为大家介绍了Android系统状态栏定制图标显示逻辑控制,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • android接收到蓝牙配对请求时如何点亮屏幕具体实现

    android接收到蓝牙配对请求时如何点亮屏幕具体实现

    android 在接收到蓝牙配对请求时如何自动点亮屏幕配对过程中很实用,具体的实现思路及代码如下,感兴趣的朋友可以参考下哈
    2013-06-06
  • Android AMS启动详解

    Android AMS启动详解

    这篇文章主要介绍了Android AMS启动的相关资料,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下
    2021-03-03

最新评论