flutter底部弹出BottomSheet详解

 更新时间:2022年03月23日 12:39:33   作者:Guancya  
这篇文章主要为大家详细介绍了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);
    });

  }
}

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

相关文章

  • Android Fragment动态创建详解及示例代码

    Android Fragment动态创建详解及示例代码

    这篇文章主要介绍了Android Fragment动态创建详解的相关资料,并附实例代码及实现效果图,需要的朋友可以参考下
    2016-11-11
  • Android Studio 超级简单的打包生成apk的方法

    Android Studio 超级简单的打包生成apk的方法

    本篇文章主要介绍了Android Studio 超级简单的打包生成apk的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Android使用MulticastSocket实现多点广播图片

    Android使用MulticastSocket实现多点广播图片

    这篇文章主要为大家详细介绍了Android使用MulticastSocket实现多点广播图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • RxJava+Retrofit实现网络请求封装的方法

    RxJava+Retrofit实现网络请求封装的方法

    Retrofit是当前应用非常广泛的网络请求框架,通常结合RxJava来进行网络请求,本文将展示一个采用RxJava+Retrofit的网络请求demo,感兴趣的可以了解一下
    2019-04-04
  • Android开发中使用WebView控件浏览网页的方法详解

    Android开发中使用WebView控件浏览网页的方法详解

    这篇文章主要介绍了Android开发中使用WebView控件浏览网页的方法,结合实例形式较为详细的总结分析了Android WebView控件的功能、布局、设置、常用方法及相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • Android Compose实现伸缩ToolBar的思路详解

    Android Compose实现伸缩ToolBar的思路详解

    这篇文章主要介绍了Android Compose之伸缩ToolBar的实现,本文给大家分享主要实现思路及实现过程,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2021-10-10
  • Android实现为Tab添加Menu的方法

    Android实现为Tab添加Menu的方法

    这篇文章主要介绍了Android实现为Tab添加Menu的方法,分析了两种解决方法的思路并对比分析了相应的优缺点,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • Android中Glide库的使用小技巧总结

    Android中Glide库的使用小技巧总结

    Glide是 Google推荐的图片加载库,相信大家都不陌生,这篇文章主要给大家总结介绍了关于Android中Glide库的使用小技巧,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • Android  隐式Intent的实例详解

    Android 隐式Intent的实例详解

    这篇文章主要介绍了Android 隐式Intent的实例详解的相关资料,隐式意图就是在不明确设置激活对象的前提下寻找最匹配的组件,需要的朋友可以参考下
    2017-08-08
  • android获取当前接入点信息判断是ctwap还是ctnet实例代码

    android获取当前接入点信息判断是ctwap还是ctnet实例代码

    这篇文章主要介绍了android获取当前接入点信息判断是ctwap还是ctnet的方法,大家参考使用吧
    2013-11-11

最新评论