Flutter中如何让Row内两Column的图标沿Y轴对齐？

问题场景 #

Card组件内包含标题、副标题和一个Row，Row中有两个Column：

• 第一个Column包含图标和一行文本
• 第二个Column包含图标、一行文本和额外的Text('+')
  添加Text('+')后，两个Column的图标Y轴对齐被破坏；移除Expanded后对齐恢复，但Row内容无法保持居中分布。

解决方案 #

核心思路：让两个Column的内容从顶部开始排列，同时保证Row占满宽度并垂直居中。修改后的完整代码如下：

Card(
  child: Container(
    width: double.infinity,
    padding: const EdgeInsets.all(12.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(       
          "Title",
          style: Theme.of(context).textTheme.titleMedium,
        ),
        Padding(
          padding: const EdgeInsets.only(top: 9.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "Subtitle",
                style: Theme.of(context).textTheme.bodyMedium,
              ),
            ],
          ),
        ),
        // 关键修改：用Center包裹Row实现垂直居中
        Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            mainAxisSize: MainAxisSize.max,
            // 强制两个Column顶部对齐，保证图标Y轴在同一水平线
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Column(
                // 内容从顶部开始排列，避免因高度差异偏移
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SvgPicture.asset(
                    "assets/weight_24dp.svg",
                    semanticsLabel: 'Thin',
                    width: 50,
                    height: 50,
                  ),
                  Text(
                    '10',
                    style: Theme.of(context).textTheme.bodyLarge,
                  ),
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Icon(
                    Icons.repeat,
                    size: 50,
                  ),
                  Text(
                    '12',
                    style: Theme.of(context).textTheme.bodyLarge,
                  ),
                  Text('+')
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  ),
),

关键修改点说明 #

1. Center包裹Row：替代原Expanded实现Row在Card剩余空间内的垂直居中
2. Row设置crossAxisAlignment: CrossAxisAlignment.start：让两个Column的顶部对齐，确保图标处于同一Y轴位置
3. Column设置mainAxisAlignment: MainAxisAlignment.start：让每个Column的内容从顶部开始排列，避免因Column高度不同导致的内容偏移

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