Qt+QListWidget实现气泡聊天界面(附源码)

下面是详细讲解“Qt+QListWidget实现气泡聊天界面(附源码)”的完整攻略：

1.准备工作

首先，需要在Qt中新建一个项目，选择"Qt Widgets Application"，然后依次填写项目名称、路径等信息即可。接着，在项目中添加一个QListWidget控件，并根据需要添加其他控件，比如QPushButton、QLineEdit等。

2.实现气泡聊天界面

2.1 数据模型

气泡聊天界面的核心是消息数据，因此需要创建一个消息类Message，用于存储消息的内容、发送者、接收者和时间等信息。具体实现如下：

enum MessageType{
    Me, 
    You
}; //枚举类型，用于标识消息的发送者和接收者

struct Message{
    QString content;  //消息内容
    MessageType type; //消息发送者类型
    QDateTime time;   //消息发送时间

    Message(QString content, MessageType type, QDateTime time){
        this->content = content;
        this->type = type;
        this->time = time;
    }
};

2.2 UI布局

接着，需要设计气泡聊天界面的UI布局。布局可以分为两部分，分别是左边为当前用户列表，右边为聊天界面。当用户点击用户列表中的某个用户时，聊天界面会显示与该用户的聊天记录。具体实现如下：

void initUserList(){
    ui->listWidgetUser->addItems(users); //向用户列表中添加用户
    connect(ui->listWidgetUser, &QListWidget::currentTextChanged, this, &MainWindow::changeUser);
}

void changeUser(QString username)//切换聊天对象
{
    updateChatRecords(username);
}

void updateChatRecords(QString username) //更新聊天记录
{
    QList<Message> records = chatRecords[username];
    ui->listWidgetChat->clear();
    for(Message msg : records){
        addMessage((msg.type == Me) ? username : "我", msg.content, (msg.type == Me) ? MsgType_Me : MsgType_You, msg.time.toString("yyyy-MM-dd hh:mm:ss"));
    }
    ui->listWidgetChat->scrollToBottom();
}

void addMessage(QString username, QString content, MsgType type, QString time)
{
    QListWidgetItem * item = new QListWidgetItem(ui->listWidgetChat); //新建一个QListWidgetItem对象
    item->setSizeHint(QSize(0, 40)); //设置QListWidgetItem的高度为40
    ChatBubble * bubble = new ChatBubble(ui->listWidgetChat); //新建一个聊天气泡
    bubble->setUserName(username); //设置用户姓名
    bubble->setText(content); //设置气泡内容
    bubble->setMsgType(type); //设置气泡类型
    bubble->setTime(time); //设置气泡时间
    ui->listWidgetChat->setItemWidget(item, bubble); //将气泡插入到QListWidgetItem中
}

2.3 聊天气泡

接下来，需要实现聊天气泡。聊天气泡是气泡聊天界面中最重要的组件之一，它可以显示用户的头像、消息内容、消息类型和发送时间等信息。具体实现如下：

class ChatBubble : public QWidget
{
    Q_OBJECT
public:
    explicit ChatBubble(QWidget *parent = 0);

    void setUserName(QString username); //设置用户姓名
    void setText(QString text); //设置气泡内容
    void setMsgType(MsgType type); //设置气泡类型
    void setTime(QString timeStr); //设置气泡时间

private:
    void paintEvent(QPaintEvent *event);
    QSize sizeHint() const;

    QString userName; //用户名
    QString text; //气泡内容
    MsgType msgType; //气泡类型
    QString timeStr; //气泡时间
};

聊天气泡的样式可以通过paintEvent函数绘制，这里不再赘述。完整代码可以参考“附源码”中的ChatBubble.cpp和ChatBubble.h文件。

2.4 完整实现

最后，将以上三个部分组合在一起，就可以实现气泡聊天界面了。完整代码可以参考“附源码”中的MainWindow.cpp和MainWindow.h文件。

示例说明

示例1：添加新的消息气泡

要添加一条新的消息气泡，可以使用addMessage函数，该函数的参数包括：消息发送者的用户名、消息内容、消息类型和消息发送时间。下面是示例代码：

QDateTime currentDateTime = QDateTime::currentDateTime(); //获取当前时间
QString timeStr = currentDateTime.toString("yyyy-MM-dd hh:mm:ss"); //格式化时间字符串
addMessage("用户1", "你好，欢迎来到我的主页！", MsgType_You, timeStr); //添加一条接收消息

示例2：更新聊天记录

如果要更新聊天记录，可以使用updateChatRecords函数，该函数的参数为要更新的聊天对象的用户名。下面是示例代码：

updateChatRecords("用户1"); //更新用户1的聊天记录