NEWS

新闻

了解优麒麟最新资讯,关注社区和产品动态。

NEWS

Learn about the latest news.

干货分享|UKUI 主题框架实战技巧

2021-09-22 18:10:47

优麒麟(Ubuntu Kylin)

UKUI 主题框架的实现并非想象中那么简单,但世上无难事只怕有心人,首先咱们需要了解一个关键接口 QPA,接着通过学习具体的类了解如何创建并深入使用平台主题。本文中奇奇为大家准备了丰富的控件知识介绍,并且还有 UKUI 实例展示和实战环节,一起来了解学习下吧~


一、平台主题(QPA)介绍

QPA 即 Qt Platform Abstraction,是 Qt5 里面的平台抽象层,用以取代 Qt for Embedded Linux 以及 Qt4 中的平台接口。

QPA 插件通过定义 QPlatform 开头的一系列类的子类实现,其中有两个根类,QPlatformIntegration 和 QPlatformTheme,前者用于窗口系统的集成,后者用于更深层次的平台主题化和集成,QStyle 不属于 QPA,旨在在未修改的 Qt 应用程序中使用尽可能多的平台主题设置,它允许 Qt 应用程序尽可能地适应环境。


二、平台主题的创建

在 Linux 系统中我们可以通过 QPlatformThemePlugin 类来创建自己的平台主题。例如 UKUI 的平台主题创建方法--如图 1 所示。要使系统走我们的平台主题,需要将环境变量“QT_QPA_PLATFORMTHEME”设置为 json 文件中的 keys 值。

例如在 UKUI 中由 ukui-session-manager 设置环境变量“QT_QPA_PLATFORMTHEME = ukui”。

优麒麟(Ubuntu Kylin)

图1 设置 keys 值

此外插件都需要一个包含描述插件的元数据的 json 文件 。例如 UKUI 平台主题 json 文件,如图 2 所示。

优麒麟(Ubuntu Kylin)

图2 json 文件中的 keys 值

我们还需要将平台插件编译成库安装在 Qt 加载平台插件的指定目录,这样 Qt 才能加载到我们自己写的平台插件。UKUI 安装平台插件的方法是在 pro 文件中指定了库安装的位置,如图 3 所示。

优麒麟(Ubuntu Kylin)

图3 安装平台插件的指定目录

三、平台主题常用接口分析

1、是否使用平台对话框

virtual bool usePlatformNativeDialog(DialogType type) const;

是否使用平台对话框。这里只能判断出 4 种平台对话框,分别是:文件对话框 FileDialog、颜色对话框 ColorDialog、字体对话框 FontDialog、消息对话框 MessageDialog。

2、系统平台对话框

virtual QPlatformDialogHelper *createPlatformDialogHelper(DialogType type) const;

该接口返回了平台对话框 Helper,通过 helper 连接了平台对话框与 Qt 的对话框。例如 UKUI 自写的平台消息弹窗--如图 4 所示,效果展示如图 5、6 所示,图 5 为原来的 QMessageBox 界面,图 6 为平台消息弹窗。需要与上函数同时设置才能展示平台对话框。

优麒麟(Ubuntu Kylin)

图4 平台消息弹窗

优麒麟(Ubuntu Kylin)

图5 原效果展示图

优麒麟(Ubuntu Kylin)

图6 现效果展示图

3、创建系统托盘

virtual QPlatformSystemTrayIcon *createPlatformSystemTrayIcon() const;

QSystemTrayIcon 的工厂函数。如果平台集成不支持创建任何系统托盘图标,此函数将返回 0。

4、调色板

virtual const QPalette *palette(Palette type = SystemPalette) const;

创建对应 Palette 类型的调色板。

5、字体

virtual const QFont *font(Font type = SystemFont) const;

创建对应 Font 类型的字体 QFont。

6、主题设置

virtual QVariant themeHint(ThemeHint hint) const;

返回平台的主题设置。ThemeHint 定义了可以设置的主题属性。


下面介绍一些重要的主题设置控件。

  • StyleNames 主题(系统控件的 Style);

  • SystemIconThemeName 系统图标主题(QIcon 搜索的图标目录);

  • IconThemeSearchPaths 系统图标搜索路径(QIcon 搜索目录);

  • SystemIconFallbackThemeName 系统图标搜索备选目录(QIcon 搜索备选目录)(当在系统图标搜索目录下搜索不到图标时,系统会在备选目录下搜索对应的图标。在 Linux 系统开发下的自研应用一般将自带的图标放在该路径下。Linux 中该目录为"hicolor");

  • TextCursorWidth 光标宽度(默认1px);

  • StartDragDistance 拖放操作开始前,按住按钮必须移动鼠标的距离,单位为像素(默认10px);

  • StartDragTime 拖放操作开始前必须按住鼠标按钮的时间,单位为毫秒(默认500ms);

  • PasswordMaskCharacter 密码模式下输入文本输入字段的字符(默认为 QChar(0x2022));

  • PasswordMaskDelay 在密码模式下文本输入字段中无遮挡地显示一个键入字母的时间,单位为毫秒;

  • MouseDoubleClickInterval 双击和连续两次鼠标点击的时间限制,单位为毫秒;

  • CursorFlashTime 文本光标的闪动(闪烁)时间,单位为毫秒(默认1000ms)。


以 UKUI 平台主题的主题设置为例,如图 7 所示。

优麒麟(Ubuntu Kylin)

图7 主题设置

7、基础图标

virtual QPixmap standardPixmap(StandardPixmap sp, const QSizeF &size) const;

设置系统中 size 大小的 StandardPixmap 类型(具体参考 Qt 源码中枚举 StandardPixmap)基础 Pixmap 图片。

8、图标引擎

virtual QIconEngine *createIconEngine(const QString &iconName) const;

设置系统中 QIcon 的图标引擎。图标引擎为 QIcon 提供渲染功能。每个图标都有一个相应的图标引擎,负责以要求的尺寸、模式和状态绘制图标。具体可参考 Qt 中 QIconEngine 的文档:https://doc.qt.io/qt-5/qiconengine.html#details 


四、平台主题在UKUI中的使用

下面介绍 3 种在 UKUI 环境下使用指定的平台主题的方法。

首先我们得确保系统中安装了自己的平台主题库。以本机环境及 UKUI 的平台主题为例进行查看,如图 8 所示。

优麒麟(Ubuntu Kylin)

图8 显示已安装的平台主题库

方法一:终端指定环境变量

export QT_QPA_PLATFORMTHEME=ukui 

只有在终端修改方可生效,如图 9 所示。

优麒麟(Ubuntu Kylin)

图9 在终端修改环境变量

展示效果如图 10 所示。

优麒麟(Ubuntu Kylin)

图10 展示效果

方法二:应用启动时指定平台主题

我们可以用终端启动 Qt 应用时后接参数-platformtheme [平台主题名(例如:gtk2、gtk3、ukui,社区的有 kde)] -style [主题名(例如:fusion、gtk2、ukui 社区的有 breeze、oxygen)]

例如: peony -platformtheme gtk2 -style fusion

展示效果如图 11 所示。

优麒麟(Ubuntu Kylin)

图11 展示效果

方法三:应用代码中设置环境变量

在 QApplication 初始化之前设置 qputenv("QT_QPA_PLATFORMTHEME", "[平台主题]");

示例如图 12 所示。

优麒麟(Ubuntu Kylin)

图12 展示效果

展示效果如图 13 所示。

优麒麟(Ubuntu Kylin)

图13 展示效果