使用QSS美化qt界面

发布时间 2023-12-14 11:34:25作者: 虚在君

Qt官方文档详细讲述了QSS文件的编辑格式和编辑方法:样式表语法 |Qt 4.8版本

而询问chatGPT也可以得到如下示例(参照官方文档进行了修改):

/* 注释:这是QSS文件的注释 */

QWidget {
    background: gray /* 设置所有QWidget的背景颜色 */
    color: #333; /* 设置文字颜色 */
    font-family: Arial, sans-serif; /* 设置字体 */
}

QPushButton {
    background: rgba(100,100,100,150); /* 设置QPushButton的背景颜色 */
    color: white; /* 设置按钮文字颜色 */
    border: 2px solid #4CAF50; /* 设置按钮边框 */
    border-radius: 5px; /* 设置按钮边框的圆角半径 */
    padding: 5px 10px; /* 设置按钮内边距 */
}

QLineEdit {
    border: 1px solid #ccc; /* 设置QLineEdit的边框样式 */
    border-radius: 3px; /* 设置边框的圆角半径 */
    padding: 3px; /* 设置内边距 */
}

/* 定义其他样式... */

如果要对某个复杂部件中的小组件进行样式修改、或者修改某个部件在不同状态下的样式,也可以通过类似的格式进行指定。下面时官方文档里的案例,展示菜单栏的项目处于选中状态或者菜单栏的图标被选中时的应显示的样式。

QMenu::item:selected {
    border-color: darkblue;
    background: rgba(100, 100, 100, 150);
}

QMenu::icon:checked { /* appearance of a 'checked' icon */
    background: gray;
    border: 1px inset gray;
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
}

关于qt中qss的属性、伪状态、子控件,有大佬已经作了详尽的整理,这里就直接引用了。

QSS 子控件集合-CSDN博客

QSS 伪状态集合_qss伪状态-CSDN博客

QSS 属性类型集合-CSDN博客

需要注意的是,创建qss文件不要使用windows下的记事本,推荐使用Notepad++或更高级的编辑器,否则可能会出错。原因是记事本生成的utf-8文件是带bom,即在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF)。这是一段隐藏的字符,用于让记事本等编辑器识别这个文件是否是以UTF-8编码。记事本无法去掉这三个隐藏字符,但Notepad++可以。

 

如何创建qss文件并添加样式(以下内容参考了博客初学Qt不会样式表怎么办,打包好的Qt样式表一键生成送给你。-CSDN博客

首先创建一个qss后缀的文件,并依照格式写入需要的代码。

然后将这个文件作为资源文件加载到qt中,具体过程为添加新文件中选择模板->Qt->Qt Resources File然后选择创建的文件。

然后在项目的构造函数中编写如下代码:

    QString qss;
    QFile qssFile("你的文件的相对地址/你的文件.qss");
    qssFile.open(QFile::ReadOnly);
    if(qssFile.isOpen())
    {
        qss=QLatin1String(qssFile.readAll());
        qDebug()<<qss;
        this->setStyleSheet(qss);
        qssFile.close();
    }

最后在Qt Creator中左边栏界面选择“项目”,在“Project Settings”中选择“编辑器”,确认在“文件编码”栏目中UTF-8 BOM的选项为“目前存在了则保留”即可。

 

关于选择器。

除了直接指定样式生效的控件类型,还可以通过其他一些手段来选择样式生效的对象,这些都是选择器。Qt官方文档介绍了一些最有用的选择器,Qt样式表支持CSS2中定义的所有选择器。文档链接在后面:选择 (w3.org)

常用的选择器有:

1.通用选择器(*),用于匹配所有的控件

2.类型选择器(控件类名,比如QPushButton) 会匹配控件类及其子类的实例

3.后代选择器(QFrame QPushButton) 匹配所有QPushButton实例,它们是QFrame的后代。

4.子代选择器(QFrame>QPushButton)匹配QFrame直接子代中的所有QPushButton。

5.ID选择器(QLabel#label)匹配对象名称为label的所有QLabel实例,由于ID的独特性所以可以省略这里的QLabel

6.类选择器(.QPushButton) 匹配QPushButton的实例,但不匹配其子类的实例。

7.属性选择器(QPushButton[flat="false"])用于在同一个类型下展现两种不同的实现效果,比如a类flat置true,b类置false,然后分派不同的样式

 

声明就是{}里的内容,用于指定具体的样式属性。

官方文档,包含详细的伪状态,属性清单。Qt Style Sheets Reference | Qt 4.8

 

以下内容来自该博客:Qt界面美化QSS——(二)盒子模型(Box Model)_qt box model-CSDN博客

使用样式表时,每个widget都被视为包含四个同心矩形的框:边距矩形(margin rectangle)、边框矩形(border rectangle)、填充矩形(padding rectangle)和内容矩形(content rectangle)。盒子模型如下图所示:

 边距(margin)、边框(border)宽度和填充(padding)属性都默认为零。在这种情况下,所有四个矩形(边距、边框、填充和内容)完全重合。

 

Qt 的绘制的步骤如下:

  1. 为整个渲染操作设置剪辑(border-radius)。
  2. 绘制背景(background-image)。
  3. 绘制边框(border-image,border)。
  4. 绘制叠加图像(image)。