Flutter中如何将Row内的图标对齐至顶部？

你之前设置的crossAxisAlignment: CrossAxisAlignment.start应该是加到了Column组件上，但Column的这个属性控制的是其子组件在水平方向的对齐方式，和Row里Icon的垂直位置完全没关系。要让红色Icon对齐Row的顶部（和第一个黄色Container对齐），核心是给Row组件设置crossAxisAlignment: CrossAxisAlignment.start。

修改后的完整代码如下：

Row(
  // 关键配置：让Row的子组件垂直对齐顶部
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Padding(
      padding: const EdgeInsets.only(right: 5),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 30,
            width: 100,
            color: Colors.yellow,
          ),
          Container(
            height: 30,
            width: 100,
            color: Colors.green,
          ),
          Container(
            height: 30,
            width: 100,
            color: Colors.lightGreenAccent,
          ),              
        ],
      ),
    ),
    Icon(
      Icons.add_circle,
      color: Colors.red,
      size: 30,
    )
  ],
)

原理说明 #

Row的crossAxisAlignment属性控制子组件在垂直方向（Row的交叉轴）的对齐逻辑，默认值是CrossAxisAlignment.center，所以之前Icon会居中显示。改成CrossAxisAlignment.start后，Row内的所有子组件都会对齐Row的顶部边缘，这样红色Icon就会和第一个黄色Container的顶部对齐了。

如果需要更精细的位置调整，比如给Icon增加顶部偏移，可以用Padding包裹Icon，或者使用Align组件指定对齐位置，但上述方法已经能解决你的核心需求。

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