Flutter技术点-showModalBottomSheet关闭

最新推荐文章于 2024-06-21 15:35:51 发布

修车码农

最新推荐文章于 2024-06-21 15:35:51 发布

阅读量1.1w

点赞数 6

分类专栏： Flutter 文章标签： Flutter BottomSheet

本文链接：https://blog.csdn.net/u011511921/article/details/106625970

版权

本文介绍了在Flutter中如何使用showModalBottomSheet创建自定义底部选择器，并解决了一个问题：点击选择器内容时如何关闭选择器。通过在选择器内部的点击事件中添加相应代码，实现了点击内容即关闭的效果。

摘要由CSDN通过智能技术生成

由于要使用到底部弹出的选择器，在flutter中可以直接使用showModalBottomSheet来自定义底部选择器

代码如下：

void _showGenderPanel(context) {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            height: 120,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ListTile(
                  title: Text('男'),
                  onTap: () {
                    setState(() {
                      gender = true;
                    });
                  },
                ),
                Divider(
                  height: 1,
                ),
                ListTile(
                  title: Text('女'),
                  onTap: () {
                    setState(() {
                      gender = false;
                    });
                  },
                ),
              ],
            ),
          );