flutter底部弹出BottomSheet详解
本文实例为大家分享了flutter底部弹出效果的具体代码,供大家参考,具体内容如下
项目中遇到多种条件筛选的情况,我使用了flutter官方的BottomSheet组件来解决了我的问题。先看一下效果图:
ModalBottomSheet
这个ModalBottomSheet就是类似一个Dialog,有一个半透明的背景层,然后上面显示你自定义的内容。 用法非常简单,Flutter提供了一个showModalBottomSheet的方法弹出一个BottomSheet。
实现代码:
class AddExpense extends StatefulWidget { @override StatecreateState() => _AddExpensePage(); } class _AddExpensePage extends State { List typeList = List (); 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: [ Card( child: Row( children: [ 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 list = json.decode(jsonData); list.forEach((element) { Search search = Search.fromJson(element); if (search.check) { setState(() { _search = search; }); } typeList.add(search); }); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
X 关闭
X 关闭
- 15G资费不大降!三大运营商谁提供的5G网速最快?中国信通院给出答案
- 2联想拯救者Y70发布最新预告:售价2970元起 迄今最便宜的骁龙8+旗舰
- 3亚马逊开始大规模推广掌纹支付技术 顾客可使用“挥手付”结账
- 4现代和起亚上半年出口20万辆新能源汽车同比增长30.6%
- 5如何让居民5分钟使用到各种设施?沙特“线性城市”来了
- 6AMD实现连续8个季度的增长 季度营收首次突破60亿美元利润更是翻倍
- 7转转集团发布2022年二季度手机行情报告:二手市场“飘香”
- 8充电宝100Wh等于多少毫安?铁路旅客禁止、限制携带和托运物品目录
- 9好消息!京东与腾讯续签三年战略合作协议 加强技术创新与供应链服务
- 10名创优品拟通过香港IPO全球发售4100万股 全球发售所得款项有什么用处?