iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >flutter底部弹出BottomSheet详解
  • 348
分享到

flutter底部弹出BottomSheet详解

2024-04-02 19:04:59 348人浏览 独家记忆
摘要

本文实例为大家分享了Flutter底部弹出效果的具体代码,供大家参考,具体内容如下 项目中遇到多种条件筛选的情况,我使用了flutter官方的BottomSheet组件来解决了我的问

本文实例为大家分享了Flutter底部弹出效果的具体代码,供大家参考,具体内容如下

项目中遇到多种条件筛选的情况,我使用了flutter官方的BottomSheet组件来解决了我的问题。先看一下效果图:

ModalBottomSheet

这个ModalBottomSheet就是类似一个Dialog,有一个半透明的背景层,然后上面显示你自定义的内容。 用法非常简单,Flutter提供了一个showModalBottomSheet的方法弹出一个BottomSheet。

实现代码:

class AddExpense extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _AddExpensePage();
}

class _AddExpensePage extends State<AddExpense> {
  List<Search> typeList = List<Search>();
  Search _search;
  bool _typeCheck = false;


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _loadType();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Column(
      children: <Widget>[
        Card(
          child: Row(
            children: <Widget>[
              SizedBox(
                width: 16.0,
              ),
              Text('报销类型:', style: TextStyle(fontSize: 16)),
              Expanded(
                child: ListTile(
                  title: Text(
                    _search.code ?? "报销类型",
                  ),
                  trailing: _typeCheck
                      ? Icon(Icons.keyboard_arrow_up)
                      : Icon(Icons.keyboard_arrow_down),
                  onTap: () {
                    setState(() {
                      _typeCheck = !_typeCheck;
                    });
                    showModalBottomSheet(
                      context: context,
                      builder: (BuildContext context) {
                        return ListView.separated(
                          itemCount: typeList.length,
                          separatorBuilder: (context, index) {
                            return Divider();
                          },
                          itemBuilder: (context, index) {
                            return ListTile(
                              title: Text(typeList[index].code),
                              trailing: Offstage(
                                offstage:
                                typeList[index].check ? false : true,
                                child: Icon(Icons.check),
                              ),
                              onTap: () {
                                for (int i = 0; i < typeList.length; i++) {
                                  i != index
                                      ? typeList[i].check = false
                                      : typeList[i].check = true;
                                }
                                _search = typeList[index];
                                Navigator.pop(context);
                              },
                            );
                          },
                        );
                      },
                    ).then((val) {
                      setState(() {
                        _typeCheck = !_typeCheck;
                      });
                    });
                  },
                ),
              )
            ],
          ),
        ),
      ],
    );
   
  }


  void _loadType() {
    String JSONData =
        '[{"code":"差旅费报销单","check":true},{"code":"一般费用报销单","check":false},{"code":"因公临时出国(境)支出表","check":false},{"code":"药费报销单","check":false},{"code":"合同付款审批表","check":false},{"code":"工资系统专用报销表","check":false}]';
    List<dynamic> list = json.decode(jsonData);
    list.forEach((element) {
      Search search = Search.fromJson(element);
      if (search.check) {
        setState(() {
          _search = search;
        });
      }
      typeList.add(search);
    });

  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: flutter底部弹出BottomSheet详解

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

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

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

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

下载Word文档
猜你喜欢
  • flutter底部弹出BottomSheet详解
    本文实例为大家分享了flutter底部弹出效果的具体代码,供大家参考,具体内容如下 项目中遇到多种条件筛选的情况,我使用了flutter官方的BottomSheet组件来解决了我的问...
    99+
    2024-04-02
  • flutter底部弹出BottomSheet怎么实现
    本篇内容介绍了“flutter底部弹出BottomSheet怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果图:ModalBott...
    99+
    2023-06-29
  • Android控件BottomSheet实现底边弹出选择列表
    底边弹出一个选择列表这是一个比较常用的选择条件或跳转的很好的方法,可以很好的隐藏各个选项。在需要使用时在底边弹出。而BottomSheet就是这样的一个控件。使用导入buildcompile 'com.cocosw:bottomsheet:...
    99+
    2023-05-30
    android bottomsheet 底边弹出
  • Flutter底部弹窗ModelBottomSheet怎么用
    这篇文章给大家分享的是有关Flutter底部弹窗ModelBottomSheet怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。实现效果最终实现效果如图片所示,分布演示了基础的,全屏的和自定义的底部弹窗形式。...
    99+
    2023-06-15
  • Flutter实现底部弹窗效果
    目录实现效果代码结构基本使用自定义底部弹窗总结在实际开发过程中,经常会用到底部弹窗来进行快捷操作,例如选择一个选项,选择下一步操作等等。在 Flutter 中提供了一个 showMo...
    99+
    2024-04-02
  • Flutter 底部弹窗ModelBottomSheet的使用示例
    目录实现效果 代码结构 基本使用 自定义底部弹窗 总结 实现效果 最终实现效果如图片所示,分布演示了基础的,全屏的和自定义的底部弹窗形式。 代码结构 在消息页面 message...
    99+
    2024-04-02
  • Flutter实现底部导航栏创建详解
    目录添加依赖项如何使用功能属性主题预览图代码Flutter web问题:Failed to load network image我的解决办法参考资料ConvexBottomBar是一...
    99+
    2024-04-02
  • Flutter 底部弹窗如何实现多项选择
    目录多选和单选的不同之处 实现方式 界面变更 代码实现 总结 多选和单选的不同之处 单选的时候,选中一个就可以直接把结果返回,因此本身底部弹窗无需状态管理。但到多选的时候,需要知...
    99+
    2024-04-02
  • Android如何实现底部缓慢弹出菜单
    这篇文章主要介绍了Android如何实现底部缓慢弹出菜单,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。项目要求要做一个从底部缓慢弹出一个Button Menu 开始编码: M...
    99+
    2023-05-30
    android
  • Android实现底部弹出的对话框功能
    环境: 主机:WIN10 开发环境:Android Studio 2.2 Preview 3说明:两种方法实现底部弹出的对话框: Dialog DialogFragment推荐用DialogFragment效果图:布局文件dialo...
    99+
    2023-05-31
    android 底部 对话框
  • Android实现底部半透明弹出框PopUpWindow效果
    Android底部半透明弹出框PopUpWindow,供大家参考,具体内容如下layout布局:<?xml version="1.0" encoding="utf-8"?><RelativeLayout x...
    99+
    2023-05-30
    android 弹出框 popupwindow
  • 微信小程序实现底部弹出框封装
    本文实例为大家分享了微信小程序底部弹出框封装的具体代码,供大家参考,具体内容如下 <!--index.wxml--> <view>   <butto...
    99+
    2024-04-02
  • Vue出现弹出层时禁止底部页面跟随滑动
    背景:最近在写一个vue项目,当出现弹出层时,发现底部页面跟随滚动,但是产品不想要这种效果,于是找各种资料,发现很多说法,但是试了试,发现有的根本就不行,比如说有人提出用vue中提供...
    99+
    2024-04-02
  • Android仿Iphone屏幕底部弹出半透明PopupWindow效果
    本文实例为大家分享了Android仿Iphone屏幕底部弹出效果的具体代码,供大家参考,具体内容如下main.xml如下: <?xml version="1.0" encoding="utf-8"?><Re...
    99+
    2023-05-30
    android iphone 底部弹出
  • Flutter多项选择弹窗实现详解
    目录多选和单选的不同之处实现方式界面变更代码实现总结在Flutter 底部弹窗详解一篇中介绍了底部弹窗的实现。发出后有在琢磨如何实现多选,这也是很常用的一个功能。本篇介绍实现多选的思...
    99+
    2024-04-02
  • Android怎么实现底部弹出按钮菜单升级版
    这篇文章主要介绍Android怎么实现底部弹出按钮菜单升级版,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下只贴出关键代码 case R.id.myself_share: &n...
    99+
    2023-05-30
    android
  • Android 实现IOS选择拍照相册底部弹出的实例
    Android 实现IOS选择拍照相册底部弹出的实例效果图1. AndroidStudio使用dependencies { compile 'com.guoqi.widget:actionsheet:1.0'}...
    99+
    2023-05-30
    android ios 拍照
  • Android中怎么利用Activity从底部弹出菜单或窗口
    这篇文章给大家介绍Android中怎么利用Activity从底部弹出菜单或窗口,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。第一步:设计要弹出窗口的xml布局:<xml version="1....
    99+
    2023-05-30
    android activity
  • Android如何实现仿网易严选底部弹出菜单效果
    这篇文章将为大家详细讲解有关Android如何实现仿网易严选底部弹出菜单效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先展示效果图如下:是不是还可以呢,由于代码量不多却注释详细,所以先贴出代码再一一...
    99+
    2023-05-30
    android
  • 电脑老是弹出广告怎么彻底解决
    这篇“电脑老是弹出广告怎么彻底解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“电脑老是弹出广告怎么彻底解决”文章吧。电脑老...
    99+
    2023-07-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作