Qt实现消息聊天框

消息聊天框需要支持比较多的功能：

  ① 头像和消息。
  ② 消息类型：文本|图片|音频|视频。
  ③ 自动宽高和消息气泡。

我们需要定义消息类型：

    enum MessageType {
        Text_t,      //文本类型
        Picture_t,   //图片类型
        Music_t,     //音乐类型
        Video_t,     //视频类型
    };
    MessageType m_MessageType;
    void SetMessageType(MessageType value) {
        m_MessageType = value;
    }

    enum EmssageObject{
        System,      //系统消息
        Me,          //自己的消息
        She,         //其他用户的消息
        Time,        //时间显示
    };
    EmssageObject m_EmssageObject;
    void SetEmssageObject(EmssageObject value) {
        m_EmssageObject = value;
    }

注意全程高能，我们使用Qt的自定义绘图事件来画，所以你需要自行学习那些基本事件。

void QWidget::paintEvent(QPaintEvent *event)

1、基本布局

2、实现思路

  本次的消息使用QLIstWidget去管理消息框，但是每个消息都需要设置他的高度，因为默认情况不会睡着消息的宽高自动设置，所以需要
我们自行计算，例如文本需要计算字长内容等等，还是比较复杂的，所以在这里我就得记录下来，以免后面忘记了。

  姑且我们在这里将字体设置为：点大小(12px),微软雅黑

2.1 系统时间类型

  我们在聊天的时候经常会看到，每隔多少时间就会显示一次系统时间，让用户方便去区分时间段，是秒回还是轮回。

  这里我们会发现：字体是居中的，且字体比较小，我们使用10px,的MicrosoftYaHei字体。

QString m_time;     // 消息时间
QString m_curTime;  // 当前时间（格式化后的）
void SetData(QString time){
    m_time = time;              // 存储时间信息
    m_curTime = QDateTime::fromTime_t(time.toInt()).toString("hh:mm"); // 格式化时间
    this->update();             // 更新控件以重新绘制
}
void paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);                    // 不使用事件参数

    //① 基本设置 - 暂时不管
    QPainter painter(this);             // 创建QPainter用于绘制
    painter.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform); // 启用抗锯齿和光滑转换
    painter.setPen(Qt::NoPen);          // 不绘制边框
    painter.setBrush(QBrush(Qt::gray)); // 设置默认画刷颜色为灰色

    //② 根据用户类型绘制不同的消息样式
    if(m_EmssageObject == EmssageObject)        //时间消息
    {
        QPen penText;                                       // 创建文本画笔
        penText.setColor(QColor(153, 153, 153));            // 设置文本颜色为浅灰色
        painter.setPen(penText);                            // 应用文本画笔
        QTextOption option(Qt::AlignCenter);                // 文本居中对齐
        option.setWrapMode(QTextOption::WrapAtWordBoundaryOrAnywhere);  // 设置换行模式
        QFont te_font = this->font();                       // 获取当前字体
        te_font.setFamily("MicrosoftYaHei");                // 设置字体为“MicrosoftYaHei”
        te_font.setPointSize(10);                           // 设置字体大小为10
        painter.setFont(te_font);                           // 应用设置的字体
        painter.drawText(this->rect(), m_curTime, option);  // 绘制时间文本
    }
}

  

 

2.2 自己发出消息类型