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

code_shenbing

已于 2023-03-01 23:17:25 修改

阅读量1.5k

点赞数

分类专栏： Qt学习程序开发文章标签： qt ui

于 2023-02-28 12:40:33 首次发布

本文链接：https://blog.csdn.net/XiaoWang_csdn/article/details/129259335

版权

Qt学习同时被 2 个专栏收录

40 篇文章

订阅专栏

程序开发

32 篇文章

订阅专栏

QSS是Qt用于自定义控件外观的机制，类似CSS。本文介绍了QSS的选择器类型，如通配选择器、类型选择器等，并展示了如何在Qt程序中通过setStyleSheet函数应用QSS。还推荐了QssStylesheetEditor作为编辑QSS的工具，强调了学习QSS主要在于掌握方法而非记忆所有属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 ；