flutter底部弹出BottomSheet详解 flutter底部弹出BottomSheet详解

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

文章图片

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

class AddExpense extends StatefulWidget {@overrideState createState() => _AddExpensePage(); }class _AddExpensePage extends State {List typeList = List(); Search _search; bool _typeCheck = false; @overridevoid initState() {// TODO: implement initStatesuper.initState(); _loadType(); }@overrideWidget build(BuildContext context) {// TODO: implement buildreturnColumn(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 ='https://www.it610.com/article/[{"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); }); }}

【flutter底部弹出BottomSheet详解】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。