写点什么

Qt|QLable 多行展示时更改行间距

  • 2022 年 7 月 25 日
  • 本文字数:1371 字

    阅读完需:约 4 分钟

前沿

这段时间工作告一段落,想要优化下一些不完美的功能,比如文本行间距这个功能。


例如:QLabel 控件展示文本时,当文本内容过多时,自动换行后的文本行间距真的是太紧密了,在美观上会有一点点瑕疵。所以,为了优化这个功能,进而实现这种可以设置行间距的功能。

开发环境:WIN10 + VS2017 + Qt5.14.2 64 位

效果如下:



文字的字体越大,行间距越小,在这里我设置了三种字体大小,对不同的字体分别设置行间距。


接下来,具体的实现这种功能吧~

功能实现

小字体:22;中字体:36;大字体 50


因为需要展示较长文本内容,所以,第一步我们需要让 QLabel 展示的文本可以自动换行

1:文本自动换行

设置展示文本的固定宽度,此时的固定宽度是 800


在使用 QLabel 的时候,想要让文本自动换行,必须要控制每一行的固定宽度,否则控件是无法知道如何换行的。


ui.labContent->setFiexedWidth(800);
复制代码


设置需要展示的文本内容


ui.labContent->setText(qsContent);
复制代码


设置自动换行以及自动识别文本内容的大小


ui.labContent->setWordWarp(true);ui.labContent->adjustSize();
复制代码


到这里,简单的文本自动换行功能就已经实现了。但是,还存在一个小小的问题,当我们设置的文本内容越多,并且字体越大时,行与行之间的间距就会越紧凑。美观上看的很不好看,那么文本的行间距这个时候就起到了一定的作用。

2:文本字体设置

前面效果已经展示了有三种字体风格,小号、中号、大号


设置字体风格


//获取:QLabel默认的字体样式QFont fontContent = ui.labContent->font();//设置:字体样式:微软雅黑fontContent->setFamily("Microsoft YaHei");//设置:字体大小:22fontContent->setPixelSize(22);//设置:字体颜色值QPalette peContent;peContent.setColor(QPalette::WindowText, QColor(51, 51, 51));ui.labContent->setPalette(peContent);//字体绑定ui.labContent->setFont(fontContent);
复制代码


当我们需要更换字体大小时,只需要替换 setPixelSize 中的值即可,具体的字体风格设置,我在之前的文章中有记载,可以翻阅查看,这里不再详细说明啦~

3:行间距设置

到了最最重要的一个环节了,如何设置行间距了~


在我实现这个功能的时候,也是尝试了很多方法,但是都无法设置成功,最后我发现在 Qt 中没有一个明确的函数来实现这个功能的,欲哭无泪呀,同志们!查了 Qt 资料才知道,想要实现行间距这个功能,需要效仿 html 的风格才可以。


想我一个 C++开发现在居然要学习 html 的风格设置了,挺好,哈哈~


设置行间距的高度


<p style='line-height:40px;'></p>
复制代码


设置了行间距之后会发现,之前设置的文本自动换行功能居然不生效了!


在 html 中我们想要让文本自动换行,最好的方式需要设置文本的宽度,填充满整个 800 的宽度


<p style='width:100%;'></p>
复制代码


最后,需要注意的是,在 html 中<p>标签是不识别首行缩进的空格的,想要展示出首行缩进的风格,必须要手动设置


<p style='white-space: pre-wrap'></p>
复制代码


总体设置


QString qsShow = "<p style='line-height:40px; width:100% ; white-space: pre-wrap; '>" + qsContent + "</p>";
复制代码


到这里,设置文本行间距的功能就实现了,是不是很奇特~

总结

使用 html 的方式设置行间距时,不仅适用于 QLabel 控件,像是 QLineEdit、QTextBrower 等,只要是可以展示文本内容的都是适用的,看来,Qt 还真是神奇哈哈!


具体实现,如下:根据字体不同设置不同行间距


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

发布于: 21 小时前阅读数: 15
用户头像

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

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

评论

发布
暂无评论
Qt|QLable多行展示时更改行间距_qt_中国好公民st_InfoQ写作社区