我是模仿qq页面来做的。这是效果图,很简陋。
基础的一些部分都比较简单,写一些对我来讲是难点或者有意思的东西吧,记录一些。
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);
我们需要绘制的有四部分
头像,小三角形,文字,圆角边框
所以我们需要明确知道它们的位置以及大小。
其中头像,小三角形的位置和大小都是固定的。
const int space=20,w_icon=50,w_tri=15,rect_space=20,h_shang=22;
h_shang是圆角矩形与最上边的距离。
rect_space是文本框与圆角矩形框的间距。
w_tri是三角形的宽。
w_icon是头像的宽和高。
space是最右边的空白的宽度。
而文字的宽和高都不固定。
首先确定文本的宽:
文本的最大宽度为
(我们是为左边也留了头像,空白,三角形的空间的)
然而文本中可能有换行符'\n',如下面的情况
因此我们要从换行的角度考虑文本的最大宽度
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自适应
我在画聊天记录的widget的paintEvent(,,,)中
发射一个带widget的高度的信号
emit send_h(text_h+(rect_space+h_shang)*2);
把它传递给对应的listWidgetItem(自定义了改变高度的槽函数)
connect(one,&inform_item::send_h,item,&listWidgetitem::setHeight);