QT-QSS基础教程

转载：https://blog.csdn.net/Dasis/article/details/124644398

本篇介绍什么是样式表，讨论如何使用Qt样式表Qss修改应用程序外观，并通过实例进行讲解。

了解HTML的同学都知道，一般在HTML中我们把样式表叫做CSS，在Qt中我们称之为QSS。QSS和CSS并不完全等同，语法完全类似，定义上存在一些差别。

QSS是Qt程序界面中用来设置控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性，用于美化UI界面。实现界面和程序的分离，快速切换皮肤。
QSS最大的优点就是简单便捷，我们可以通过它快速实现应用程序的外观界面。

QPushButton {color: red} //代表QPushButton 颜色为红色

   
   

2）几个选择器可以指定相同的声明，使用逗号“，”来分隔选择器

 //代表QPushButton ，QLineEdit，QComboBox 颜色为红色
QPushButton，QLineEdit，QComboBox  {color: red}

   
   

3）声明部分的规则有多个属性值时包含在花括号{}中，以分号;分隔，属性之间在QSS之间是不区分大小写的

QPushButton {color: red;background-color:white;}

   
   

Qt中设置样式表最主要的函数为setStyleSheet

通过实例来介绍如何去设置Qt的样式表，
1）新建工程

2）拉入一个按钮，此时编译运行之后，按下按钮其字体和颜色都是没有发生变化的。


3）通过样式表使得按下按钮后其字体和颜色发生变化。

（1）修改按钮中字体颜色
ui->pushButton->setStyleSheet(QString("QPushButton{color:rgb(255,0,0)}"));实现按钮中的字体显示为红色

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->pushButton->setStyleSheet(QString("QPushButton{color:rgb(255,0,0)}"));
}

   
   

运行结果：

（2）设置按钮按下后的颜色变化
以下代码中：QPushButton:pressed表示按钮按下后，颜色为background-color:rgb(200,200,200);，border-style:inset;表示内边框；color:rgb(0,255,0);字体颜色为color:rgb(0,255,0);，其中“\”代表本行写不下，下行仍为同一行。

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->pushButton->setStyleSheet(QString("QPushButton:pressed{ \
                                          background-color:rgb(200,200,200);\
                                          border-style:inset;\
                                          color:rgb(0,255,0);\
                                          }\
                                          QPushButton{color:rgb(255,0,0)}"));
}

   
   

运行结果：未按下按钮结果与上步一致，按下后字体颜色为绿色

上述的方法是使用setStyleSheet 函数实现QSS的方法，下来将会先介绍样式表的属性指向，然后利用QtCreate实现上述内容，最终探讨两种实现方法的区别。

以下属性值熟悉有什么内容即可，在使用时再去具体查询使用
1）QSS文本属性

2）QSS背景属性

3）QSS边框属性

4）QSS Box属性
我们将控件的一个区域称为Box，这个Box的内容如果溢出了如何处理，均使用Box属性进行设置

5）QSS 字体属性

6）QSS 外边框属性
控件之间的间距可以使用外边框属性设置

7）QSS 内边框属性

8）QSS 位置属性

#if 0
    ui->pushButton->setStyleSheet(QString("QPushButton:pressed{ \
                                          background-color:rgb(200,200,200);\
                                          border-style:inset;\
                                          color:rgb(0,255,0);\
                                          }\
                                          QPushButton{color:rgb(255,0,0)}"));
 #endif

   
   

2）在UI中选择按钮，右键选择“改变样式表”，将样式表中设置的内容粘贴至“编辑样式表”中


运行之后得到的效果与使用setStyleSheet函数设置样式表一样

在“编译输出”位置查看

UI文件可以通过uic.exe来生成ui_widget.h，通过以下的构造函数中的ui->setupUi(this);加载界面

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
 }

   
   

ui->setupUi(this);其实就是在ui_widget.h中，代开ui_widget.h进行查看

对应内容如下：

#include <QtWidgets/QWidget>

QT_BEGIN_NAMESPACE

class Ui_Widget
{
public:
    QPushButton *pushButton;

    void setupUi(QWidget *Widget)
    {
        if (Widget->objectName().isEmpty())
            Widget->setObjectName(QStringLiteral("Widget"));
        Widget->resize(475, 384);
        pushButton = new QPushButton(Widget);
        pushButton->setObjectName(QStringLiteral("pushButton"));
        pushButton->setGeometry(QRect(150, 160, 112, 34));
        pushButton->setStyleSheet(QLatin1String("QPushButton:pressed{ background-color:rgb(200,200,200);\n"
"                     border-style:inset;\n"
"                     color:rgb(0,255,0);\n"
"}\n"
"QPushButton{color:rgb(255,0,0)}"));

        retranslateUi(Widget);

        QMetaObject::connectSlotsByName(Widget);
    } // setupUi

    void retranslateUi(QWidget *Widget)
    {
        Widget->setWindowTitle(QApplication::translate("Widget", "Widget", Q_NULLPTR));
        pushButton->setText(QApplication::translate("Widget", "PushButton", Q_NULLPTR));
    } // retranslateUi

};

namespace Ui {
    class Widget: public Ui_Widget {};
} // namespace Ui

QT_END_NAMESPACE

#endif // UI_WIDGET_H

可以看到工具自动生成代码如下，是与我们自己写的代码实际上是一样的。

        pushButton->setStyleSheet(QLatin1String("QPushButton:pressed{ background-color:rgb(200,200,200);\n"
"                     border-style:inset;\n"
"                     color:rgb(0,255,0);\n"
"}\n"
"QPushButton{color:rgb(255,0,0)}"));

 
 

可以看出两种方法都是使用setStyleSheet实现的，原理上是一样的。

样式表除了上述作用，最大的作用是改变应用的皮肤
1）起始页面的qss文件的加载

2）通过按钮实现不同样式的切换
实现方法，通过按钮实现不同样式表的加载




9.学习视频地址：
【Qt学习系列】11.Qt样式表Qss
【Qt学习系列】11.Qt样式表Qss（2）