构建Flutter聊天组件遇长文本换行问题，求布局解决方案

针对你要实现的布局需求，调整后的代码如下，关键修改点我会逐一说明：

@override
Widget build(BuildContext context) {
  return Card(
    margin: const EdgeInsets.all(10),
    child: Padding(
      padding: const EdgeInsets.all(10),
      child: FutureBuilder(
        future: shokaze.User.getFromId(userId),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Text("Error: ${snapshot.error}");
          } else if (!snapshot.hasData) {
            return const Center(child: CircularProgressIndicator());
          }
          final user = snapshot.data;
          return Row(
            crossAxisAlignment: CrossAxisAlignment.start, // 让头像和内容顶部对齐
            children: [
              UserAvatar(user: user),
              const SizedBox(width: 8), // 头像与右侧内容的间距
              Expanded( // 让右侧Column占据Row剩余宽度
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start, // 内容左对齐
                  mainAxisSize: MainAxisSize.min, // 高度适配内容，不占满父组件
                  children: [
                    Row(
                      children: [
                        Expanded( // 用户ID区域占据左侧剩余空间
                          child: Text(
                            userId,
                            maxLines: 2, // 可自定义最多显示行数
                            overflow: TextOverflow.ellipsis, // 超出行数时显示省略号
                            softWrap: true, // 允许文本换行
                          ),
                        ),
                        const SizedBox(width: 8), // 用户ID与日期区域的间距
                        Wrap(
                          spacing: 4, // 日期与箭头的间距
                          crossAxisAlignment: WrapCrossAlignment.center, // 文本与图标垂直居中
                          children: [
                            Text(Format.ago(mostRecentMessage.creationDate)),
                            const Icon(Icons.arrow_forward_ios, size: 16), // 缩小箭头尺寸更协调
                          ],
                        ),
                      ],
                    ),
                    const SizedBox(height: 4), // 用户名与消息的间距
                    Text(
                      mostRecentMessage.message,
                      maxLines: 3,
                      overflow: TextOverflow.ellipsis, // 超出3行显示省略号
                      softWrap: true,
                    ),
                  ],
                ),
              ),
            ],
          );
        },
      ),
    ),
  );
}

核心修改说明： #

• 外层Row添加crossAxisAlignment: CrossAxisAlignment.start，避免头像与内容垂直居中的错位问题。
• 右侧Column用Expanded包裹，确保它能充分利用Row的剩余宽度，不会被头像挤压变形。
• 用户ID的Text嵌套在Expanded中，既可以占据左侧可用空间，又能通过maxLines和softWrap实现多行显示，超出后自动截断加省略号。
• 日期与箭头的Wrap通过WrapCrossAlignment.center实现垂直居中，视觉上更协调。
• 最新消息的Text补充overflow: TextOverflow.ellipsis，配合maxLines:3实现最多3行、超出省略的效果。
• 新增多处SizedBox控制元素间距，优化整体布局的美观度。

内容的提问来源于stack exchange，提问作者Stéphane de Luca