Qt6教程之三(2) QT使用qss

QSS是Qt Style Sheets的缩写，中文含义是Qt样式表，它用来自定义控件外观的机制。QSS与网页中使用的CSS非常相似，可以把QSS看作是CSS在Qt领域领域的定制版本。

QSS的语法规则

选择器 {  规则定义1； 规则2； 规则n ; } ； 

如下示例：

QPushButton {
    border: 2px solid $border;
    border-radius: 9px;
    padding: 1px 10px;
    min-width: 80px;
    min-height: 34px;
}

QPushButton表示选择器，指定了QPushButton及QPushButton的子类均会受到影响，这是与CSS中不同的地方。在Qt中所有的控件在使用QSS时均遵循这个规则。

QSS的选择器类型

1.通配选择器：*  ; 匹配所有的控件
2.类型选择器：如QPushButton ，其含义是匹配所有QPushButton和其子类实例；
3.属性选择器：如QPushButton[color="red"]; 
4.类选择器：  .QPushButton ;  匹配所有QPushButton的实例；
5.ID选择器：  #button; 匹配所有id为button的控件实例；
6.后代选择器： 如QDialog QPushButton ; 所有QDialog容器中包含的QPushButton；
7.子选择器：  如QDialog > QPushButton; 所有QDialog容器下面的QPushButton；

这里并不打算讲解很多的理论，有兴趣的小伙伴可参悦其他人写得非常好的一篇博客：https://www.cnblogs.com/wangqiguo/p/4960776.html

同时也可参阅QSS官网文档：

Qt Style Sheets Reference | Qt Widgets 5.15.12

QSS在Qt程序中使用

主要通过 setStyleSheet(QString str)  函数引入，可以直接在函数里面写对于的qss内容：

#include "mainwindow.h"

#include <QPushButton>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    QPushButton *bt=new QPushButton("button",this);
    bt->setStyleSheet("QPushButton{color:red;  background-color:blue;}");
}

MainWindow::~MainWindow()
{
}

也可以先把qss定义作为一个文件，后缀为.qss ,如my.qss ，

#include "mainwindow.h"

#include <QFile>
#include <QPushButton>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    QPushButton *bt=new QPushButton("button",this);
    //bt->setStyleSheet("QPushButton{color:red;  background-color:blue;}");

    QFile *sf;
        sf  = new QFile(":/my.qss", this);
        sf->open(QFile::ReadOnly);
        QString styleSheet = QString(sf->readAll());
        bt->setStyleSheet(styleSheet);
        sf->close();
}

MainWindow::~MainWindow()
{
}

编辑qss的神器推荐

这款神器叫QssStylesheetEditor ,支持qss语法提示，同时在写完样式之后，还能在右侧预览实时效果，详情参见如下链接：

mirrors / hustlei / QssStylesheetEditor · GitCode

总结

学习qss只需掌握其方法，对于qss相关的一些属性根据实际需求查询官方文档即可，不必全部记住。因为每个控价都有自己独特的属性与样式定义，全部记下是不可能的！

示例程序完整源码：

main.cpp

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"

#include <QFile>
#include <QPushButton>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{

    resize(800,800);
    setWindowTitle("QSS");


    //define qss string
    QString s="QPushButton{color:red;  background-color:blue; font-size:20px; padding: 20px;}"
              "QPushButton:pressed{color:blue; background-color:yellow;}" ;

    QPushButton *bt=new QPushButton("button",this);
    bt->setGeometry(200,200,100,100);
    bt->setStyleSheet(s);

    
}

MainWindow::~MainWindow()
{
}

运行效果： 当点击按钮后，背景颜色会变为yellow ；

此篇博客内容较为简单，更多的是讲解如何使用qss的方法与技巧，之后涉及到相关属性直接查询官方文档即可！

下一篇博客链接：

Qt6教程之三(3) QtWedget自定义控件_爱折腾的业余程序员的博客-CSDN博客本篇博客主要介绍自定义控件的方法！https://blog.csdn.net/XiaoWang_csdn/article/details/129292061?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22129292061%22%2C%22source%22%3A%22XiaoWang_csdn%22%7D

上一篇博客链接： Qt6教程之三(1) Qt开发基于Windows、Linux系统的桌面软件客户端_爱折腾的业余程序员的博客-CSDN博客本篇文章主要介绍Qt的跨平台原理！https://blog.csdn.net/XiaoWang_csdn/article/details/129230190