QT学习_07_样式表的初步学习

目录

1 样式表语法基础

2 举例说明

3 方箱模型

4 全局/局部的设定

 5 背景图片设定

6 处理伪状态

7 处理子控件

后续：

---

1 样式表语法基础

Qwidget::setStyleSheet()或者QApplication setStyleSheet()

selector {attribute: value}

选择器  {属性: 值}

比如:

QLabel {color:red; …}

也可以同时设定多个比如

QCheckBox, QComboBox, QLabel {
 
color:red;
 
background-color: white;
 
font:bold:
 
…
 
}

2 举例说明

#include "widget.h"
#include "ui_widget.h"
 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->label->setStyleSheet("QLabel{"
                             "color:red;"
                             "background-color:rgb(0,0,255);"
                             "}");
 
}
 
Widget::~Widget()
{
    delete ui;
}
 

运行结果

3 方箱模型

下面一张图就能说明

4 全局/局部的设定

话不多说，看代码注释和运行结果

#include "widget.h"
#include "ui_widget.h"
 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 全局有效
    this->setStyleSheet("QLabel{"
                             "color:red;"
                             "background-color:rgb(0,0,255);"
                             "}");
    // 局部修改
    ui->label->setStyleSheet("QLabel{"
                             "color:white;"
                             "background-color:black;"
                             "}");
 
}
 
Widget::~Widget()
{
    delete ui;
}

运行结果

 5 背景图片设定

#include "widget.h"
#include "ui_widget.h"
 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 全局有效
    this->setStyleSheet("QLabel{"
                             "color:red;"
                             "background-color:rgb(0,0,255);"
                             "}");
    // 局部修改
 
 
    /*
    // background-image:url(:/img/Image/Image1.jpg) 显示不全，复制平铺
    ui->label->setStyleSheet("QLabel{"
                             "color:white;"
                             "background-color:black;"
                             "background-image:url(:/img/Image/Image1.jpg)"
                             "}");
    */
 
 
 
 
 
    // "border-image:url(:/img/Image/Image1.jpg)" 可伸缩
    ui->label->setStyleSheet("QLabel{"
                             "color:white;"
                             "border-image:url(:/img/Image/Image1.jpg)"
                             "}");
 
    // "border-image:url(:/img/Image/Image1.jpg) 100 100 100 100 strech strech" 可裁剪
    /*
    ui->label->setStyleSheet("QLabel{"
                             "color:white;"
                             "border-image:url(:/img/Image/Image1.jpg) 100 100 100 100 strech strech"
                             "}");
    */
 
}
 
Widget::~Widget()
{
    delete ui;
}
 

运行结果

6 处理伪状态

控件有各种状态， 当控件的状态改变之后，可以同时修改它的Style

#include "widget.h"
#include "ui_widget.h"
 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->pushButton->setStyleSheet("QPushButton {"
                                  "border: 2px outset green;"
                                  "}"
                                  "QPushButton:hover {"
                                   "border: 2px outset red;"
                                   "}"
                                  "QPushButton:pressed {"
                                   "border: 2px outset black;"
                                   "}"
                                  );
 
}
 
Widget::~Widget()
{
    delete ui;
}
 
 

 运行结果

鼠标放上去后

按下鼠标后

注意：各种控件都有各种伪状态，如何去找到伪状态呢？

打开QT的帮助文档：搜索 setStyleSheet👉Qt Style Sheets👉 Qt Style Sheets Reference👉List of Pseudo-States

里面有各种伪状态的介绍。

7 处理子控件

子控件，比如下拉菜单那个三角形就是下拉菜单的一个子控件。 你如果想要单独修改它的一些style。 那就需要用子控件的方式。

注意子控件的样式修改是两个:, 伪状态的样式修改是一个:

另外，我们对于子控件的伪状态也是可以指定特定的样式的

#include "widget.h"
#include "ui_widget.h"
 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->pushButton->setStyleSheet("QPushButton {"
                                  "border: 2px outset green;"
                                  "}"
                                  "QPushButton:hover {"
                                   "border: 2px outset red;"
                                   "}"
                                  "QPushButton:pressed {"
                                   "border: 2px outset black;"
                                   "}"
                                  );
     ui->comboBox->setStyleSheet("QComboBox::drop-down {"
                                 "background-color:red;"
                                 "}"
                                 "QComboBox::drop-down:hover {"
                                    "background-color:green;"
                                    "}"
                                 );
 
}
 
Widget::~Widget()
{
    delete ui;
}
 

运行结果：

正常的下拉菜单控件的长这样子的

当我添加了子控件样式代码后

当我添加了子控件的伪状态样式代码后，

注意：很多控件都包含子控件，那我怎么知道这控件它有哪些子控件可以单独修改style呢？

打开QT的帮助文档：搜索 setStyleSheet👉Qt Style Sheets👉 Qt Style Sheets Reference👉 List of Sub-Controls

里面有各种子控件的介绍。

后续：

样式表肯定不能直接这么写在构造函数里面，那么多样式表看着心就堵，所以下一篇文章考虑如何把样式表用单独的文件，或者多个不同的文件来写。参考链接：Qt学习_08_用独立的文件存放样式表_样式表文件-CSDN博客

感谢您的阅读，欢迎留言讨论、收藏、点赞、分享。