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_OBJECTpublic: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 stringQString 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