Qt Style Sheets设定控件的样式

一、setStyleSheet的基本使用

1、如带有6个Button控件和一个widget控件的Ui

2、在main函数中对整个应用的Button控件进行设定格式

• 作用范围是整个应用程序的Button控件

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Qt_Practice04 w;
    // w为整个应用的程序
    w.setStyleSheet("QPushButton {background-color:rgba(0,200,200,0.6); font-size:30px;}");
    w.show();

    return a.exec();
}

• 结果如下图所示，所有的6个Button都会被设置成指定的属性
  

3、对widget控件下的三个Button控件进行设置

• 此时widget为三个Button的父控件，所以将对该父控件下的所有QPushButton子控件起作用。此时需要指定父控件对象进行操作，代码如下：

ui.widget->setStyleSheet("QPushButton {background-color:rgba(0,200,200,0.6); font-size:30px;}");

• 运行结果如下：
  

4、对指定的单个Button进行设定

• 在不同的文件中有不同的设定方式，具体如下：

#include "Qt_Practice04.h"
#include <QPushButton>

Qt_Practice04::Qt_Practice04(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);

    //1、直接通过该控件的名称来进行控制,以下两种写法相同：
    ui.btn06->setStyleSheet("QPushButton {background-color:rgba(0,200,200,0.6); font-size:30px;}");
    ui.btn06->setStyleSheet("background-color:rgba(0,200,200,0.6); font-size:30px;");

    //2、在大范围内通过该控件具体名称，用ID选择器来进行特殊指定。类名与控件名之间用'#'进行连接
    ui.widget->setStyleSheet("QPushButton#btn06 {background-color:rgba(0,200,200,0.6); font-size:30px;}");
}

• 运行结果是只有btn06被设置对应的属性
  

注意：setStyleSheet() 函数的使用

• 设置对象参数的属性如果被{}包括在内时，则{}前面一定要有类或对象的名称，否则Qt无法解析。
• 当属性前没有加对象名或类名时，则直接以属性为字符串内容即可起作用。

ui.btn06->setStyleSheet("{background-color:blue;}");是无效的，因为{}前没有对象名。两种改进方式如下：
① 直接以属性值为字符串，不加其它内容：ui.btn06->setStyleSheet("background-color:blue;");
② 在{}前加上类名QPushButton，如：ui.btn06->setStyleSheet("QPushButton {background-color:blue;}");

---

二、不同状态下样式切换

在ui的使用中，常常需要让界面上的控件在不同状态下显示出不同的样式。如让button、label等控件在正常、悬浮、按压状态下分别显示出不同给状态。常用的有两种方式来进行实现：

• 通过伪状态选择器(Pseudo-States)的属性来进行设置。该方式较为简单方便。
• 通过事件来进行设置。不同动作会触发对应的事件，来改变控件的样式。

1、Qt 中常用的Pseudo-States属性

1. :hover：鼠标悬浮在该控件上
2. :pressed：使用鼠标按压该控件时

2、应用状态

• 对于具有点击属性的QPushButton控件可以直接使用伪状态选择器来改变状态；
• 对于不具有点击属性的控件，如QLabel、QWidget、QLine Edit等控件没有:pressed这一伪状态，因此点击按压状态需要通过事件来进行处理，但是正常状态和:hover状态依然可以通过伪状态选择器来进行设置。

---

三、QWidget,QLabel,QPushButton

（1）、不同状态的情况：

（2）、代码及结果

#include "Pr03_SetQtStyle.h"

// button正常状态
#define  BTN_N   QString("QPushButton {border-image: url(:/Pr03_SetQtStyle/Resources/Img/Normal.png);}")
// button在鼠标悬浮状态
#define  BTN_H   QString("QPushButton:hover {border-image: url(:/Pr03_SetQtStyle/Resources/Img/Hover.png);}")
// button在鼠标按压状态
#define  BTN_P   QString("QPushButton:pressed {border-image: url(:/Pr03_SetQtStyle/Resources/Img/Pressed.png);}")


// QLabel的三中状态
#define  LAB_N   QString("QLabel#label01 {border-image: url(:/Pr03_SetQtStyle/Resources/Img/Normal.png);}")
#define  LAB_H   QString("QLabel#label01:hover {border-image: url(:/Pr03_SetQtStyle/Resources/Img/Hover.png);}")
// QLabel的pressed状态需要通过事件特殊处理，其没有按压的伪状态
#define  LAB_P   QString("QLabel#label01 {border-image: url(:/Pr03_SetQtStyle/Resources/Img/Pressed.png);}")

Pr03_SetQtStyle::Pr03_SetQtStyle(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);

    ui.btn->setStyleSheet(BTN_N + BTN_H + BTN_P);

    ui.label01->setStyleSheet(LAB_N + LAB_H);

}

void Pr03_SetQtStyle::mousePressEvent(QMouseEvent *event)
{
    if (event->button() == Qt::LeftButton)
    {
        if ((event->x() > ui.label01->x()) && (event->x() < ui.label01->geometry().right())
            && event->y()>ui.label01->y() && event->y()<ui.label01->geometry().bottom())
        {
            ui.label01->setStyleSheet(LAB_P);
        }
    }

    QWidget::mousePressEvent(event);
}

void Pr03_SetQtStyle::mouseReleaseEvent(QMouseEvent *event)
{
    if (event->button() == Qt::LeftButton)
    {
        if ((event->x() > ui.label01->x()) && (event->x() < ui.label01->geometry().right())
            && event->y() > ui.label01->y() && event->y() < ui.label01->geometry().bottom())
        {
            ui.label01->setStyleSheet(LAB_N+LAB_H);
        }
    }

    QWidget::mousePressEvent(event);
}