Flutter底部弹窗及修改弹窗最大高度

最新推荐文章于 2024-09-12 14:00:58 发布

im哆来咪

最新推荐文章于 2024-09-12 14:00:58 发布

阅读量4.9k

点赞数 2

分类专栏： flutter移动开发文章标签： android flutter 底部弹窗 ios

本文链接：https://blog.csdn.net/duolaimila/article/details/94447558

版权

flutter移动开发专栏收录该内容

6 篇文章 1 订阅

订阅专栏

在Flutter中，想要实现底部弹窗只需要调用这个方法：

showModalBottomSheet(context: null, builder: null)

具体使用方法：

showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return Container(
            color: Colors.transparent,
            height: 120,
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                new ListTile(
                  title: Text('拍照'),
                  onTap: () {
                    _takePhoto();
                    Navigator.pop(context);
                  },
                ),
                new ListTile(
                  title: Text('从相册中选择'),
                  onTap: () {
                    _openGallery();
                    Navigator.pop(context);
                  },
                ),
              ],
            ),
          );
        });

在build方法中可以自己随意编写ui，但是flutter默认在底部弹窗最大高度做了限制，不能超过屏幕高度的9/16。具体可以在源码中看出：

@override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    return BoxConstraints(
      minWidth: constraints.maxWidth,
      maxWidth: constraints.maxWidth,
      minHeight: 0.0,
      maxHeight: constraints.maxHeight * 9.0 / 16.0,
    );
  }

所以如果想要突破这个限制的高度，可以直接修改源码：