flutter底部弹出BottomSheet怎么实现

本篇内容介绍了“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);    });  }}

“flutter底部弹出BottomSheet怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！