Flutter中如何设置Row子组件高度一致并正确对齐？

问题情况 #

你的Row组件功能正常，但子项对齐不符合预期：想要右侧的「三个点」操作按钮垂直靠下对齐，目前却是和左侧头像、列表项顶部对齐。

问题根因 #

外层Row设置了crossAxisAlignment: CrossAxisAlignment.start，导致所有子项默认沿垂直方向顶部对齐——哪怕右侧嵌套的Row加了CrossAxisAlignment.end，也无法突破外层容器的对齐规则限制。

两种解决办法 #

办法一：让所有子项统一底部对齐 #

直接修改外层Row的交叉轴对齐方式为CrossAxisAlignment.end，所有子项会自动垂直靠下对齐：

const Row(
  crossAxisAlignment: CrossAxisAlignment.end, // 修改这一行
  children: [
    SizedBox(
      child: CircleAvatar(
        radius: 26.5,
        backgroundColor: Color(0xFF6949FF),
        child: CircleAvatar(
          radius: 25,
          backgroundImage: CachedNetworkImageProvider(
              'https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=699&q=80'),
        ),
      ),
    ),
    Flexible(
      child: ListTile(
        title: Text("John"),
        subtitle: Text("55"),
      ),
    ),
    // 无需嵌套Row，直接放文本或图标即可
    Text("three dots")
  ],
),

办法二：仅让右侧按钮底部对齐（其他子项保持顶部对齐） #

如果希望左侧头像和ListTile仍保持顶部对齐，只调整右侧按钮的位置，给右侧组件套一个Align并指定底部对齐：

const Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    SizedBox(
      child: CircleAvatar(
        radius: 26.5,
        backgroundColor: Color(0xFF6949FF),
        child: CircleAvatar(
          radius: 25,
          backgroundImage: CachedNetworkImageProvider(
              'https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=699&q=80'),
        ),
      ),
    ),
    Flexible(
      child: ListTile(
        title: Text("John"),
        subtitle: Text("55"),
      ),
    ),
    Align(
      alignment: Alignment.bottomCenter, // 设置底部对齐
      child: Text("three dots"),
    )
  ],
),

小优化建议 #

• 「三个点」建议使用Flutter自带的Icon(Icons.more_vert)，更符合Material设计规范；
• 子项之间添加SizedBox(width: 8)增加间距，UI会更美观舒适。

内容的提问来源于stack exchange，提问作者jpg.hue