Hey there! 我之前做过类似的乘客-司机端聊天功能，这个问题其实核心就是区分当前登录用户和消息发送者，然后根据这个判断来动态调整布局样式和用户名显示，我给你一步步拆解：

1. 核心逻辑：识别消息归属 #

首先你需要确保每条消息数据里包含两个关键字段：

• senderId：发送这条消息的用户ID（乘客/司机的唯一标识）
• senderName：发送者的用户名（或者可以通过senderId从用户列表里匹配获取）

然后在前端渲染时，拿当前登录用户的userId和每条消息的senderId做对比：

• 如果相等：这条是当前用户发送的消息，显示在右侧
• 如果不等：这条是对方发送的消息，显示在左侧，同时展示用户名

2. 前端实现示例（以React为例） #

假设你已经有了消息列表messages和当前用户IDcurrentUserId，可以这样渲染：

组件代码 #

import React from 'react';
import './ChatMessage.css';

const ChatMessage = ({ messages, currentUserId }) => {
  return (
    <div className="chat-container">
      {messages.map((msg) => {
        const isSentByMe = msg.senderId === currentUserId;
        return (
          <div 
            key={msg.id} 
            className={`message-wrapper ${isSentByMe ? 'sent' : 'received'}`}
          >
            {/* 只在对方消息上方显示用户名 */}
            {!isSentByMe && (
              <span className="message-sender">{msg.senderName}</span>
            )}
            <div className="message-content">{msg.content}</div>
          </div>
        );
      })}
    </div>
  );
};

export default ChatMessage;

对应的CSS样式 #

.chat-container {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
}

.message-wrapper {
  max-width: 75%;
  display: flex;
  flex-direction: column;
}

/* 自己发送的消息：靠右对齐，背景色突出 */
.message-wrapper.sent {
  align-self: flex-end;
}

/* 对方发送的消息：靠左对齐，浅色背景 */
.message-wrapper.received {
  align-self: flex-start;
}

.message-sender {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.message-content {
  padding: 10px 14px;
  border-radius: 18px;
  line-height: 1.4;
}

.message-wrapper.sent .message-content {
  background-color: #007aff;
  color: white;
  border-bottom-right-radius: 4px;
}

.message-wrapper.received .message-content {
  background-color: #e5e5ea;
  color: #000;
  border-bottom-left-radius: 4px;
}

3. 原生平台的思路（如果是Android/iOS） #

• Android：可以用RecyclerView的Adapter，在onBindViewHolder里判断消息归属，然后给View设置gravity（Gravity.END对应自己的消息，Gravity.START对应对方的），同时控制用户名TextView的显示/隐藏。
• iOS：用UITableView，在cellForRowAt中根据消息归属，调整contentView的leadingAnchor和trailingAnchor的约束优先级，比如自己的消息让trailingAnchor优先贴紧父视图，对方的则是leadingAnchor优先，用户名Label同理控制显示。

4. 注意事项 #

• 确保后端返回的消息数据里，senderId是准确的，和当前用户的ID格式一致（比如都是字符串或者数字，避免类型不匹配导致判断错误）；
• 如果用户名需要从用户信息表获取，可以在加载消息时，提前把senderId对应的用户名关联到消息对象上，避免渲染时异步请求导致的闪烁；
• 可以根据需求调整消息气泡的样式，比如圆角、颜色，让乘客和司机的消息区分更明显（比如司机消息用蓝色，乘客用绿色）。

如果你用的是特定框架（比如Vue、Flutter）或者遇到了具体的代码问题，可以补充细节，我再帮你细化！

内容的提问来源于stack exchange，提问作者Hailey C.