Flutter群聊消息对齐异常及用户信息显示问题技术求助

首先得确保你的消息数据模型包含足够核心字段：发送者ID、发送者名称、消息内容、时间戳，这是区分消息归属和展示信息的基础，示例模型如下：

class ChatMessage {
  final String senderId;
  final String senderName;
  final String content;
  final DateTime timestamp;

  ChatMessage({
    required this.senderId,
    required this.senderName,
    required this.content,
    required this.timestamp,
  });
}

接下来在构建消息列表时，通过对比当前登录用户ID与消息的senderId区分消息归属，以此控制对齐方式和样式：

1. 用ListView.builder渲染消息列表，在itemBuilder中判断消息发送者身份
2. 对不同归属的消息，分别设置MainAxisAlignment.start（他人消息左对齐）和MainAxisAlignment.end（自己消息右对齐）
3. 在消息气泡内按需嵌入发送者名称（仅他人消息显示，自己消息可省略）、消息内容、格式化后的时间戳

完整示例代码：

// 假设当前登录用户ID存在该变量中
final String currentUserId = "your_current_user_id";

ListView.builder(
  reverse: true, // 让最新消息显示在屏幕底部，符合聊天交互习惯
  itemCount: messages.length,
  itemBuilder: (context, index) {
    final message = messages[index];
    final isCurrentUser = message.senderId == currentUserId;

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      child: Row(
        mainAxisAlignment: isCurrentUser 
            ? MainAxisAlignment.end 
            : MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 非当前用户消息：显示发送者名称（可额外添加头像）
          if (!isCurrentUser)
            Padding(
              padding: const EdgeInsets.only(right: 8),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    message.senderName,
                    style: TextStyle(fontSize: 12, color: Colors.grey[600]),
                  ),
                  const SizedBox(height: 4),
                ],
              ),
            ),
          // 消息气泡容器
          Container(
            constraints: BoxConstraints(
              maxWidth: MediaQuery.of(context).size.width * 0.7, // 限制气泡宽度，避免长消息撑满屏幕
            ),
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: isCurrentUser 
                  ? Colors.blue[100] 
                  : Colors.grey[200],
              borderRadius: BorderRadius.circular(16),
            ),
            child: Column(
              crossAxisAlignment: isCurrentUser 
                  ? CrossAxisAlignment.end 
                  : CrossAxisAlignment.start,
              children: [
                Text(message.content),
                const SizedBox(height: 4),
                Text(
                  // 格式化时间戳，需先引入intl包：flutter pub add intl
                  DateFormat('HH:mm').format(message.timestamp),
                  style: TextStyle(fontSize: 10, color: Colors.grey[600]),
                ),
              ],
            ),
          ),
          // 当前用户消息：右侧留空占位，保持布局对称
          if (isCurrentUser) const SizedBox(width: 48),
        ],
      ),
    );
  },
)

核心逻辑说明：

• 对齐控制：通过MainAxisAlignment的不同值，让自己的消息靠右、他人消息靠左排列
• 样式区分：用不同背景色区分消息归属，提升视觉辨识度
• 信息展示：非当前用户的消息顶部显示发送者名称，所有消息底部展示格式化后的时间戳
• 交互优化：设置ListView的reverse: true，让新消息自动滚动到屏幕底部

如果你的现有代码没有对比senderId的判断逻辑，就会导致所有消息统一右对齐，补上这个身份判断即可解决问题。另外，时间戳格式化依赖intl包，记得先在pubspec.yaml中添加依赖并执行flutter pub get。

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