Flutter不同屏幕比例适配求助：16:9转20:9出现UI异常

针对你遇到的16:9到20:9屏幕的适配问题，不用单独做多布局，试试下面几个更简洁的方案：

方案1：以屏幕短边为基准计算尺寸 #

放弃直接用MediaQuery.size的宽或高，改用屏幕的**较短边（min(width, height)）**作为基准值来计算控件尺寸，这样无论屏幕是宽屏还是窄屏，都能保证元素不会过度拉伸。

示例代码：

final screenSize = MediaQuery.of(context).size;
final shortSide = screenSize.shortestSide;

// 卡车图片宽度设为短边的80%，高度按图片原始比例自动计算
Image.asset(
  'assets/truck.png',
  width: shortSide * 0.8,
  fit: BoxFit.contain,
)

方案2：用LayoutBuilder + FittedBox约束图片比例 #

用LayoutBuilder获取父容器的可用空间，再通过FittedBox强制图片保持原始比例，同时限制其最大尺寸不超出容器范围，避免在长屏中过高。

示例代码：

LayoutBuilder(
  builder: (context, constraints) {
    return FittedBox(
      fit: BoxFit.contain,
      child: SizedBox(
        // 按图片原始比例设置最大尺寸，比如图片为4:3比例
        width: constraints.maxWidth * 0.9,
        height: (constraints.maxWidth * 0.9) * 0.75,
        child: Image.asset('assets/truck.png'),
      ),
    );
  },
)

方案3：结合AspectRatio与ConstrainedBox #

给图片外层套AspectRatio固定其显示比例，再用ConstrainedBox限制最大宽高，确保在不同宽高比屏幕下都能适配。

示例代码：

ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: MediaQuery.of(context).size.width * 0.9,
    maxHeight: MediaQuery.of(context).size.height * 0.4, // 限制最大高度为屏幕高度的40%
  ),
  child: AspectRatio(
    aspectRatio: 16/9, // 替换为图片的原始比例
    child: Image.asset(
      'assets/truck.png',
      fit: BoxFit.cover,
    ),
  ),
)

核心思路是优先保证元素的比例一致性，同时限制元素的最大尺寸，避免在极端宽高比屏幕下出现拉伸或间隙问题。如果你的图片有固定的原始比例，优先用该比例来约束，比单纯依赖屏幕宽高更可靠。

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