写点什么

QT|QLabel 显示多行文本过多后显示省略号

  • 2022 年 7 月 20 日
  • 本文字数:1723 字

    阅读完需:约 6 分钟

这几天做了这样一个功能:使用 QLabel 控件显示文本,当文本过多后出现省略号。

以前我们只是对一行文本过多时出现省略号进行设置过。

现在,我想要实现的效果如下所示:

该如何实现呢?

接下来,我来介绍下我的一些思路,但是只有最后一个能成功。也是为大家踩了不少坑!

实现思路

思路 1:

刚开始我才用 QLabel 控件,设置自动换行后,想着可以获取换行后的文本行数,结果发现,QLabel 控件无法获取。

后来,又想到,能不能截取仅仅是显示出来的文本呢?

"elidedText"这个函数只能对一行进行省略设置,但是多行的该怎么办呢?

想破脑袋都没有想到,这个想法暂时被搁置了。

思路 2:

因为在 MFC 框架中 CEdit 控件可以获取显示的行数,那么,对于 QT 框架,编辑框控件是不是给可以做到呢?

假设可以获取显示行数,那么只需要获取前两行的文本内容就可以了。

想的很理想,结果实现不了!

尝试了 Qt 框架中的所有编辑框控件,包括了:QPlainText、QTextBrowser、QTextEdit 都无法获取显示的行数。

难道是因为我传入的字符串没有"\n"这种换行符吗?

资料上显示都是使用"document()->lineCount()"的方式获取行数,但是每次显示出来的结果都是 1。又有人说这个 API 就是个鸡肋。

不管如何,反正用编辑框控件就是无法实现,准备放弃!

思路 3:

昨天突然灵光一现,想到了一种特别笨的方式,但是我觉得应该可以实现。

结果,果真实现了 QLabel 控件多行文本的时候最后出现省略号

下面,我就来重点讲解我的笨方法吧!

实现方法

不都说,不管黑猫白猫能抓住老鼠的都是好猫,只要能实现这种功能,都是好方法。这个方法也是我查阅几天资料之后的独一份,所以说小爱心赶紧点起来,省的下次忘记了!

重点来了!!!

我们明白正常情况下,QFontMetrics::elidedText 只能获取一行的文本,并且在最后出现省略号

例如下面显示的效果:


那么多行呢?大家请跟着我的步骤来,肯定会实现文章开始图片的效果的!

QString qsDescribe = "这里的文本很长!";
复制代码

"qsDescribe"中存放了很长的文本内容,我们只想要显示两行内容。

第一步:获取第一行文本内容

//获取第一行文本内容QString qsLine1 = fontMetrics.elidedText(qsDescribe, Qt::ElideRight, nShowWidth);
复制代码

nShowWidth:用于当前一行的宽度,用于承载显示文本

第二步:去除第一行文本的"..."

经过第一步骤之后,我们获取的文本是带有"..."的,这是上面的函数自动拼接的,我们想要获取第一行的实际数据,就必须去除系统给我们拼接的内容

qsLine1 = qsLine1.left(qsLine1.size() - 1);
复制代码

第三步:获取第一行的实际文本长度

//获取第一行显示的文本长度int nLine1Count = qsLine1.length();
复制代码

第四步:获取剩余文本内容

//获取剩余文本内容QString qsRemainingContent = qsDescribe.mid(nLine1Count + 1, qsDescribe.length() - nLine1Count);
复制代码


这里,我们需要获取除去第一行之外的文本内容,用于截取第二行文本显示

第五步:获取第二行文本内容

//获取第二行文本内容QString qsLine2 = fontMetrics.elidedText(qsRemainingContent, Qt::ElideRight, nShowWidth);
复制代码


在获取第二行文本时,也需要使用同样的宽度。

第六步:文本拼接

//第一行文本与第二行文本拼接QString qsNewContent = qsLine1 + qsLine2;
复制代码


这里文本拼接指的是:第一行截取出的文本 + 第二行截取出的文本

因为我只是做了两行文本显示后显示省略号,所以到这里,获取的"qsNewContent"就是实际要显示的内容啦!

第七步:设置文本显示及风格

//设置文本显示ui.labContent->setAlignment(Qt::AlignVCenter | Qt::AlignHCenter);ui.labContent->setFixedSize(QSize(nShowWidth+10, 70));ui.labContent->setText(qsNewContent);ui.labContent->setWordWrap(true); //自动换行
复制代码


到这里,就可以实现显示两行文本,并在最后出现省略号的功能了。

但是,有一点很重要!!!

1:我们在使用该控件时,一定要先设置控件的风格,也就是设置"setStyleSheet"

2:一定要先设定要显示区域。也就是说,在实现方法之前,一定要固定好显示区域

3:当前控件的这种设置,一定不能放到构造中实现,否则实现出来的效果有一定的偏差。最好是将 widget 创建出来之后在进行设置。

总结

到这里,用 QLabel 静态文本控件显示多行文本之后出来省略号的方法就介绍完了,希望对大家有帮助!

我是中国好公民 st,一名 C++开发程序媛~

发布于: 刚刚阅读数: 4
用户头像

书山有路勤为径,学海无涯苦作舟 2022.07.01 加入

擅长语言:C++ 涉及语言:Python

评论

发布
暂无评论
QT|QLabel显示多行文本过多后显示省略号_qt_中国好公民st_InfoQ写作社区