Flutter布局疑问：如何基于图标而非文本均匀分布Row内的Column

嘿，不用拆成两个Row就能搞定这个需求！咱们来分析下问题和解决方案：

当前问题原因 #

你现在的Row用了MainAxisAlignment.spaceAround，但每个Column的宽度是由内部的文本（比如"MASTERY"比"RELIABILITY"短）和图标共同决定的，导致列宽不一致，所以图标看起来没有均匀分布。

解决方案：让列宽一致，基于图标对齐 #

只需要给每个Column外层套一个Expanded（flex设为1，确保三列平分Row宽度），同时保留原有Column的布局属性，就能让图标均匀分布在顶部，文本固定在底部。

修改后的代码如下：

Container(
  height: 60,
  padding: EdgeInsets.symmetric(horizontal: 40),
  margin: EdgeInsets.only(bottom: 20),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: <Widget>[
      Expanded( // 添加Expanded，平分Row宽度
        flex: 1,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Icon(ChampionsMind.medal_light, size: iconSize, color: medalsColors[0]),
            Text('RELIABILITY', style: TextStyle(color: Colors.white),),
          ],
        ),
      ),
      Expanded( // 添加Expanded，平分Row宽度
        flex: 1,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Icon(ChampionsMind.submenu_achievements, 
                size: iconSize, 
                color: medalsColors[(Math.min(((userData.getPillarPoints(appData, 1) + userData.getPillarPoints(appData, 2) + userData.getPillarPoints(appData, 3) + userData.getPillarPoints(appData, 4))/6000), 1)*(medalsColors.length-1)).floor()], 
            ),
            Text('MASTERY', style: TextStyle(color: Colors.white), textAlign: TextAlign.center,),
          ],
        ),
      ),
      Expanded( // 添加Expanded，平分Row宽度
        flex: 1,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Icon(ChampionsMind.medal_light, size: iconSize, color: medalsColors[0]),
            Text('TEAMWORK', style: TextStyle(color: Colors.white),),
          ],
        ),
      ),
    ],
  ),
)

为什么这样有效？ #

• Expanded(flex:1)让三个Column平分Row的可用宽度，确保每列宽度完全一致
• 每个Column的mainAxisAlignment: MainAxisAlignment.spaceBetween会让图标固定在顶部，文本固定在底部
• 因为列宽一致，顶部的图标自然就会呈现均匀分布的效果，完全符合你的需求

这样既不用拆分布局，又能完美实现按顶部图标均匀分布的效果～

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