Qt之QSS的使用及常用控件的样式设置

纯干货哦！

什么是QSS

Qt Style Sheet简称QSS，Qt的样式表，模仿CSS，为Qt界面设置炫酷的展示效果。

如何使用QSS

推荐使用第二种方式

方式一：在界面中设置

不推荐使用

1. 在编辑器中找到要设置样式的.ui文件，双击该文件，在界面编辑器中显示该文件
2. 在界面编辑器的右侧，右键单击，在弹出的右键菜单中选择“改变样式表”字样
3. 在弹出的“编辑样式表”框中输入正确的样式表代码
4. 点击“应用”（或“use”）按钮，可以直接在编辑器界面中看到样式表对作用控件的样式改变
5. 点击“确定”（或“Ok”）按钮，样式表设置完毕
   操作流程图如下：
   
   
   

方式二：调用setStyleSheet函数设置

推荐使用

1. 将QSS代码保存成.qss文件
2. 在需要的类中使用QFile类，readAll读取.qss文件中的样式信息
3. 将读取到的样式信息通过setStyleSheet设置到界面程序中
   直接上例子，下面以为TestWidget类采用setStyleSheet函数设置样式表为例：

TestWidget::TestWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::TestWidget)
{
    ui->setupUi(this);
    QFile file(":/qss/TestWidget.qss");//样式信息存储在了TestWidget.qss文件中
    file.open(QFile::ReadOnly);
    QString stylesheet = file.readAll();//读取qss样式文件中的所有数据
    file.close();
    this->setStyleSheet(stylesheet);//为当前界面类设置样式表
}

border-image与background-image的区别

这个属性都可以为控件设置背景图片，分以下几种情况：

• 当控件大小和背景图大小完全一致时，两种背景设置，达到的效果一样
• 当控件比背景图大时，border-image会将图片放大到与控件大小一致显示背景，background-image则从背景图的左上角开始渲染，控件比背景图大的部分，背景图会重复显示，直至铺满背景
<