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

前沿

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

例如：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");
//设置：字体大小：22
fontContent->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 = &quot;<p style='line-height:40px; width:100% ; white-space: pre-wrap; '>&quot; + qsContent + &quot;</p>&quot;;


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

总结

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

具体实现，如下：

根据字体不同设置不同行间距

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