iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Flutter实现底部弹窗效果
  • 613
分享到

Flutter实现底部弹窗效果

2024-04-02 19:04:59 613人浏览 八月长安
摘要

目录实现效果代码结构基本使用自定义底部弹窗总结在实际开发过程中,经常会用到底部弹窗来进行快捷操作,例如选择一个选项,选择下一步操作等等。在 Flutter 中提供了一个 showMo

在实际开发过程中,经常会用到底部弹窗来进行快捷操作,例如选择一个选项,选择下一步操作等等。在 Flutter 中提供了一个 showModelBottomSheet 方法用于弹出底部弹窗,本篇介绍如何使用底部弹窗。

实现效果

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

BottomModelSheet.gif

代码结构

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


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

基本使用

基本使用对于全屏和默认只差一个参数,演示代码中,我们使用了一组模拟的数据构建选项数据,然后再传给显示底部弹窗的方法,实际这组数据大部分是从后台获取的。当 isScrollControlledtrue 时,则是全屏弹窗,默认是 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,这是因为实际页面展示是通过 Navigatorpush 方法导航的新的页面完成的。
  • 弹窗的组件构建的 builder 方法,这里可以返回自己自定义的组件,后面的自定义组件就是在这里做文章。
  • 在列表的元素的选中点击事件 onTap 方法中,需要使用 Navigatorpop 方法返回上一个页面,这里可以携带选中的下标(或其他值)返回,上一个页面可以使用 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,因此需要使用 ExpandedListView 包裹起来,以便有足够的空间供 ListView 的内容区滚动,否则会报布局溢出警告。

总结

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

以上所述是小编给大家介绍的Flutter实现底部弹窗效果,希望对大家有所帮助。在此也非常感谢大家对编程网网站的支持!

--结束END--

本文标题: Flutter实现底部弹窗效果

本文链接: https://www.lsjlt.com/news/158781.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Flutter实现底部弹窗效果
    目录实现效果代码结构基本使用自定义底部弹窗总结在实际开发过程中,经常会用到底部弹窗来进行快捷操作,例如选择一个选项,选择下一步操作等等。在 Flutter 中提供了一个 showMo...
    99+
    2024-04-02
  • Android实现底部弹窗效果
    本文实例为大家分享了Android实现底部弹窗效果的具体代码,供大家参考,具体内容如下源代码地址:https://github.com/luoye123/Box东西很简单,我就直接亮代码了: activity_main.xml<...
    99+
    2023-05-31
    android 弹窗 roi
  • flutter实现底部抽屉效果
    本文实例为大家分享了flutter实现底部抽屉效果的具体代码,供大家参考,具体内容如下 安卓:showModalBottomSheetIOS:showCupertinoModalPo...
    99+
    2024-04-02
  • Flutter 底部弹窗如何实现多项选择
    目录多选和单选的不同之处 实现方式 界面变更 代码实现 总结 多选和单选的不同之处 单选的时候,选中一个就可以直接把结果返回,因此本身底部弹窗无需状态管理。但到多选的时候,需要知...
    99+
    2024-04-02
  • Flutter底部弹窗ModelBottomSheet怎么用
    这篇文章给大家分享的是有关Flutter底部弹窗ModelBottomSheet怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。实现效果最终实现效果如图片所示,分布演示了基础的,全屏的和自定义的底部弹窗形式。...
    99+
    2023-06-15
  • flutter如何实现底部抽屉效果
    小编给大家分享一下flutter如何实现底部抽屉效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下安卓:showModalBottomSheetIOS...
    99+
    2023-06-29
  • Flutter 底部弹窗ModelBottomSheet的使用示例
    目录实现效果 代码结构 基本使用 自定义底部弹窗 总结 实现效果 最终实现效果如图片所示,分布演示了基础的,全屏的和自定义的底部弹窗形式。 代码结构 在消息页面 message...
    99+
    2024-04-02
  • vue实现底部弹窗多选
    本文实例为大家分享了vue实现底部弹窗多选的具体代码,供大家参考,具体内容如下 代码: <template> <div class="release-...
    99+
    2024-04-02
  • flutter底部弹出BottomSheet怎么实现
    本篇内容介绍了“flutter底部弹出BottomSheet怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果图:ModalBott...
    99+
    2023-06-29
  • Flutter自定义弹窗Dialog效果
    本文实例为大家分享了Flutter自定义弹窗Dialog效果的具体代码,供大家参考,具体内容如下 主要是基于系统的dialog机制做一些使用限制和自定义UI的优化 核心代码: cl...
    99+
    2024-04-02
  • jQuery如何实现弹窗下底部页面禁止滑动效果
    小编给大家分享一下jQuery如何实现弹窗下底部页面禁止滑动效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在项目开发过程中,...
    99+
    2024-04-02
  • react实现Modal弹窗效果
    本文实例为大家分享了react实现Modal弹窗效果的具体代码,供大家参考,具体内容如下 一、Dialog.js文件 import React, {useMemo, useEffec...
    99+
    2024-04-02
  • jQuery中msgTips如何实现顶部弹窗效果
    这篇文章主要介绍了jQuery中msgTips如何实现顶部弹窗效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前端:@{  &n...
    99+
    2024-04-02
  • Android实现Window弹窗效果
    本文实例为大家分享了Android实现Window弹窗效果的具体代码,供大家参考,具体内容如下 效果图 第一步 准备弹窗的布局,新建XML文件 photo_window &l...
    99+
    2024-04-02
  • 微信小程序实现底部弹窗
    本文实例为大家分享了微信小程序实现底部弹窗的具体代码,供大家参考,具体内容如下              &nb...
    99+
    2024-04-02
  • Android实现底部半透明弹出框PopUpWindow效果
    Android底部半透明弹出框PopUpWindow,供大家参考,具体内容如下layout布局:<?xml version="1.0" encoding="utf-8"?><RelativeLayout x...
    99+
    2023-05-30
    android 弹出框 popupwindow
  • Vue实现简单弹窗效果
    本文实例为大家分享了Vue实现简单弹窗效果的具体代码,供大家参考,具体内容如下 选中input 弹出选项框 显示弹窗 首先要在components中新建两个组件 要实现子组件向父...
    99+
    2024-04-02
  • Flutter实现固定header底部滑动页效果示例
    目录正文实现正文 实现的效果是这样的: 刚开始的时候,是在dev上找了两个轮子,简单测了下,都不太满意,滑动事件处理的比较粗糙,总有bug。就在想着,要不要拿源码改一版的时候,让我...
    99+
    2022-12-29
    Flutter固定header底部滑动页 Flutter header
  • vue实现弹窗拖拽效果
    本文实例为大家分享了vue实现弹窗拖拽效果的具体代码,供大家参考,具体内容如下 前言 实现拖拽其实简单来说就分为三步 一、创建一个js文件 因为本身dialog窗口不具备移动拖拽能力...
    99+
    2024-04-02
  • Android底部弹窗的实现示例代码
    本文主要是介绍Android中实现底部弹窗的的正确姿势,如果你在实现底部弹窗时遇到了一些问题,那么请仔细阅读本文,相信文章会对你有所帮助。收获早知道阅读完本文后,你可以有以下收获 利用PopupWindow实现底部弹窗 PopupWin...
    99+
    2023-05-30
    android 底部弹窗 roi
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作