Qt

LincZero大约 4 分钟

Qt

.qss 样式文件 & 样式

qss代码

qss与css
- qss文件：全称 Qt Style Sheets，简写 qss，翻译 qt样式表
- 类比css：全称Cascading Style Sheets，简写css，翻译层叠样式表
- qss是一种从HTML CSS（层叠样式表）获得灵感的机制，两者相似又略有不同

使用

片段qss

简概
- 推荐：易于使用
- 与css接近，功能强大且减少学习成本

使用流程

可以通过setStyleSheets代码直接设置qss

QPushButton* myPushButton; 
myPushButton->setStyleSheet("* { color: blue }"); 
myPushButton->setStyleSheet("color: blue");

设置样式

QLineEdit {						/*选择器*/
	background-color:yellow;
}

指定样式

qApp->setStyleSheet("QLineEdit{background-color:yellow;}");
/* setStyleSheet(const QString &styleSheet); */
/* 可以为整个应用程序设置，也可以为单独一个控件设置 */

常用属性

color
background-color
width
height
spacing	/* 字距 */
:hover
:checked
:!checked
padding

.qss文件

添加方法

.qss样式文件不可用直接添加，像jpg、png等资源文件一样，需要添加到.qrc资源文件当中

使用

举例

/** 加载样式*/
void MainWindow::style(){
    QFile file(":/Assets/style.qss");
    file.open(QFile::ReadOnly);
    QString styleSheet = QLatin1String(file.readAll());
    qApp->setStyleSheet(styleSheet);
    file.close();
}

qss高级

qss中使用qrc资源

border-image: url(:/img/check_orange.png);

高级用法

多个一起设置（同CSS）

QCheckBox, QComboBox, QLineEdit, QListView, QRadioButton, QSpinBox{
    color: #050505;
    background-color:yellow;
}

样式表选择器（选择器，与CSS略有不同）

选择器	实例	可以匹配的窗口部件
全局对象	`*`	任意窗口部件
类型	`QDial`	给定类的实例，包括子类
类	`.QDial`	给定类的实例，不包括子类（而不是class）
标识	`QDial#ageDial`	给定对象名称的窗口部件（而不是id）
Qt属性	`QDial[y="0"]`	为某些属性赋值的窗口部件
子对象	`QFrame > QDial`	给定窗口部件的直接子窗口部件
子孙对象	`QFrame QDial`	给定窗口部件的子孙窗口部件

伪类选择器（同CSS，窗口部件中一些可以访问样式表的状态）

状态	说明
`:disabled`	禁用窗口部件
`:enabled`	启用窗口部件
`:focus`	窗口部件有输入焦点
`:hover`	鼠标在窗口部件上悬停
`:pressed`	鼠标按键单击窗口部件
`:checked`	按钮已被选用
`:unchecked`	按钮未被选用
`indeterminate`	按钮被部分选中
`:open`	窗口部件位于打开或扩展状态
`:closed`	窗口部件位于关闭或销毁状态
`:on`	窗口部件的状态是 on
`:off`	窗口部件的状态是 off

自定义辅助控制器（常见的）

辅助控制器	说明
`::indicator`	复选框、单选框、可选菜单栏、可选群组框的指示器
`::menu-indicator`	按钮的菜单指示器
`::item`	菜单、菜单栏、状态栏项 --
`::up-button`	微调框、滚动条的向上按钮
`::down-button`	微调框、滚动条的向下按钮
`::up-arrow`	微调框、滚动条、标题视图的向上箭头
`::down-arrow`	微调框、滚动条、标题视图、组合框的向下箭头
`::drop-down`	组合框的下拉箭头
`::title`	群组框的标题

多种颜色定义方式（同CSS）

QLineEidt {
    color: #050505; 											/* 16进制 */
	color: rgb(0,88,152);										/* RGB */
	color: rgba(95%, 80%, 9%, 50%);								/* RGBA */
	color:palette(Base);										/* 调色板 */
    background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1,	/* 线性渐变 */
    			stop:0 white, stop:0.4 gray, stop:1 green);
    /**三种渐变类型
     * qlineargradient()	线性渐变
     * qradialgradient()	辐射渐变
     * qconicalgradient()	圆锥渐变
     */
}

实战 —— Candy风格

直译是 “糖果风格”，具体特征应该是大圆角、扁平或上下渐变背景

示例：略

其他样式方法

三种自定义外观方法

有三种方法可以重新定义Qt内置窗口部件的外观

子类化个别窗口部件类
- 并且重新实现它的绘制和鼠标事件处理器
子类化QStyle、或者一个预定义的风格
- 例如QWindowSytle（Qt5不再支持QWindowsStyle、QWindowsXPStyle、QWindowsVistaStyle）
- 这种方法很好用，Qt本身也是用这种方法为它所支持的不同平台提供基于平台的外观
Qt样式表（从Qt4.2开始）
- 这是一种从HTML CSS（层叠样式表）获得灵感的机制

下面的示例中会展示两种自定义风格

Candy风格。它通过样式表定义
Bronze风格。它通过QStyle的子类实现

子类化QStyle

比较起上一种方法，这种方法挺繁琐的......

但如果是使用QStylePlugin风格化插件的话，对应的是QStyle这种自定义样式方式

简概

简概
- QStyle提供了一种包装应用程序外观的方法，这些类为Qt运行的平台和桌面系统实现了外观
Qt内置样式的继承树
补充
- 灰色为Qt5不再支持。即Qt5不再支持QWindowsStyle、QWindowsXPStyle、QWindowsVistaStyle
  为此，可以从QProxyStyle派生出所需风格

使用流程

一个举例（捋清窗口部件和样式之间的关系）

void MyPushButton:paintEvent(QPaintEvent * /*event*/)					// 绘图事件
{
    QPainter painter(this);												// 绘图类
    QStyleOptionButton option;											// QStyleOption
    option.initFrom(this);
    if(isFlat())
        option.features |= QStyleOptionButton::Flat;
    option.text = text();
    style()->drawControl(QStyle::CE_PushButton, &option, &painter, this);// drawControl()函数被各种QStyle子类重新实现
}

定义QStyle类

class BronzeStyle: public QWindowsStyle
{
    Q_OBJECT
    public:
    	// ...
    public slots:
    	// ...
    private:
    	// ...
}

使用QStyle类