Flutter中如何让Row占满父Widget的全部宽度？

问题出在两层布局约束的限制上：

1. 外层Row中，蓝色Container默认仅包裹自身内容，没有占据Row的剩余横向空间，导致内部的红色Row无法获得足够宽度。
2. 蓝色Container内的Column设置了crossAxisAlignment: CrossAxisAlignment.start，使得红色Row仅适配自身内容宽度，无法撑满父容器。

修改步骤 #

第一步：让蓝色Container占据外层Row的剩余宽度

给蓝色Container外层包裹Expanded组件，使其自动填充图片右侧的所有可用空间：

// 原代码：
// Container(
//   color: Colors.blue,
//   child: Column(...),
// ),

// 修改后：
Expanded(
  child: Container(
    color: Colors.blue,
    child: Column(...),
  ),
),

第二步：让红色Row撑满Column的宽度

有两种实现方式可选：

方式一：修改Column的对齐方式

将Column的crossAxisAlignment从CrossAxisAlignment.start改为CrossAxisAlignment.stretch，让Column的所有子项自动占满横向宽度：

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch, // 替换原start属性
  children: [
    Container(
      color: Colors.red,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [Text(title), Text(date)],
      ),
    ),
    // ...其他子项
  ],
)

方式二：给红色Row外层包裹Expanded

如果不想修改Column的对齐方式，可直接给红色Row套Expanded，强制它占满Column的可用宽度：

Container(
  color: Colors.red,
  child: Expanded(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [Text(title), Text(date)],
    ),
  ),
),

完整修改后的代码示例 #

Container(
  color: Colors.yellow,
  margin: const EdgeInsets.symmetric(vertical: 6),
  child: Container(
    color: Colors.green,
    child: Row(
      children: [
        Container(
          decoration: BoxDecoration(
            border: Border.all(width: 1, color: AppColors.tertiary),
            borderRadius: BorderRadius.circular(240),
          ),
          child: Image.asset(image, width: 48, height: 48),
        ),
        const SizedBox(width: 6),
        Expanded(
          child: Container(
            color: Colors.blue,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                  color: Colors.red,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        title,
                        style: Theme.of(context).textTheme.subtitle1?.copyWith(color: Theme.of(context).colorScheme.primary),
                      ),
                      Text(
                        date,
                        style: Theme.of(context).textTheme.bodyText2?.copyWith(color: AppColors.tertiary),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 3),
                Text(
                  value.toString(),
                  style: Theme.of(context).textTheme.bodyText2?.copyWith(color: AppColors.tertiary),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  ),
);

修改完成后，红色Row会完全占满父容器宽度，MainAxisAlignment.spaceBetween会让Title和Date分别对齐左右两侧，实现预期的间距效果。

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