Flutter中Row右侧Column间距调整问题：space系列属性无效

我想让图片右侧的Column组件间距和示例效果一致，但尝试了spaceBetween、spaceEvenly和spaceAround这三个属性后均未生效。

期望效果：

当前效果：

我的实现代码：

Widget foodItemCard(BuildContext context, FoodItem prod) {
  return Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10), color: Colors.white),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 10, left: 10, bottom: 10),
            child: Image(
              image: AssetImage(prod.imageAddress),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(prod.prodName),
                sauceItemList(context, prod.sauceItems),
                Text('${prod.prodPrice} VND')
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

Widget sauceItemList(BuildContext context, List<SauceItem> items) {
  return Column(
    children: List.generate(
        items.length,
        (index) => Row(
              children: [
                Container(
                  height: 15,
                  width: 15,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle, color: Color(items[index].color)),
                ),
                const SizedBox(
                  width: 10,
                ),
                Text(
                  items[index].prodName,
                  style: TextStyle(color: Color(items[index].color)),
                )
              ],
            )),
  );
}

问题出在Row的交叉轴对齐设置和Column的高度限制：

1. 调整Row的交叉轴对齐：把crossAxisAlignment: CrossAxisAlignment.center改成crossAxisAlignment: CrossAxisAlignment.stretch，让右侧Column拉伸到和左侧图片相同的垂直高度，这样才有足够空间分配间距。
2. 给Column添加主轴对齐：在右侧Column中添加mainAxisAlignment: MainAxisAlignment.spaceBetween，让商品名、酱料列表、价格三个子元素在垂直方向上均匀分布。

修改后的核心代码片段：

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch, // 修改为stretch
  children: [
    // 左侧图片部分保持不变
    Padding(
      padding: const EdgeInsets.only(left: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween, // 添加间距设置
        children: [
          Text(prod.prodName),
          sauceItemList(context, prod.sauceItems),
          Text('${prod.prodPrice} VND')
        ],
      ),
    ),
  ],
)

如果需要酱料列表在中间区域垂直居中，可以给sauceItemList的Column也添加对齐设置：

Widget sauceItemList(BuildContext context, List<SauceItem> items) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center, // 添加垂直居中
    children: List.generate(
        items.length,
        (index) => Row(
              children: [
                Container(
                  height: 15,
                  width: 15,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle, color: Color(items[index].color)),
                ),
                const SizedBox(
                  width: 10,
                ),
                Text(
                  items[index].prodName,
                  style: TextStyle(color: Color(items[index].color)),
                )
              ],
            )),
  );
}

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