qt实现简单的聊天页面(纯页面)

 我是模仿qq页面来做的。这是效果图,很简陋。

qt实现简单的聊天页面(纯页面)_第1张图片

 基础的一些部分都比较简单,写一些对我来讲是难点或者有意思的东西吧,记录一些。

1.

 

这里的'开心‘是使用painter画上去的,因为右边已经有图标了,所以不太好使用QLabel来进行绘制。

    QPainter painter(this);
    QFont font;
    font.setFamily("方正小标宋简体");
    font.setPointSize(16);
    painter.setFont(font);
    painter.setPen(QColor(255,255,255));
    if(!tit.isNull())painter.drawText(rect(),Qt::AlignCenter,tit);

 2.重头戏是关于已经发出的消息的绘制。qt实现简单的聊天页面(纯页面)_第2张图片

我们需要绘制的有四部分

头像,小三角形,文字,圆角边框

所以我们需要明确知道它们的位置以及大小。

其中头像,小三角形的位置和大小都是固定的。

const int space=20,w_icon=50,w_tri=15,rect_space=20,h_shang=22;

qt实现简单的聊天页面(纯页面)_第3张图片 

 h_shang是圆角矩形与最上边的距离。

rect_space是文本框与圆角矩形框的间距。

w_tri是三角形的宽。

w_icon是头像的宽和高。

space是最右边的空白的宽度。

而文字的宽和高都不固定。

首先确定文本的宽:

 文本的最大宽度为

text_w1=width()-(space+w_icon+w_tri+rect_space)*2

(我们是为左边也留了头像,空白,三角形的空间的)

然而文本中可能有换行符'\n',如下面的情况

qt实现简单的聊天页面(纯页面)_第4张图片

 因此我们要从换行的角度考虑文本的最大宽度

    QStringList list=inform.split('\n');
    int max=0;
    for(int i=0;i

上面的max即文本一行最多有几个字符

而文本宽度=字符数*字符宽度

我们使用QFontMetrics来获取一个字符的宽度

    QFont font;
    font.setFamily("方正小标宋简体");
    font.setPointSize(11);
    QFontMetrics fontMetrics(font);
    int text_w1=fontMetrics.width('连')*max;//静态:根据一行最多几个字来获取文本宽度

这样,比较文本的两个最大宽度,去最小值,即为文本宽度

    text_w=qMin(text_w1,text_w2);

之后根据文本宽度来推算文本高度

高度=行数*单个字符高度

    int line_num=text_w/fontMetrics.width('连');

 使用line_num来得到一行最多有几个字符。

文本被切成了许多部分,每个部分长度为str.length()

    int row=0;
    for(int i=0;i=文字个数*长度
        QString str=list.at(i);
        //str.length()=line_num*row+剩余
        //共row+1行
        if(str.length()%line_num==0)row+=str.length()/line_num;
        else row+=(str.length()/line_num+1);
        if(str.length()==0)row++;//字符串长度为0,换行符
    }
    //qDebug()<

text_h即为文本高度

已知文本宽高,那么圆角矩形宽高也就知道了

 它们仅仅中间有点边距。

至此,所以的需要的数据就有了。

3.关于改变最外边宽度时,如何使文本,QListWidgetItem,对应的widget自适应

qt实现简单的聊天页面(纯页面)_第5张图片

qt实现简单的聊天页面(纯页面)_第6张图片 

 我在画聊天记录的widget的paintEvent(,,,)中

发射一个带widget的高度的信号

emit send_h(text_h+(rect_space+h_shang)*2);

把它传递给对应的listWidgetItem(自定义了改变高度的槽函数)

connect(one,&inform_item::send_h,item,&listWidgetitem::setHeight);

你可能感兴趣的:(Qt,qt,开发语言)