1200字范文 > Qt - 换肤功能实现

Qt - 换肤功能实现

时间：2021-11-27 05:52:11

相关推荐

Qt - 换肤功能实现

文章目录

前言Qt内置风格QPaletteQSSQSS样式一般样式选择器子控件伪状态属性使用分离QSS推荐工具QsseditorQssStylesheetEditorQSS参考参考鸣谢

前言

人靠衣装马靠鞍，最近还在为我的UHelper(GayHub)添砖加瓦，由于规划的设置里包含了换肤功能，这就来学习下怎么实现。

Qt的换肤可通过以下几种方式实现，且听我一 .一道来：

Qt内置风格QPaletteQSS

Qt内置风格

Qt是一个跨平台的类库，相同的界面组件在不同的操作系统上显示的效果不一样。QStyle是封装了GUI 界面组件外观的抽象类。Qt定义了一些QStyle的子类以应用于不同的操作系统，这就是Qt内置的风格。例如QStyle列举个QComboBox不同样式下的外观：

但是这些样式在我们的运行环境下并非完全支持；我们可以通过QStyleFactory::keys()打印系统所支持的内置风格：

foreach (const QString mFactory,QStyleFactory::keys()) {qDebug() << mFactory;}

Win7-64打印结果：

值得注意的是，选用Qt内置的界面风格只是改变控件风格（QPushButton、QLineEdit…）。

并不会改变窗体风格（标题栏、最小化、最大化、关闭按钮…），若想改变窗口风格，只能自行绘制^1。

//等同于QApplication::setPalette(palette);qApp->setStyle(QStyleFactory::create("Fusion"));//选择风格默认颜色qApp->setPalette(QApplication::style()->standardPalette());

QPalette

在QPalette Class中提到，Qt所有的小部件都包含一个调色板^2。

调色板包含三个颜色组：

活动，活动组用于具有键盘焦点的窗口。禁用，用于因某些原因禁用的窗口小部件（非Windows）。不活动，不活动组用于其他窗口。

在大多数样式中，活动和不活动外观相同。

我们可以使用setColor( )和setBrush( )为调色板的任何颜色组中的特定角色设置颜色和画笔。

这个特定角色在ColorRole枚举中被定义，下面列举了核心角色：

更详尽的内容可到enum QPalette::ColorRole查看。

警告：某些样式如果使用本机主题引擎，则不会在所有图形上使用调色板。Windows Vista和macOS样式均是如此。

qApp->setStyle(QStyleFactory::create("Fusion"));qApp->setPalette(QApplication::style()->standardPalette());QPalette palette;palette.setColor(QPalette::Window, QColor(120,120,120));palette.setColor(QPalette::WindowText, Qt::white);palette.setColor(QPalette::Base, QColor(53,53,53));palette.setColor(QPalette::AlternateBase, QColor(53,53,53));palette.setColor(QPalette::ToolTipBase, Qt::white);palette.setColor(QPalette::ToolTipText, Qt::white);palette.setColor(QPalette::Text, Qt::white);palette.setColor(QPalette::Button, QColor(53,53,53));palette.setColor(QPalette::ButtonText, Qt::white);palette.setColor(QPalette::BrightText, Qt::red);palette.setColor(QPalette::Highlight, QColor(142,45,197).lighter());palette.setColor(QPalette::HighlightedText, Qt::black);qApp->setPalette(palette);

效果

ps：可以发现窗体（标题栏等）的颜色并没有给变。若想该表标题栏颜色，有两种做法：

调用对应操作系统相关的API自定义的标题栏 +CSS background-color

QSS

Qt的样式表是用于定制用户界面的强有力机制，其是受到CSS启发而产生的。

QSS是纯文本的格式定义，在应用程序运行时可以载入和解释这些样式定义。

使用QSS可以定义各种界面组件的样式，从而产生不同的效果。

QSS样式

官方参考文档：Qt Style Sheets Reference

一般样式

QSS的句法与CSS几乎相同。

Qt样式表包含一系列的样式法则，一个样式法则由一个选择器和一些声明组成^3。

QPushButton{font:12pt "仿宋";background-color: red;border: none;}

选择器

这里QPushButton就是选择器，后面{ }里的样式声明应用于QPushButton 及其子类。

样式声明部分是样式法则列表，每个样式法则由属性和值组成，每条法则由分号结尾。

子控件

对于一些组合的控件，需要对其子控件进行选择，例如QComboBox的下拉按钮，通过选择器的子控件可以对这些界面元素进行显示效果控制：

QComboBox::drop-down{/*这里用到资源里的down.png*/image: url(:/image/down.png);}

伪状态

选择器可使用伪状态，使得样式只能应用于控件的某个状态。可以看成是一种条件应用法则。

伪状态出现在选择器的后面，使用:隔开：

/** QPushButton 被选中时变更颜色*/QPushButton:checked{background-color: #76797C;border-color: #6A6969;}/** 对伪状态取反* 表明 read-only 属性为flase 时的状态*/QLineEdit:!read-only{background-color: rgb(255,255,0);}/* * 串联使用，相当于逻辑与* 当鼠标位于QCheckBox上方且QCheckBox被选中时，字体变红*/QCheckBox:hover:checked{color:red;}/* * 并联使用，相当于逻辑或* 当鼠标位于QCheckBox上方或QCheckBox被选中时，字体变红*/QCheckBox:hover，QCheckBox:checked{color:red;}

属性

前面说到每个样式法则由属性和值组成。

前面提及的使用样式表定义组件复杂的显示过程外，我们还可以通过盒模型表示：

图片来自Customizing Qt Widgets Using Style Sheets

名词解释：

content：显示内容矩形区域padding：包围content的矩形区域boorder：包围padding的矩形边框margin：boorder与父组件之间的留白

QLineEdit{/*定义最大最小宽度*/min-width:50px;max-width:40px;/*设定上、右、下、左的宽度*/padding:0px 10px 0 px 10px;/*分别为边框线宽，线形，颜色*/border:2px solid red;/*border与父控件上下左右各留白10px*/margin:10px 10px 10px 10px}

注意：

缺省状态下，margin、boorder-width、padding为0；

这种情况下，四个同心矩形就是一个重合的矩形。