Qt 漂亮的表单之QSS使用

  CSS，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

       借用CSS的灵感， Qt也支持Qt自己的CSS, 简称QSS。同CSS相似，CSS的主要功能与最终目的都是能使界面的表现与界面的元素分离，即质与形的分离，就如同一个人可以在不同的时候穿上不同的衣服一样，css机制的引入，使得设计一种皮肤与界面控件分离的软件成为可能，应用程序也能像web界面那样随意地改变外观。

       在这里，先不讲QSS的语法，因为它跟CSS很相似，但更加简单。先讲一下如何 在QWidget中添加QSS：

       首先当然要创建QSS文件，创建 一个QWidget项目，添加一个qrc资源文件，然后增加一个前缀“/”（很关键）。然后在这里添加一个QSS文件（自己新建一个记事本，修改成myQss.qss），添加到qrc资源文件中，效果是这样的：

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)
}

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));
}

然后在main.cpp中添加以下代码：

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

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

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

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

    Widget w;
    w.show();

    return a.exec();
}

运行的效果：

在ui界面文件中拉了两个pushbutton按钮，发现两个按钮都根据qss文件美化。