目录
简述
1. 设置文字颜色
2. 设置背景色
3. 同时设置前景色、背景色
4. 实线边框
5. 虚线边框
6. 以点成线
7. 3D边框
8. 圆角边框
9. 圆角填充边框
10. 设置渐变背景色
11. 下划线
12. 删除线
13. 设置间距
14. 设置字体、字号
以上设置的样式效果：
模拟阅读效果
简述
本篇主要是整理QLabel相关的样式表。
相关阅读：
Qt Label控件用法（二）_qlabel点击事件-CSDN博客
Qt Label控件用法（一）_qlabel 多行-CSDN博客
1. 设置文字颜色
这里主要是设置标签文本的前景色。
QString style;
//改变文字颜色
style = "color: red;";
createLabel(layout, style);
2. 设置背景色
这里主要是设置标签文本的背景色。
//改变背景色
style = "background: yellow;";
createLabel(layout, style);
3. 同时设置前景色、背景色
这里主要是同时设置标签文本的前景色与背景色。
//同时改变前景色、背景色
style = "background: #333333; color: #999999;";
createLabel(layout, style);
4. 实线边框
这里是改变QLabel边框的样式表。
style = "border: 2px solid #666666;";
createLabel(layout, style);
5. 虚线边框
这里是改变QLabel边框的样式表。
style = "border: 2px dashed #666666;";
createLabel(layout, style);
6. 以点成线
这里是改变QLabel边框的样式表。
style = "border: 2px dotted #666666;";
createLabel(layout, style);
7. 3D边框
这里是改变QLabel边框的样式表。
style = "border: 8px groove #666666;";
createLabel(layout, style);
8. 圆角边框
这里是改变QLabel边框的样式表。
style = "border: 2px solid #666666; border-radius: 8px;";
createLabel(layout, style);
9. 圆角填充边框
这里是改变QLabel边框的样式表。
style = "border: 2px solid #666666; border-radius: 8px; background: #777777;";
createLabel(layout, style);
10. 设置渐变背景色
这里是改变QLabel背景色的样式表。
style = "background: qlineargradient(x1:0, y1:0 ,x2:1 ,y2:0 stop:0 #666666 ,stop:1 #CCCCCC);";
createLabel(layout, style);
线性渐变方向：
x1y1x2y2方向描述0010从左到右0001从上到下0011从左上角到右下角
将x、y数据反转过来，渐变的颜色也会反转。stop可以设置多个，取值范围0-1，有时候需要表现出一些层次感，追加stop:0.5、stop:0.7颜色值。
11. 下划线
style = "text-decoration: underline;";
createLabel(layout, style);
12. 删除线
style = "text-decoration: line-through;";
createLabel(layout, style);
13. 设置间距
style = "padding-left: 60px;";
createLabel(layout, style);
padding-left是设置QLabel文字与左边框的相对距离。同理，padding-right、padding-top、padding-bottom设置的是文字与右边框、上边框、下边框的相对距离。
14. 设置字体、字号
这里是改变QLabel字体和字号的样式表。
style = "font-family: 'Microsoft Yahei'; font-size: 16pt; font-weight: bold;";
createLabel(layout, style);
以上设置的样式效果：
模拟阅读效果
#include "mainwindow.h"
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
layout = new QVBoxLayout;
//实现章节效果
createChapter(layout);
ui->centralwidget->setLayout(layout);
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::createChapter(QVBoxLayout* layout)
{
//实现章节效果
QString style = "border: none; border-left: 8px solid #006dff; padding-left: 10px;font-family: 'Microsoft Yahei'; font-size: 16pt; font-weight: bold;";
QLabel *label = new QLabel(this);
label->setText("Chapter 1");
label->setStyleSheet(style);
layout->addWidget(label);
//添加背景图片
QLabel *label2 = new QLabel(this);
label2->setWordWrap(true);
style = "border-image: url(:/bg.jpeg);"
"color: #333333;"
"font-family: 'Microsoft Yahei'; "
"font-size: 10pt;";
label2->setStyleSheet(style);
label2->setText(" QLabel is used for displaying text or an image. No user interaction functionality is provided. "
"The visual appearance of the label can be configured in various ways, "
"and it can be used for specifying a focus mnemonic key for another widget.\n"
" When the content is changed using any of these functions, any previous content is cleared."
"By default, labels display left-aligned, vertically-centered text and images, "
"where any tabs in the text to be displayed are automatically expanded. However, "
"the look of a QLabel can be adjusted and fine-tuned in several ways."
);
layout->addWidget(label2);
layout->addStretch();
}
border-image：将图片拉伸，适应QLabel尺寸。background-image：类似贴瓷砖一样，图片尺寸不够，重复贴图；尺寸过大，裁剪贴图。
运行效果：