Flutter中MediaQuery获取尺寸后多设备适配溢出问题求助

直接用屏幕宽高百分比设置组件尺寸时，忽略了安全区域、设备像素密度、布局结构差异等问题，很容易在不同设备上出现溢出。以下是几种实用的适配方案：

• 优先使用可用空间而非全屏尺寸
  屏幕的实际可用空间需要扣除状态栏、导航栏、底部安全区这些系统占用的区域，直接用MediaQuery.of(context).size计算的话，会导致组件占用被系统覆盖的空间，进而溢出。正确的做法是计算可用空间：

  final mediaQuery = MediaQuery.of(context);
  final availableHeight = mediaQuery.size.height - mediaQuery.padding.top - mediaQuery.padding.bottom;
  final availableWidth = mediaQuery.size.width - mediaQuery.padding.left - mediaQuery.padding.right;
  

  之后用availableHeight * 0.1这类比例设置尺寸，就能避开系统控件的干扰。

• 用FittedBox处理固定尺寸组件
  如果你的组件是固定尺寸的设计，直接缩放容易变形或溢出，用FittedBox包裹可以让组件自动适配父容器的空间，同时保持比例：

  Container(
    width: availableWidth,
    height: availableHeight * 0.5,
    child: FittedBox(
      fit: BoxFit.contain, // 根据需求选fit类型，比如cover、fill
      child: YourTargetWidget(),
    ),
  )
  

• Flex布局替代硬编码比例
  在Row/Column这类线性布局里，别用固定百分比，改用Expanded或Flexible按权重分配空间，让组件根据父容器自动调整大小，从根源避免溢出：

  Column(
    children: [
      Expanded(
        flex: 1, // 占总空间的1/4
        child: Container(color: Colors.red),
      ),
      Expanded(
        flex: 3, // 占总空间的3/4
        child: Container(color: Colors.blue),
      ),
    ],
  )
  

• 基于设计稿的等比缩放
  先确定设计稿的基准尺寸（比如常用的375x667），然后计算当前设备与设计稿的缩放比例，取最小比例保证内容不溢出：

  // 设计稿基准尺寸
  const designWidth = 375.0;
  const designHeight = 667.0;
  
  final mediaQuery = MediaQuery.of(context);
  final scaleWidth = mediaQuery.size.width / designWidth;
  final scaleHeight = mediaQuery.size.height / designHeight;
  final scale = min(scaleWidth, scaleHeight); // 取小值防止内容超出屏幕
  
  // 组件尺寸按设计稿数值乘以scale
  SizedBox(
    width: 120 * scale, // 设计稿上120px的宽度
    height: 60 * scale, // 设计稿上60px的高度
    child: ...,
  )
  

• 结合设备像素密度调整
  部分高像素密度设备会让按宽高比例设置的组件显示过小，此时可以结合devicePixelRatio做调整：

  final pixelRatio = MediaQuery.of(context).devicePixelRatio;
  final adjustedSize = (screenHeight * 0.1) / pixelRatio;
  

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