Qt基础：QLabel控件样式表大全

Quz

已于 2025-01-17 12:09:26 修改

阅读量793

点赞数 5

分类专栏： Qt 开发经验文章标签： qt c++ ui

于 2024-11-08 20:00:00 首次发布

本文链接：https://blog.youkuaiyun.com/u011186532/article/details/143613444

版权

Qt 开发经验专栏收录该内容

29 篇文章

订阅专栏

简述

本篇主要是整理QLabel相关的样式表。

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);

线性渐变方向：

x1	y1	x2	y2	方向描述
0	0	1	0	从左到右
0	0	0	1	从上到下
0	0	1	1	从左上角到右下角

将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();
}