博客

1 样式表的语法规则

简单来说，样式规则由选择器和声明组成。选择器指定哪些小部件受规则影响;声明指定应该在小部件上设置哪些属性。

如：

QPushButton { color : red }。

其中QPushButton就是选择器，’{ color : red }’是声明部分。 color就是属性，red就是指定给该属性的值。

也可以给多种控件同时设置样式，逗号隔开：

（给父窗口设置样式，子空间会继承父窗口的样式，相当于全局设置）

QPushButton, QLineEdit, QComboBox {color: red}

声明多个属性，分号分隔：

QPushButton { color: red; background-color: white }

为名为btnStyle的控件设置样式：

#btnStyle{ color: red; }

伪状态以冒号(:)作为分隔 紧跟着选择器：

QPushButton:!hover { color: white } 表示当鼠标不悬停在按钮上时颜色为白色

对一些复杂的部件修改样式，可能需要访问它们的子控件如QScrollBar的handle，QCheckBox的indicator等:

QScrollBar::handle:vertical
{
    width:8px;
    background:rgba(0,0,0,25%);
    border-radius:4px;   /* 滚动条两端变成椭圆*/
    min-height:20;
}

2 使用样式表的三种方法

2.1 Qt Designer 中直接添加样式

优点：通过这种方法我们对于设置完样式可以立马显示出效果（不需要编译再运行），也可以直观检查出当前样式是否编写错误。同时Qt Designer也可以帮助我们快速添加样式，见下图。在不编译不运行的情况下，我们可以用

Ctrl+r

直观地查看效果。

缺点：样式较多时，可能会显得比较凌乱。只能对QTDesiner上放置的控件设置样式，有局限性。

2.2 在代码中添加样式

直接调用控件的setStyleSheet方法，把2.1样式表中的内容写到“ ”内即可。

// 对单个控件;
ui.pushButton->setStyleSheet("QPushButton{border-radius:5px;background:rgb(150, 190, 60);color:red;font-size:15px;}")
// 对整个界面（包括界面上所有的控件）
this->setStyleSheet("QPushButton{border-radius:5px;background:rgb(150, 190, 60);color:red;}")

优点：方法2.1、2.3只能对QTDesigner上放置的控件设置样式。而代码设置可以对自己new出的控件设置样式，更加灵活，方便对自定义控件、组合控件设置样式。例如

pCheckBoxShowPWD = new QCheckBox(this);
pCheckBoxShowPWD>setStyleSheet("QCheckBox{width:24px;height:24px;});

缺点：不利于直观查看样式效果，样式表复杂造成程序冗长。

2.3 将样式写在qss文件中

建立一个MyStyle.qss文件，将样式写在文件中，通过读取文件的方式设置样式。

优点：界面样式较复杂时，我们在文件中编写样式，内容比较清晰，同时也便于修改。可以为界面换整套皮肤。

缺点：一般样式表文件都会加载到程序qrc资源文件中，所以这里需要单独加载一个文件，一起打包进exe文件中。

如何读取qss文件？

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    this->loadStyleSheet(":/qss/myStyleSheet.qss");
}
void MainWindow::loadStyleSheet(const QString &styleSheetFile)
{
    QFile file(styleSheetFile);
    file.open(QFile::ReadOnly);
    if (file.isOpen())
    {
        QString styleSheet = this->styleSheet();
        styleSheet += QLatin1String(file.readAll());//读取样式表文件
        this->setStyleSheet(styleSheet);//把文件内容传参
        file.close();
    }
    else
    {
        qDebug() << "qss file.open failed";
    }
}