Flutter UI不同屏幕高度适配问题：MediaQuery/LayoutBuilder高度设置不生效？

问题原因 #

• MediaQuery.of(context).size.height 获取的是设备完整屏幕高度，没有扣除系统状态栏、底部手势导航条、当前页面SafeArea的避让高度，不同设备的系统栏高度不统一，直接按比例计算的高度天生存在偏差。
• 布局存在嵌套滚动容器问题：外层已经使用SingleChildScrollView，其内部Column的高度约束为无上限，内层又嵌套了一个SingleChildScrollView，此时LayoutBuilder获取的constraints.maxHeight为无限大，按比例计算高度的逻辑自然失效。
• Stack布局中子组件未做位置绑定，内层SafeArea的内容堆叠在封面图之上，你用固定比例的SizedBox撑出头像的偏移量，没有和封面图的高度做关联，不同屏幕下封面图显示高度发生变化时，偏移量自然不符合预期。

可行解决方法 #

• 1. 优化布局结构，移除不必要的嵌套滚动容器：如果整个页面为滚动布局，仅保留外层一个SingleChildScrollView即可，避免滚动冲突和高度约束丢失。
• 2. 计算可用高度时先扣除系统占用区域：
     计算比例前先从总屏幕高度中扣除MediaQuery.of(context).padding.top（状态栏高度）、MediaQuery.of(context).padding.bottom（底部导航条高度），如果页面有AppBar还要额外扣除AppBar的高度，用扣除后的实际可用高度做比例计算。
• 3. 使用FractionallySizedBox替代硬编码比例的SizedBox：如果需要相对于父容器的比例设置尺寸，可直接使用FractionallySizedBox的heightFactor参数设置高度占父级可用高度的比例，不需要手动计算数值。
• 4. 针对当前封面+头像的堆叠布局，推荐使用定位绑定替代硬编码偏移量，避免适配偏差：

body: SingleChildScrollView(
  child: Stack(
    clipBehavior: Clip.none,
    children: <Widget>[
      // 封面图，假设高度为可用屏幕高度的0.3
      SizedBox(
        height: (MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top) * 0.3,
        width: double.infinity,
        child: _buildCoverImage(screenSize),
      ),
      // 头像相对于封面底部居中偏移
      Positioned(
        left: 0,
        right: 0,
        top: (MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top) * 0.3 - 40, // 40为头像高度的一半，可根据实际调整
        child: Center(child: _buildProfileImage()),
      ),
      // 页面其他内容
      Padding(
        padding: EdgeInsets.only(top: (MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top) * 0.3 + 40 + 16), // 16为头像和名称的间距
        child: Column(
          children: [
            _buildFullName(context),
            _buildStatContainer(context),
            // 其他内容
          ],
        ),
      )
    ],
  ),
);

• 5. 也可使用成熟的适配库简化适配逻辑，比如flutter_screenutil，只需要传入设计稿的原始尺寸，库会自动完成不同屏幕的尺寸转换，不需要手动计算比例。

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