QT QSS样式表

前言：

转载请附上连接,本帖原创请勿照抄。

       QSS(Qt Style Sheets)是Qt的样式表,为Qt提供许多的属性、伪状态、子控件等机制来自定义控件的外观,与HTML中的CSS类似。

一、创建引入QSS文件

1.创建QRC、QSS文件

       首先当然要创建QSS文件，创建 一个QWidget项目，右键项目->添加一个qrc资源文件。然后在这里添加一个QSS文件（自己新建一个记事本，修改成myQss.qss），添加到qrc资源文件中

2. myQss.qss代码

QPushButton{
        background:qlineargradient(spread:pad, x1:0.460227, y1:0, x2:0.465818, y2:0.875, stop:0 rgba(170, 255, 255, 255), stop:1 rgba(255, 255, 255, 255));
        border-radius:8px;
        border:2px solid rgb(0, 170, 255);
		color:rgb(17,17,17);
}
QPushButton:hover{
        background:qlineargradient(spread:pad, x1:0.460227, y1:0, x2:0.443091, y2:0.898, stop:0 rgba(0, 255, 255, 255), stop:1 rgba(255, 255, 255, 255))
}
 
QPushButton:hover:pressed{
        background:qlineargradient(spread:pad, x1:0.460227, y1:0, x2:0.465818, y2:0.875, stop:0 rgba(170, 255, 255, 255), stop:1 rgba(255, 255, 255, 255));
}
#btn2{
        background:qlineargradient(
		spread:pad, 
		x1:0, 
		y1:0, 
		x2:1, 
		y2:1, 
		stop:0 rgba(211 ,239 ,250 ,255 ), 
		stop:0.12 rgba(208 ,241 ,250 ,255 ),
		stop:0.21 rgba(215 ,227 ,243 ,255 ), 
		stop:0.3 rgba(214 ,233 ,247 ,255 ),
		stop:0.364 rgba(218 ,215 ,236 ,255 ),
		stop:0.459 rgba(220 ,200 ,229 ,255 ),
		stop:0.7 rgba(227 ,194 ,225 ,255 ),
		stop:0.9 rgba(233 ,166 ,209 ,255 ),
		stop:0.92 rgba(236 ,159 ,189 ,255 ),
		stop:1 rgba(237 ,153 ,202 , 255));
        border-radius:8px;
        border:2px solid rgb(0, 170, 255);
		color:red;
}
#btn3{
        background:qlineargradient(spread:pad, x1:0.460227, y1:0, x2:0.465818, y2:0.875, stop:0 rgba(255, 69, 0, 255), stop:1 rgba(255, 255, 255, 255));
        border-radius:8px;
        border:2px solid rgb(255, 127, 80)
}

 

3. main.cpp中代码

#include "mainwindow.h"
#include <QFile>
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    MainWindow w;

    QString qss;
    QFile qssFile(":/myqss.qss");
    qssFile.open(QFile::ReadOnly);

    if(qssFile.isOpen())
    {
        qss = QLatin1String(qssFile.readAll());
        qApp->setStyleSheet(qss);
        qssFile.close();
    }

    w.show();
    return a.exec();
}

4. 效果

二、其它QSS样式具体说明

1.相关文章

       QSS基本属性设置、QSS边框属性、Box 属性、QSS字体属性、QSS外边距属性、Qss选择器、优先级

       https://www.cnblogs.com/bclshuai/p/9809679.html

2.相关文章

       语法模式、选择器类型、属性、子控件、伪状态

       https://www.jianshu.com/p/2c7db2f6c458

3.相关文章

       相对全面的文章

       https://www.cnblogs.com/wangqiguo/p/4960776.html

本章QSS样式表告一段落了，接下来会发布重绘空间文章和自绘图形，也会有更多的QSS样式在接下来的文章中不断更新。