Flutter中Row子组件顶部对齐无效问题求助

问题出在外层Row未设置垂直对齐方式——你给内层Row加了CrossAxisAlignment.start，但外层Row默认是CrossAxisAlignment.center，导致左侧整个Expanded区域在垂直方向居中，内层的文本自然也跟着居中了。

解决方案 #

给最外层的Row添加crossAxisAlignment: CrossAxisAlignment.start，让左右两个Expanded区域都从顶部开始排列：

child: Container(
  padding: EdgeInsets.only(top: 0, left: 30, right: 30, bottom: 0),
  child: Column(
    children: [
      // 关键：给外层Row设置垂直顶部对齐
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            flex: 5,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(height: 20, width: 20, child: Image.network(image)),
                SizedBox(width: 5),
                Text(name),
              ],
            ),
          ),
          SizedBox(width: 1),
          Expanded(
            flex: 3,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text(numberA!.toStringAsFixed(0)),
                Text(numberB!.toStringAsFixed(0)),
              ],
            ),
          ),
        ],
      ),
      // 其他子组件...
    ],
  ),
)

外层Row的对齐方式控制着左右两个区块的垂直位置，设置为start后，左侧的图标和文本、右侧的两行数字都会从顶部开始对齐，你的文本就能回到顶部位置了。

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