ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

Qt的聊天气泡

2021-02-16 12:30:35  阅读：218  来源： 互联网

标签：begin Qt text spacing height width radius 聊天 气泡


采用了QListWidget作为聊天记录窗口，而每一子项都为QWidget，可以在QWidget绘制自己添加的内容，比如消息内容、头像、名字等，主要可以显示动态GIF表情。
效果图：
在这里插入图片描述
mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QDateTime>
namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private slots:
    void on_pushButton_clicked();

    void on_pushButton_2_clicked();

private:
    Ui::MainWindow *ui;

    int width;

    int higth;

    QDateTime *time;
};

#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "chatcontentcircular.h"
#include <QDebug>
#include <QLabel>
#include <QMovie>
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    width = 0;
    higth = 0;
    time = new QDateTime();
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_pushButton_clicked()
{
     QListWidgetItem *item = new QListWidgetItem;
     ChatContentCirCular *chatwid = new ChatContentCirCular();
     QString text = ui->lineEdit->text();
     chatwid->setuserChatContent("                                       ");
     chatwid->setuserIconName(":/0.bmp");
     QLabel *pic = new QLabel(chatwid);
     pic->move(80,30);
     QMovie *movie = new QMovie(":/3.gif");
     pic->setScaledContents(true);
     pic->setMovie(movie);
     movie->start();

     chatwid->settalkTime(time->currentDateTime());
     qDebug()<<time->currentDateTime();
     chatwid->run(SHOW_TYPE_LEFT);
     chatwid->setFixedSize(ui->textEdit->width(),80);

     //chatwid->move(width,higth);
     //higth += 50;
     ui->textEdit->addItem(item);
     ui->textEdit->setItemWidget(item,chatwid);
     chatwid->show();

     QListWidgetItem *_item = new QListWidgetItem;
     ChatContentCirCular *_chatwid = new ChatContentCirCular();
     _chatwid->setFixedSize(ui->textEdit->width(),40);
     ui->textEdit->addItem(_item);
     ui->textEdit->setItemWidget(_item,_chatwid);
     _chatwid->show();

}

void MainWindow::on_pushButton_2_clicked()
{
    QListWidgetItem *item = new QListWidgetItem;
    ChatContentCirCular *chatwid = new ChatContentCirCular();
    QString text = ui->lineEdit->text();
    chatwid->setuserChatContent(text);
    chatwid->setuserIconName(":/0.bmp");
    chatwid->settalkTime(chatwid->gettalkTime());
    qDebug()<<time->currentDateTime();
    chatwid->run(SHOW_TYPE_TIME);
    chatwid->setFixedSize(ui->textEdit->width(),80);
    ui->textEdit->addItem(item);
    ui->textEdit->setItemWidget(item,chatwid);
    chatwid->show();
}

ChatContentCirCular.h


#include "userchatcontentinterface.h"

#include <QWidget>
#include <QPaintEvent>
#include <QColor>
#include <QString>
#include <QDateTime>

class ChatContentCirCular:public UserChatContentInterface
{
     Q_OBJECT
public:
    explicit ChatContentCirCular(QWidget *parent = 0);
    ~ChatContentCirCular();

    QString getname();//插件类型名称
    qint32 getverison();//插件版本号

    qint32 getwindowHeight();
    QString getuserIconName();//返回登录用户的图像名称
    QString getuserChatContent();//返回登录用户聊天内容
    QDateTime gettalkTime();//返回聊天时间

    void setuserIconName(QString namestr);//设置登录用户的图像名称
    void setuserChatContent(QString usertext);//设置登录用户聊天内容
    void settalkTime(QDateTime talktime);//设置聊天时间

    void run(show_type_enum type);//开始运行，需要绘制，即开始绘制

protected:

    void paintEvent(QPaintEvent *event); //重写QWidget的重绘时间
    void calc_text_size(); //计算文字的实际高度

signals:

public slots:

private:
    QString plug_name;  //插件名称
    qint32  plug_version;//插件版本号

    QString user_icon_name;//用户图像地址
    QString user_chat_content;//用户聊天内容
    QDateTime talk_time;//用户聊天时间

    show_type_enum show_type; //显示类型

    qint32 window_height;//实际的窗口高度

    qint32 text_max_width; //文字的最大宽度
    qint32 text_min_width;//文字的最小宽度
    qint32 text_height;//文字的实际高度

    qint32 begin_width_spacing;//起始点距边框的宽度
    qint32 begin_height_spacing;//起始点距边框的高度
    qint32 icon_width;//图像宽度
    qint32 icon_height;//图像高度

    qint32 text_height_spacing;//文字距矩形气泡边框的高度
    qint32 triangle_width;//横向三角形的宽度
    qint32 triangle_height;//横向三角形的高度
    qint32 radius; //圆角的半径


    QColor framework_border_color;//气泡样式的边框颜色
    QColor framework_background_color;//气泡样式的背景颜色
    QColor text_color;//文字颜色
    QColor time_color;//时间颜色
};

ChatContentCirCular.cpp

#include "chatcontentcircular.h"
#include <QPainter>
#include <QRect>
#include <QPen>
#include <QTextOption>
#include <QFont>
#include <QColor>
#include <QFontMetricsF>
#include <QDebug>
#include <QPainterPath>

ChatContentCirCular::ChatContentCirCular(QWidget *parent):UserChatContentInterface(parent)
{
    this->setAttribute(Qt::WA_TranslucentBackground);//设置背景透明
    plug_name="circle frame chat content";  //设置插件信息
    plug_version=1.0;

    show_type=SHOW_TYPE_MIN;  //设置变量的初始值
    window_height=10;
    begin_width_spacing=20;
    begin_height_spacing=16;
    icon_width=40;
    icon_height=40;

    text_height_spacing=12;
    triangle_width=10;
    triangle_height=8;
    radius=20;

    text_color=QColor(255,255,255);
    time_color=QColor(153,153,153);

    QFont text_font = this->font();
    text_font.setFamily("新宋体");
    text_font.setPointSize(10);
    this->setFont(text_font);
}

ChatContentCirCular::~ChatContentCirCular()
{

}

QString ChatContentCirCular::getname()
{
    return this->plug_name;
}

qint32 ChatContentCirCular::getverison()
{
    return this->plug_version;
}

qint32 ChatContentCirCular::getwindowHeight()
{
    return this->window_height;
}

QString ChatContentCirCular::getuserIconName()
{
    return this->user_icon_name;
}

QString ChatContentCirCular::getuserChatContent()
{
    return this->user_chat_content;
}

QDateTime ChatContentCirCular::gettalkTime()
{
    return this->talk_time;
}

void ChatContentCirCular::setuserIconName(QString namestr)
{
    this->user_icon_name=namestr;
}

void ChatContentCirCular::setuserChatContent(QString usertext)
{
    this->user_chat_content=usertext;
    this->calc_text_size();
}

void ChatContentCirCular::settalkTime(QDateTime talktime)
{
    this->talk_time=talktime;
}

void ChatContentCirCular::run(show_type_enum type)
{
    show_type=type;
    this->update();
}

void ChatContentCirCular::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);//消锯齿
    painter.setFont(this->font());

    if(this->show_type==SHOW_TYPE_LEFT)//左边的图像和内容显示
    {
        //画图像
        text_color=QColor(255,255,255);
        this->calc_text_size();
        QRect icon_rect=QRect(begin_width_spacing,begin_height_spacing,icon_width,icon_height);
        painter.setPen(Qt::NoPen);
        painter.setBrush(QBrush(Qt::gray));
        painter.drawPixmap(icon_rect,QPixmap(user_icon_name));

        //画框架
        QPainterPath bubble_path;
        bubble_path.moveTo(begin_width_spacing+icon_width+triangle_width+radius,begin_height_spacing);

        bubble_path.arcTo(begin_width_spacing+icon_width+triangle_width, begin_height_spacing, radius*2, radius*2, 90.0f, 90.0f);

        bubble_path.lineTo(begin_width_spacing+icon_width+triangle_width,begin_height_spacing+text_height_spacing+text_height+text_height_spacing-triangle_height);

        bubble_path.lineTo(begin_width_spacing+icon_width,begin_height_spacing+text_height_spacing+text_height+text_height_spacing+2);

        bubble_path.lineTo(begin_width_spacing+icon_width+triangle_width,begin_height_spacing+text_height_spacing+text_height+text_height_spacing);

        bubble_path.lineTo(begin_width_spacing+icon_width+triangle_width+radius+text_max_width,begin_height_spacing+text_height_spacing+text_height+text_height_spacing);

        bubble_path.arcTo(begin_width_spacing+icon_width+triangle_width+radius+text_max_width - radius, begin_height_spacing+text_height_spacing+text_height+text_height_spacing - radius*2, radius*2, radius*2, 270.0f, 90.0f);

        bubble_path.lineTo(begin_width_spacing+icon_width+triangle_width+radius+text_max_width+radius,begin_height_spacing+radius);

        bubble_path.arcTo(begin_width_spacing+icon_width+triangle_width+radius+text_max_width - radius, begin_height_spacing, radius*2, radius*2, 0.0f, 90.0f);

        bubble_path.lineTo(begin_width_spacing+icon_width+triangle_width+radius,begin_height_spacing);
        QPen pen(QColor(255,255,255));
        pen.setWidth(2);
        painter.setPen(pen);
        painter.setBrush(QBrush(QColor(0,0,0)));
        painter.drawPath(bubble_path);

        painter.setPen(QColor(255,255,255));
        painter.setBrush(QBrush(QColor(255,255,255)));

        painter.drawChord(QRectF(begin_width_spacing+icon_width+triangle_width+radius/4,begin_height_spacing+radius/4,radius*2*3/4,radius*2*3/4), 140*16, 30*16);
        painter.drawChord(QRectF(begin_width_spacing+icon_width+triangle_width+radius/4,begin_height_spacing+radius/4,radius*2*3/4,radius*2*3/4), 100*16, 20*16);

        painter.drawChord(QRectF(begin_width_spacing+icon_width+triangle_width+radius+text_max_width-radius*3/4,begin_height_spacing+radius/4,radius*2*3/4,radius*2*3/4), 0*16, 30*16);
        painter.drawChord(QRectF(begin_width_spacing+icon_width+triangle_width+radius+text_max_width-radius*3/4,begin_height_spacing+radius/4,radius*2*3/4,radius*2*3/4), 50*16, 30*16);

        painter.drawChord(QRectF(begin_width_spacing+icon_width+triangle_width+radius+text_max_width-radius*3/4,begin_height_spacing+text_height_spacing+text_height+text_height_spacing-radius*7/4,radius*2*3/4,radius*2*3/4), 270*16, 30*16);
        painter.drawChord(QRectF(begin_width_spacing+icon_width+triangle_width+radius+text_max_width-radius*3/4,begin_height_spacing+text_height_spacing+text_height+text_height_spacing-radius*7/4,radius*2*3/4,radius*2*3/4), 320*16, 20*16);

        //画文字
        QPen penText;
        penText.setColor(text_color);
        painter.setPen(penText);
        QTextOption option(Qt::AlignLeft | Qt::AlignVCenter);
        option.setWrapMode(QTextOption::WrapAtWordBoundaryOrAnywhere);
        painter.drawText(QRect(begin_width_spacing+icon_width+triangle_width+radius,begin_height_spacing+text_height_spacing,text_max_width,text_height),user_chat_content,option);
    }
    else if(this->show_type==SHOW_TYPE_RIGHT)//右边的图像和内容显示
    {
        //画图像
        text_color=QColor(202,202,202);
        int window_current_width=this->width();
        this->calc_text_size();
        QRect icon_rect=QRect(window_current_width-begin_width_spacing-icon_width,begin_height_spacing,icon_width,icon_height);
        painter.setPen(Qt::NoPen);
        painter.setBrush(QBrush(Qt::gray));
        painter.drawPixmap(icon_rect,QPixmap(user_icon_name));

        //画框架
        QPainterPath bubble_path;
        bubble_path.moveTo(window_current_width-(begin_width_spacing+icon_width+triangle_width+radius),begin_height_spacing);

        bubble_path.arcTo(window_current_width-(begin_width_spacing+icon_width+triangle_width+radius+radius), begin_height_spacing, radius*2, radius*2, 90.0f, -90.0f);

        bubble_path.lineTo(window_current_width-(begin_width_spacing+icon_width+triangle_width),begin_height_spacing+text_height_spacing+text_height+text_height_spacing-triangle_height);

        bubble_path.lineTo(window_current_width-(begin_width_spacing+icon_width),begin_height_spacing+text_height_spacing+text_height+text_height_spacing+2);

        bubble_path.lineTo(window_current_width-(begin_width_spacing+icon_width+triangle_width),begin_height_spacing+text_height_spacing+text_height+text_height_spacing);

        bubble_path.lineTo(window_current_width-(begin_width_spacing+icon_width+triangle_width+radius+text_max_width),begin_height_spacing+text_height_spacing+text_height+text_height_spacing);

        bubble_path.arcTo(window_current_width-(begin_width_spacing+icon_width+triangle_width+radius+text_max_width+radius), begin_height_spacing+text_height_spacing+text_height+text_height_spacing - radius*2, radius*2, radius*2, 270.0f, -90.0f);

        bubble_path.lineTo(window_current_width-(begin_width_spacing+icon_width+triangle_width+radius+text_max_width+radius),begin_height_spacing+radius);

        bubble_path.arcTo(window_current_width-(begin_width_spacing+icon_width+triangle_width+radius+text_max_width+radius), begin_height_spacing, radius*2, radius*2,180.0f, -90.0f);

        bubble_path.lineTo(window_current_width-(begin_width_spacing+icon_width+triangle_width+radius),begin_height_spacing);
        QPen pen(QColor(255,255,255));
        pen.setWidth(2);
        painter.setPen(pen);
        painter.setBrush(QBrush(QColor(0,0,0)));
        painter.drawPath(bubble_path);

        painter.setPen(QColor(255,255,255));

        painter.drawChord(QRectF(window_current_width-(begin_width_spacing+icon_width+triangle_width+radius*7/4),begin_height_spacing+radius/4,radius*2*3/4,radius*2*3/4), 90*16, -30*16);
        painter.drawChord(QRectF(window_current_width-(begin_width_spacing+icon_width+triangle_width+radius*7/4),begin_height_spacing+radius/4,radius*2*3/4,radius*2*3/4), 40*16, -20*16);

        painter.drawChord(QRectF(window_current_width-(begin_width_spacing+icon_width+triangle_width+radius+text_max_width+radius*3/4),begin_height_spacing+text_height_spacing+text_height+text_height_spacing-radius*7/4,radius*2*3/4,radius*2*3/4), 270*16, -30*16);
        painter.drawChord(QRectF(window_current_width-(begin_width_spacing+icon_width+triangle_width+radius+text_max_width+radius*3/4),begin_height_spacing+text_height_spacing+text_height+text_height_spacing-radius*7/4,radius*2*3/4,radius*2*3/4), 220*16, -30*16);

        painter.drawChord(QRectF(window_current_width-(begin_width_spacing+icon_width+triangle_width+radius+text_max_width+radius*3/4),begin_height_spacing+radius/4,radius*2*3/4,radius*2*3/4), 180*16, -30*16);
        painter.drawChord(QRectF(window_current_width-(begin_width_spacing+icon_width+triangle_width+radius+text_max_width+radius*3/4),begin_height_spacing+radius/4,radius*2*3/4,radius*2*3/4), 120*16, -20*16);


        //画文字
        QPen penText;
        penText.setColor(text_color);
        painter.setPen(penText);
        QTextOption option(Qt::AlignLeft | Qt::AlignVCenter);
        option.setWrapMode(QTextOption::WrapAtWordBoundaryOrAnywhere);
        painter.drawText(QRect(window_current_width-(begin_width_spacing+icon_width+triangle_width+radius+text_max_width),begin_height_spacing+text_height_spacing,text_max_width,text_height), user_chat_content,option);

    }
    else if(this->show_type==SHOW_TYPE_TIME)//时间显示
    {
        QPen time_pen;
        time_pen.setColor(time_color);
        painter.setPen(time_pen);

        QTextOption time_option(Qt::AlignCenter);
        time_option.setWrapMode(QTextOption::WrapAtWordBoundaryOrAnywhere);

        QFont time_font = painter.font();
        time_font.setFamily("MicrosoftYaHei");
        time_font.setPointSize(9);
        painter.setFont(time_font);

        painter.drawText(this->rect(),talk_time.toString("yyyy-MM-dd HH:mm:ss"),time_option);
    }
}

void ChatContentCirCular::calc_text_size()
{
    QFontMetrics metrics = QFontMetrics(this->font());

    text_min_width=metrics.width("A")*2;

    qint32 min_width=begin_width_spacing+icon_width+triangle_width+radius+icon_width+begin_width_spacing;

    if(this->width()<min_width+text_min_width)//最小显示即一行只显示一个汉字
    {
        this->setMinimumWidth(min_width+text_min_width);
    }

    text_max_width=this->width()-min_width;//框架的最大文字宽度

    qint32 real_width=metrics.width(this->user_chat_content);

    if(real_width<text_max_width)
    {
        text_max_width=real_width;
        text_height=text_height_spacing+metrics.height()+text_height_spacing>radius*2? metrics.height(): radius*2-text_height_spacing-text_height_spacing ;
    }
    else
    {
        QRect textRect=QRect(0,0,text_max_width,0);
        int flags = Qt::TextWordWrap; // 自动换行
        textRect=metrics.boundingRect(textRect, flags, user_chat_content);
        text_height=text_height_spacing+textRect.height()+text_height_spacing>radius*2? textRect.height(): radius*2-text_height_spacing-text_height_spacing ;
    }

    window_height=text_height_spacing+text_height+text_height_spacing>icon_height? text_height_spacing+text_height+text_height_spacing: icon_height;
    window_height=begin_height_spacing+window_height+begin_height_spacing;
}

UserChatContentInterface.h`

#include <QWidget>
#include <QString>
#include <QDateTime>
#include <QSize>

typedef enum {
    SHOW_TYPE_MIN=1,
    SHOW_TYPE_LEFT,//窗口从左到右显示
    SHOW_TYPE_RIGHT,//窗口从右到左显示
    SHOW_TYPE_TIME //时间显示
}show_type_enum;

class UserChatContentInterface:public QWidget
{
public:
    UserChatContentInterface(QWidget *parent = 0):QWidget(parent){}

    virtual QString getname()=0;//插件类型名称
    virtual qint32 getverison()=0;//插件版本号

    virtual qint32 getwindowHeight()=0;//返回窗口的实际合适高度
    virtual QString getuserIconName()=0;//返回用户的图像名称
    virtual QString getuserChatContent()=0;//返回用户聊天内容
    virtual QDateTime gettalkTime()=0;//返回聊天时间

    virtual void setuserIconName(QString namestr)=0;//设置用户的图像名称
    virtual void setuserChatContent(QString usertext)=0;//设置用户聊天内容
    virtual void settalkTime(QDateTime talktime)=0;//设置聊天时间

    virtual void run(show_type_enum type)=0;//开始运行，需要绘制，即开始绘制
};

标签：begin,Qt,text,spacing,height,width,radius,聊天,气泡
来源： https://blog.csdn.net/qq_46495964/article/details/113823706

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有