Flutter Web嵌入场景下动态适配屏幕尺寸的问题求助

问题根源 #

你用MediaQuery.of(context).size获取的是屏幕总高度，但实际布局时必须扣除状态栏、底部安全区域（比如iPhone的底部指示条）的占用空间。小屏设备本身高度有限，扣完系统UI占用后，实际可用高度远小于屏幕总高度，所以按总高度100%分配容器高度必然溢出；而大屏设备可用空间充足，调小百分比后自然会留下空白。

具体解决方案 #

1. 用SafeArea包裹布局

先把整个布局放在SafeArea内，自动避开系统UI的占用区域，确保布局在实际可交互空间内渲染：

SafeArea(
  child: Column(
    children: [
      // 你的子组件
    ],
  ),
)

2. 用Expanded替代固定百分比高度

放弃硬编码百分比，让Column的子组件自动分配可用空间，既不会溢出，大屏也能自动填满：

SafeArea(
  child: Column(
    children: [
      Expanded(
        flex: 2, // 占2份空间，对应原40%比例
        child: Container(
          // 你的内容
        ),
      ),
      Expanded(
        flex: 3, // 占3份空间，对应原60%比例
        child: Container(
          // 你的内容
        ),
      ),
    ],
  ),
)

flex值可根据需求调整，比例效果和百分比一致，但会自动适配当前可用空间。

3. 内容过多时添加滚动兜底

如果极端小屏上内容仍可能超出可用空间，用SingleChildScrollView包裹布局，允许垂直滚动彻底解决溢出：

SafeArea(
  child: SingleChildScrollView(
    child: Column(
      children: [
        Container(
          height: MediaQuery.of(context).size.height * 0.4,
          // 你的内容
        ),
        Container(
          height: MediaQuery.of(context).size.height * 0.6,
          // 你的内容
        ),
      ],
    ),
  ),
)

额外提示 #

如果是嵌入WebView，需确保WebView自适应父容器尺寸：

WebView(
  initialUrl: 'your-target-url',
  javascriptMode: JavascriptMode.unrestricted,
  // 移除不必要的手势拦截，确保布局正常
  gestureRecognizers: {},
)

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