折叠屏手机中showModalBottomSheet尺寸异常问题处理

问题描述 #

在竖屏折叠显示模式下，showModalBottomSheet无法占满全屏宽度；切换到横屏折叠显示模式时，它又无法占满全屏高度，而是从屏幕中部向上弹出，看起来折叠区域限制了它的宽高范围。

竖屏折叠显示下的效果截图：

相关代码 #

弹窗触发函数 #

showModal(context, size) {
    showModalBottomSheet(
        enableDrag: true,
        isScrollControlled: true,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(40.0),
        ),
        context: context,
        builder: (BuildContext context) {
          return Container(
            height: size.height * 0.8,
            width: size.width,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(40.0),
                topLeft: Radius.circular(40.0),
              ),
            ),
            child: SizedBox(),
          );
        });
  }

触发按钮代码 #

TextButton(
                onPressed: () {
                  showModal(context, size);
                },
                child: Text(
                  'Show Modal',
                  style: TextStyle(color: Colors.black),
                ))

解决方案 #

问题根源在于Flutter的showModalBottomSheet默认会适配折叠屏的显示区域，自动避开折叠/铰链区域，所以不会占满物理全屏。要实现占满对应屏幕尺寸的效果，需要手动配置constraints参数并获取完整屏幕尺寸：

修改后的弹窗函数 #

showModal(BuildContext context) {
  // 获取包含折叠区域的完整屏幕尺寸
  final fullScreenSize = MediaQuery.of(context).size;
  showModalBottomSheet(
    enableDrag: true,
    isScrollControlled: true,
    // 关键：强制BottomSheet使用指定的全屏宽高
    constraints: BoxConstraints.expand(
      width: fullScreenSize.width,
      height: fullScreenSize.height * 0.8,
    ),
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(40.0),
        topRight: Radius.circular(40.0),
      ),
    ),
    context: context,
    builder: (BuildContext context) {
      return Container(
        color: Colors.white,
        child: const SizedBox(),
      );
    },
  );
}

简化后的触发按钮 #

TextButton(
  onPressed: () {
    showModal(context);
  },
  child: const Text(
    'Show Modal',
    style: TextStyle(color: Colors.black),
  ),
)

说明 #

• 使用MediaQuery.of(context).size能获取包含折叠区域的完整屏幕尺寸，而非单块显示区域的尺寸
• 通过BoxConstraints.expand参数，直接指定BottomSheet的宽高，绕过默认的折叠屏适配逻辑
• 如果需要保留折叠区域的适配（比如不覆盖铰链），可以保留默认逻辑；若需要完全占满全屏，上述方案即可实现

内容的提问来源于stack exchange，提问作者Soveyyy