Flutter如何实现图片容器内三张图片并排排列的目标布局效果

你当前代码的核心问题是没有为图片的父容器设置尺寸占比，也没有配置图片的适配规则，导致图片按原始尺寸渲染溢出。

你可以参考如下代码调整：

Container(
  height: 100.0,
  width: 150.0,
  clipBehavior: Clip.hardEdge, // 剪裁超出容器的内容
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8), // 按需设置整体圆角，匹配设计稿
  ),
  child: Row(
    children: [
      // 左侧大图占1/2宽度
      Expanded(
        flex: 1,
        child: Image(
          image: AssetImage(''),
          fit: BoxFit.cover, // 按容器比例填充，不变形
          height: double.infinity,
          width: double.infinity,
        ),
      ),
      // 右侧两图容器占1/2宽度
      Expanded(
        flex: 1,
        child: Column(
          children: [
            Expanded(
              flex: 1,
              child: Image(
                image: AssetImage(''),
                fit: BoxFit.cover,
                height: double.infinity,
                width: double.infinity,
              ),
            ),
            // 两张小图之间的间距，按需调整数值
            const SizedBox(height: 2),
            Expanded(
              flex: 1,
              child: Image(
                image: AssetImage(''),
                fit: BoxFit.cover,
                height: double.infinity,
                width: double.infinity,
              ),
            ),
          ],
        ),
      ),
    ],
  ),
)

关键改动说明 #

• 用Expanded包裹布局节点，通过flex参数分配宽高占比，避免内容溢出
• 给所有Image设置fit: BoxFit.cover属性，保证图片按容器比例填充，不会出现拉伸变形
• 外层容器添加clipBehavior和圆角配置，匹配设计稿的视觉样式

你当前的实现效果：

期望达到的设计效果：

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