C++客户端Qt开发——界面优化（QSS）

lilrain小雨

1979人浏览 · 2024-07-29 00:13:07

lilrain小雨 · 2024-07-29 00:13:07 发布

1.QSS

如果通过QSS设置的样式和通过C++代码设置的样式冲突，则QSS优先级更高

①基本语法

选择器{
    属性名：属性值;
}
例如：
QPushButton {
 color: red;
}

1>指定控件设置样式

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    //应用到这个特定的按钮上
    ui->pushButton->setStyleSheet("QPushButton{color:red;}");
    //可以用颜色的英文也可以用#
    //ui->pushButton->setStyleSheet("QPushButton{color:#ffaa00;}");
    
    //应用到该窗口内全部的按钮上
    this->setStyleSheet("QPushButton{color:red;}");
   
}

Widget::~Widget()
{
    delete ui;
}

效果都是将QPushButton的文字颜色设置成指定颜色

2>设置全局样式

通过QApplication的setStyleSheet方法设置整个程序的全局样式.

全局样式优点：

使同一个样式针对多个控件生效，代码更简洁.
所有控件样式内聚在起，便于维护和问题排查.

#include "widget.h"

#include <QApplication>

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

    a.setStyleSheet("QPushButton{ color:red; }");

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

如果全局和QSS冲突了呢？

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //局部优先级更高
    ui->pushButton->setStyleSheet("QPushButton{color:black; font-size:50px;}");
    //层叠性
    ui->pushButton_2->setStyleSheet("QPushButton{font-size:30px;}");

}

Widget::~Widget()
{
    delete ui;
}

QSS样式优先级更高！

除此之外，如果全局和指定控件分别设置两种不同的样式（例如pushbutton_2），那么这两种样式会叠加起来，都给该控件进行设置属性（层叠性）

3>样式和代码分离

上述设置方式比较繁琐，样式设置和C++代码混在了一起，可以把样式代码放在文件中，读取文件加载QSS内容。不过Qt Designer中直接集成了这样的功能，允许我们把样式直接写进.ui文件里（读取文件的方法不做介绍）

由于设置样式太灵活，有很多地方都能设置，就导致当某个控件样式不符合预期的时候，排查起来就比较麻烦

实际开发中，如果需要设置样式，最好统一使用某一种方式来设置

②选择器的用法

选择器	示例	说明
全局选择器	`*`	选择所有的widget
类型选择器	`QPushButton`	选择所有的`QPushButton`和其子类的控件
类选择器	`.QPushButton`	选择所有的`QPushButton`的控件，不会选择子类
ID选择器	`#pushButton_2`	选择`objectName`为`pushButton_2`的控件
后代选择器	`QDialog QPushButton`	选择`QDialog`的所有后代（子控件，孙子控件等）中的`QPushButton`
子选择器	`QDialog>QPushButton`	选择`QDialog`的所有子控件中的`QPushButton`
并集选择器	`QPushButton,QLineEdit,QComboBox`	选择`QPushButton`，`QLineEdit`，`QComboBox`这三种控件（样式针对这三种控件都生效）
属性选择器	`QPushButton[flat="false"]`	选择所有`QPushButton`中，`flat`属性为false的控件

1>使用类型选择器选中子类控件

在全局中设置

#include "widget.h"

#include <QApplication>

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

    a.setStyleSheet("QWidget{color:red;}");

    Widget w;
    w.show();
    return a.exec();
}
注意，此处选择器使用的是QWidget，QPushButton也是QWidget的子类，所以会受到QWidget选择器的影响

但如果改成：a.setStyleSheet(".QWidget{color:red;}");
此时按钮的颜色不会发生改变.此时只是选择QWidget类，而不会选择QWidget的子类QPushButton

2>使用id选择器

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    //设置全局样式
    QString style = "";

    //将所有按钮全局设置为黄色
    style += "QPushButton{color:yellow;}";
    //用id选择器设置第一个按钮为红色，第二个为绿色
    style += "#pushButton{color:red;}";
    style += "#pushButton_2{color:green;}";
    a.setStyleSheet(style);

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

当某个控件身上，通过类型选择器和D选择器设置了冲突的样式时，ID选择器样式优先级更高

同理，如果是其他的多种选择器作用同一个控件时出现冲突的样式，也会涉及到优先级问题

Qt文档上有具体的优先级规则介绍（参见The Style Sheet Syntax的Conflict Resolution章节)

这里的规则计算起来非常复杂(CSS中也存在类似的设定)，此处对于优先级不做进一步讨论

实践中我们可以简单的认为，选择器描述的范围越精准，则优先级越高。一般来说，ID选择器优先级是最高的

3>使用并集选择器

#include "widget.h"

#include <QApplication>

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

   a.setStyleSheet("QPushButton,QLabel,QLineEdit{color:red;}");

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

4>设置下拉框的下拉按钮样式

有些控件内部包含了多个"子控件"，比如QComboBox的下拉后的面板，比如QSpinBox的上下按钮等

可以通过子控件选择器::，针对上述子控件进行样式设置.

#include "widget.h"

#include <QApplication>

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

    QString style = "";
    style += "QComboBox::down-arrow{image:url(:/down.png)}";
    a.setStyleSheet(style);
    //resource.qrc内添加 down.png
    Widget w;
    w.show();
    return a.exec();
}

5>修改进度条颜色

此处如果不设置alignment，进度条中的数字会跑到左上角

6>设置按钮的伪类样式

伪类选择器：是根据控件所处的某个状态被选择的.例如按钮被按下，输入框获取到焦点，鼠标移动到某个控件上等

当状态具备时，控件被选中，样式生效
当状态不具备时，控件不被选中，样式失效，

使用:的方式定义伪类选择器

伪类选择器	说明
:hover	鼠标放到控件上
:pressed	鼠标左键按下时
:focus	获取输入焦点时
:enabled	元素处于可用状态时
:checked	被勾选时
:read-only	元素为只读状态时

这些状态可以使用！来取反.比如:！hover就是鼠标离开控件时，:！pressed就是鼠标松开时，等等

#include "widget.h"

#include <QApplication>

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

    QString style = "";

    style += "QPushButton {color:red}";
    style += "QPushButton:hover {color:green}";
    style += "QPushButton:pressed {color:blue}";

    a.setStyleSheet(style);

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

7>用事件方式实现6中的效果

创建C++class：MyPushButton，继承父类：QPushButton

重写MyPushButton的四个事件处理函数

③样式属性盒模型（Box Model）

一个遵守盒子模型的控件，由上述几个部分构成：

Content矩形区域：存放控件内容.比如包含的文本/图标等
Border矩形区域：控件的边框
Padding矩形区域：内边距，边框和内容之间的距离
Margin矩形区域：外边距，边框到控件geometry返回的矩形边界的距离

默认情况下，外边距，内边距，边框宽度都是0

复合属性（以margin为例）

可以拆为margin-leftmargin-rightmargin-topmargin-bottom

QSS属性	说明
margin	设置四个方向的外边距，复合属性
padding	设置四个方向的内边距，复合属性
border-style	设置边框样式
border-width	边框的粗细
border-color	边框的颜色
border	复合属性，相当于`border-style`+`border-width`+`border-color`

1>设置边框和内边距

#include "widget.h"

#include <QApplication>

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

    a.setStyleSheet("QLabel{border:5px solid red;padding-left:10px;}");
    //solid表示实线
    Widget w;
    w.show();
    return a.exec();
}

2>设置外边距

终端打印的位置还是（0,0），但是视觉上能看到不在（0,0）位置，因为加了外边框

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
#include<QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QPushButton* btn = new QPushButton(this);
    btn->setGeometry(0,0,100,100);
    btn->setText("hello");
    btn->setStyleSheet("QPushButton{border:5px solid red;margin:20px;}");

    const QRect& rect = btn->geometry(); //获取按钮的几何位置和大小。
    qDebug()<<rect;
}

Widget::~Widget()
{
    delete ui;
}

④控件样式属性

1>按钮

属性	说明
font-size	设置文字大小
border-radius	设置圆角矩形，数值设置的越大，角就越圆
background-color	设置背景颜色

2>复选框

要点	说明
::indicator	子控件选择器，选中checkbox中的对钩部分
:hover	伪类选择器，选中鼠标移动上去的状态
:pressed	伪类选择器，选中鼠标按下的状态
:checked	伪类选择器，选中checkbox被选中的状态
:unchecked	伪类选择器，选中checkbox未被选中的状态
width	设置子控件宽度，对普通控件无效（普通控件使用geometry方法设定尺寸）
height	设置子控件高度，对普通控件无效（普通控件使用geometry方法设定尺寸）
image	设置子控件的图片，像QSpinBox，QComboBox等可以使用这个属性来设置子控件的图片

3>单选框

要点	说明
::indicator	子控件选择器，选中radioButton中的对钩部分
:hover	伪类选择器，选中鼠标移动上去的状态
:pressed	伪类选择器，选中鼠标按下的状态
:checked	伪类选择器，选中radioButton被选中的状态
:unchecked	伪类选择器，选中radioButton未被选中的状态
width	设置子控件宽度，对普通控件无效（普通控件使用geometry方法设定尺寸）
height	设置子控件高度，对普通控件无效（普通控件使用geometry方法设定尺寸）
image	设置子控件的图片，像QSpinBox，QComboBox等可以使用这个属性来设置子控件的图片

4>输入框

属性	说明
border-width	设置边框宽度
border-radius	设置边框圆角
border-color	设置边框颜色
border-style	设置边框风格
padding	设置内边距
color	设置文字颜色
background	设置背景颜色
selection-background-color	设置选中文字的背景颜色
selection-color	设置选中文字的文本颜色

5>列表

要点	说明
::item	选中QListView中的具体条目
:hover	选中鼠标悬停的条目
:selected	选中某个被选中的条目
background	设置背景颜色
border	设置边框
qlineargradient	设置渐变色

关于qlineargradient

qlineargradient有六个参数

x1,y1:标注了一个起点.

x2,y2:标注了一个终点.

这两个点描述了一个"方向"

例如：

x1:0,y1:0,x2:0,y2:1就是垂直方向从上向下进行颜色渐变.
x1:0,y1:0,x2:1,y2:0就是水平方向从左向右进行颜色渐变.
x1:0,y1:0,X2:1,y2:1就是从左上往右下方向进行颜色渐变，

stop0和stop1描述了两个颜色，渐变过程就是从stop0往stop1进行渐变的.

//从上向下渐变
QWidget{background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0 #fff,stop:1 #FFFFBF);}
//从左向右渐变
QWidget{background-color:qlineargradient(x1:0,y1:0,x2:1,y2:0,stop:0 #fff,stop:1 #FFFFDE);}

6>菜单栏

要点	说明
QMenuBar::item	选中菜单栏中的元素
QMenuBar::item:selected	选中菜单栏中的被选中的元素
QMenuBar::item:pressed	选中菜单栏中的鼠标点击的元素
QMenu::item	选中菜单中的元素
QMenu::item:selected	选中菜单中的被选中的元素
QMenu::separator	选中菜单中的分割线

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

Flutter 鸿蒙化实战：flutter_keychain 适配 OpenHarmony，密钥安全存储

随着鸿蒙生态的快速发展，越来越多的 Flutter 应用需要适配 OpenHarmony 平台。但生态早期，大量常用三方库只有 Android / iOS 实现，鸿蒙侧只能自己造轮子。为了解决这个问题，对一批高频使用的 Flutter 三方库做了 OpenHarmony 平台适配，统一托管在 GitCode 的下，全部通过 TAG 版本隔离、配套门禁编译验证，开箱即用。本篇是系列文章之一，主角是—