Flutter中如何将Row子组件顶部对齐？解决帖子布局问题

要把头像和日期固定在Row顶部，只需调整布局对齐属性并移除多余的顶部内边距，具体修改如下：

修改要点 #

• 给最外层的Row设置crossAxisAlignment: CrossAxisAlignment.start，让所有子组件垂直方向顶部对齐
• 移除头像外层Padding的top: 15
• 移除右侧内容区外层Padding的top: 20

修改后的完整代码 #

child: Row(
  // 核心：设置Row垂直方向顶部对齐
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    CircleAvatar(
      radius: 20,
      backgroundImage: NetworkImage(
        userData['photoUrl'],
      ),
    ),
    Expanded(
      child: Padding(
        padding: EdgeInsets.only(left: 8), // 移除top:20
        child: Container(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                userData['username'],
                style: TextStyle(
                    fontWeight: FontWeight.bold),
              ),
              Container(
                width: double.infinity,
                padding: const EdgeInsets.only(
                  top: 8,
                ),
                child: RichText(
                  text: TextSpan(
                    style: const TextStyle(
                        color: primaryColor),
                    children: [
                      TextSpan(
                        text:
                            ' ${(snap.data()! as dynamic)['description']}',
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
    Container(
      padding: EdgeInsets.symmetric(vertical: 4),
      child: Text(
        DateFormat.yMd().format(
          (snap.data()!
                  as dynamic)['datePublished']
              .toDate(),
        ),
        style: const TextStyle(
          fontSize: 15,
          color: secondaryColor,
        ),
      ),
    ),
  ],
)

这样修改后，头像、用户名/内容区、日期就都会对齐到Row的顶部，不会再出现垂直居中的问题。

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