Flutter 底部弹窗ModelBottomSheet的使用示例

实现效果

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

代码结构

在消息页面 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的资料请关注我们其它相关文章!

时间: 2021-06-05

Flutter实现仿微信底部菜单栏功能

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MyHomePage(), ), ); } } class MyHomePage extends Sta

Flutter之自定义Dialog实现版本更新弹窗功能的实现

功能点: 1.更新弹窗UI 2.强更与非强更且别控制 3.屏蔽物理返回键(因为强更的时候点击返回键,弹窗会消失) 4.点击弹窗外透明区域时,弹窗不消失 先看下效果图: Dialog实现代码: import 'package:flutter/material.dart'; import 'package:xiaopijiang/utils/assets_util.dart'; import 'package:xiaopijiang/utils/toast_util.dart'; ///create

Flutter实现底部导航

本文实例为大家分享了Flutter实现底部导航的具体代码,供大家参考,具体内容如下 BottomNavigationBar使用 底部导航栏 主文件 main.dart (注意导入文件路径) import 'package:flutter/material.dart'; import './views/firstPage.dart'; import './views/secondPage.dart'; import './views/thirdPage.dart'; //首先导入三个界面 void

flutter BottomAppBar实现不规则底部导航栏

本文实例为大家分享了flutter实现不规则底部导航栏的具体代码,供大家参考,具体内容如下 实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNavigationBarItem 自定义 BottomAppBar 在这里 使用 BottomAppBar 来实现 /** * 有状态StatefulWidget * 继承于 StatefulWidget,通过 State 的 build 方法去构建控件 */

flutter仿微信底部图标渐变功能的实现代码

先给大家展示下效果图,感觉不错请参考实例代码. 实现思路 在flutter中,如果想实现上面的页面切换效果,必然会想到pageView.pageView的controller可以监听到pageView的滚动事件,也可以获取pageView滚动的位置,所以我们在滚动事件中根据位置去改变对应的图标颜色就可以实现了. 改变图标颜色 图标是从微信中提取出来的,都是webp格式的图片.要改变图片颜色可以使用ImageIcon这个组件. ImageIcon会把一张图片变成单色图片,所以只要图片没有多色的要求

Flutter实现底部菜单导航

简介 现在我们的 APP 上面都会在屏幕下方有一排的按钮,点击不同的按钮可以进入不同的界面.就是说在界面的底部会有一排的按钮导航.可看下面的图示. 完成图示 程序工程目录 梳理下实现步骤 我们需要实现这个底部菜单导航,就需要有底部菜单的那一排图标按钮.图标按钮是固定在一个工具栏 "bar" 上面.然后呢,需要分别需要有按钮对应的界面,就是说按钮有多少个,那么界面需要对应的有多少个.我们来一个清单列表: 按钮图标区域.由于展示的方式都是一样的,我们需要有一个单独的控件,循环出来就好. 工

Flutter底部不规则导航的实现过程

前言 本文主要介绍的是关于Flutter实现底部不规则导航的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 实现方法: 1.main.dart文件 import 'package:flutter/material.dart'; import 'bootom_appBar.dart'; void main () =>runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(B

Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果

如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titleBar能够和状态栏融为一体,增加沉浸感. 如上图Flutter状态栏默认为黑色半透明,那么如何去掉这个状态栏的黑色半透明背景色,让其和标题栏颜色一致,通栏沉浸式,实现如下图效果呢?且继续看下文讲述. 在flutter项目目录下找到android主入口页面MainActivity.kt或MainActivity.java,判断一下版本号然后将状态

Flutter实现底部导航栏

本文实例为大家分享了Flutter实现底部导航栏的具体代码,供大家参考,具体内容如下 效果 实现 先将自动生成的main.dart里面的代码删除, import 'package:flutter/material.dart'; import 'package:flutter_guohe/pages/main.dart'; void main() { runApp(new Guohe()); } 创建app.dart作为首页的页面文件 class Guohe extends StatefulWid

flutter实现更新弹窗内容例子(亲测有效)

什么是Flutter Flutter 是谷歌推出的开发移动UI框架,可以快速的在IOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作,并且Flutter是完全免费的,开源的. 总结来说: Flutter是一款移动应用程序SDK,包含框架.widget和工具,为开发人员提供了一种在Android和iOS上构建和部署精美移动应用程序的简单高效的方式. Flutter的优势 快速开发 毫秒级的热重载,修改后,您的应用界面会立即更新.使用丰富的.完全可定制的widg

java正则表达式获取大括号小括号内容并判断数字和小数亲测可用

 获取大括号小括号内容 项目开发用到了,暂做个简单记录 private static String regex = "\\{([^}]*)\\}";//匹配大括号 private static String regexx = "\\(([^}]*)\\)";//匹配小括号 public static void main(String[] args) { String dakuohao = "{a+b}={c+d}>{d}"; Pattern

Tomcat部署项目的几种常见方式[亲测]

1 /直接将web项目文件件拷贝到webapps目录中 这是最常用的方式,Tomcat的Webapps目录是Tomcat默认的应用目录,当服务器启动时,会加载所有这个目录下的应用.如果你想要修改这个默认目录,可以在conf下的server.xml文件里修改Host标签里的appBase值. 这个方法实际上和在IDE开发环境里部署项目是一样的. 用此方法的访问路径为http://localhost:8080/webname 2 /修改Server.xml文件 在conf下的server.xml文件

2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用

一.pycharm介绍与安装 1.pycharm介绍 PyCharm是一种Python IDE,是Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提示.自动完成.单元测试.版本控制.其本身可以在线上更新和下载库,但本文未使用,使用的是anaconda进行管理 选择原因 开发项目,管理项目资源方便,可导入各种集成库进行开发,图像处理,界面设计,数据库管理等皆可融为一起,方便实际工程项目开发使用 2.安装教程 1.首先去Pycharm官网,或者直接输入网

IntelliJ IDEA 2020最新激活码(亲测有效,可激活至 2089 年)

一.前言 本文分享IntelliJ IDEA 2020最新激活码,可激活至 2089 年,亲测有效~ 笔者在网上找了一圈,各种方法都试过了,之前那种在网上随便找个注册码,就能激活成功的方式已经一去不返了~ 本文记录下个人 IntelliJ IDEA 2019.3激活破解教程~ 说实话,IDEA 更新是真滴快,还以为 IDEA 2019.2.4 后面会更新 IDEA 2019.2.5 版本,谁知道 11 月份刚结束,官方直接就上了 2019.3 版本 ... 据官方说 IDEA 2019.3 版本

IntelliJ IDEA 2020最新注册码(亲测有效,可激活至 2089 年)

申明:本教程 IntelliJ IDEA 破解补丁.激活码均收集于网络,请勿商用,仅供个人学习使用,如有侵权,请联系作者删除. 注意 本教程适用于 IntelliJ IDEA 2020.1 以下所有版本,请放心食用~ 本教程适用于 JetBrains 全系列产品,包括 Pycharm.IDEA.WebStorm.Phpstorm.Datagrip.RubyMine.CLion.AppCode 等. 本教程适用 Windows/Mac/Linux 系统,文中以 Windows 系统为例做讲解. 一

IntelliJ IDEA 2019.3激活破解的详细方法(亲测有效,可激活至 2089 年)

推荐阅读: IDEA 2019.1.3 激活码大全 https://www.jb51.net/article/172109.htm IDEA 2020版本最新破解教程可激活至2089年(推荐) https://www.jb51.net/article/195292.htm 最新idea2020注册码永久激活(激活到2100年) https://www.jb51.net/article/178193.htm 正文开始 IntelliJ IDEA 2019.3激活破解教程(亲测有效,可激活至 208

PHPstorm激活码2020年5月13日亲测有效

PHPstorm激活码,2020年5月13日亲测有效 注意:win10请先修改host文件新增:0.0.0.0 account.jetbrains.com O0VVM7KNLX-eyJsaWNlbnNlSWQiOiJPMFZWTTdLTkxYIiwibGljZW5zZWVOYW1lIjoi5bGx5Lic55CG5bel5aSn5a2mIiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6I

彻底卸载mysql 个人亲测!

干净卸载mysql,个人亲测,这一次终于成功了! 1.在控制面板中卸载mysql软件 2.卸载过后删除C:\Program Files (x86)\MySQL该目录下剩余了所有文件,把mysql文件夹也删了 3.windows+R运行"regedit"文件,打开注册表 4.删除注册表:HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Eventlog\Application\MySQL文件夹 5.删除HKEY_LOCAL_MACHINE\

mysql 8.0.12 解压版安装教程 个人亲测!

Mysql8.0.12解压版安装方法亲测,供大家参考 1.下载(官方推荐的是下载安装板,但是之前一直用,想试一下解压版,毕竟更简单嘛),下载地址 2.解压 这就是解压后的目录,但是我们需要在这个基础上做两步小操作 (1)创建一个名为data的文件夹 (2)创建一个名为my.ini的文件 3.修改my.ini文件 [mysql] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] # 设置3306端口 port = 3306 # 设置mysq

微信小程序使用websocket通讯的demo,含前后端代码,亲测可用

0.概述websocket (1) 个人总结:后台设置了websocket地址,服务器开启后等待有人去连接它. 一个客户端一打开就去连接websocket地址,同时传递某些识别参数.这样一来后台和客户端连接成功了,然后后台就可以发消息给客户端了,(客户端也可以再回话给后台). (2) socket叫套接字,应用程序用socket向网络发出请求或者应答网络请求. (3) 官方解释的socket 建立连接四步骤: 服务器端开启socket,然后accep方法处于监听状态,等待客户端的连接. 客户端开