Flutter Column排布两张图片按8:1占比横向无留白问题排查

直接在Column中堆叠Image组件时，没有做两层关键配置：一是没有按比例给两个图片分配纵向可用高度，二是没有给图片设置正确的拉伸适配规则、也没有强制Column子组件撑满宽度，才会出现高度比例不对、横向留空白的问题。

• 用Expanded组件分别包裹两张图片，通过flex参数配置高度占比：第一张图flex值设为8，第二张设为1，框架会自动按照8:1的比例给两个组件分配Column的纵向可用空间，不会受图片原始尺寸影响
• 给Column设置crossAxisAlignment: CrossAxisAlignment.stretch，强制所有子组件的宽度撑满Column的可用宽度，从布局层面消除横向留白的可能
• 给每个Image组件设置fit属性：如果允许图片轻微拉伸变形完全填满区域，用BoxFit.fill；如果要保持图片原始宽高比、仅横向撑满后裁切多余的纵向部分，用BoxFit.fitWidth，这两种模式都能保证横向没有空白

Column(
  // 强制子组件宽度撑满
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Expanded(
      // 占8份纵向高度
      flex: 8,
      child: Image.asset(
        // 替换为你的第一张图片资源路径
        'assets/first_img.png',
        // 横向撑满，保持比例裁切，不会变形
        fit: BoxFit.fitWidth,
      ),
    ),
    Expanded(
      // 占1份纵向高度
      flex: 1,
      child: Image.asset(
        // 替换为你的第二张图片资源路径
        'assets/second_img.png',
        fit: BoxFit.fitWidth,
      ),
    ),
  ],
)

• 不要给Image组件手动写固定高度值，否则会覆盖Expanded的比例分配逻辑
• 如果Column外层还有嵌套布局，要确认Column本身能拿到父组件传递的完整宽高，不要给Column套Align、Center这类会让子组件尺寸收缩的组件
• 如果用BoxFit.contain、BoxFit.fitHeight这类适配模式，一定会出现横向或纵向的留白，不符合你的需求

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