一种Qml主题皮肤更换方法、装置、电子设备及存储介质与流程

一种qml主题皮肤更换方法、装置、电子设备及存储介质
技术领域
1.本发明涉及控件调整技术领域，尤其涉及一种qml主题皮肤更换方法、装置、电子设备及存储介质。


背景技术：

2.qml控件库提供的主题样式库有fusion、material、imagine、universal，样式是否有限，很难满足不同行业风格的主题样式。并且官方提供的主题样式不支持子元素控件样式对父容器控件样式的直接继承，造成子元素空间需要反复修改其样式属性值，造成代码重复度较高，样式选择的灵活性较差。此外，官方提供的主题样式库在代码编写之初就要确定好使用哪种主题样式，无法实现程序运行过程中进行主题的切换，用户无法根据自身的需求灵活地选择不同的主题风格。


技术实现要素：

3.本发明提供了一种qml主题皮肤更换方法、装置、电子设备及存储介质，用于解决现有的qml控件在程序运行过程中无法进行主题切换的技术问题。
4.本发明提供了一种qml主题皮肤更换方法，包括：
5.当接收到针对预设的qml控件的主题皮肤更换请求时，调用界面主题服务；
6.根据所述主题皮肤更换请求从所述界面主题服务中确定目标界面主题；
7.获取与所述目标界面主题对应的目标主题样式；
8.获取与所述目标主题样式对应的主题皮肤；
9.在预设显示界面上显示所述主题皮肤。
10.可选地，所述根据所述主题皮肤更换请求从所述界面主题服务中确定目标界面主题的步骤，包括：
11.从所述主题皮肤更换请求中获取皮肤属性；
12.根据所述皮肤属性从所述界面主题服务中确定目标界面主题。
13.可选地，所述目标主题样式包括通用主题样式；所述获取与所述目标界面主题对应的目标主题样式的步骤，包括：
14.获取所述目标界面主题的通用属性；
15.根据所述目标界面主题的属性，获取与所述目标界面主题对应的通用主题样式；
16.为所述通用属性赋予所述通用主题样式。
17.可选地，所述目标主题样式还包括弹窗主题样式；所述获取与所述目标界面主题对应的目标主题样式的步骤，还包括：
18.获取所述qml控件中已被重定义的弹窗属性；
19.根据所述目标界面主题的属性，获取与所述目标界面主题对应的弹窗主题样式；
20.为所述弹窗属性赋予所述弹窗主题样式。
21.本发明还提供了一种qml主题皮肤更换装置，包括：
22.界面主题服务调用模块，用于当接收到针对预设的qml控件的主题皮肤更换请求时，调用界面主题服务；
23.目标界面主题确定模块，用于根据所述主题皮肤更换请求从所述界面主题服务中确定目标界面主题；
24.目标主题样式获取模块，用于获取与所述目标界面主题对应的目标主题样式；
25.主题皮肤获取模块，用于获取与所述目标主题样式对应的主题皮肤；
26.主题皮肤显示模块，用于在预设显示界面上显示所述主题皮肤。
27.可选地，所述目标界面主题确定模块，包括：
28.皮肤属性获取子模块，用于从所述主题皮肤更换请求中获取皮肤属性；
29.目标界面主题确定子模块，用于根据所述皮肤属性从所述界面主题服务中确定目标界面主题。
30.可选地，所述目标主题样式包括通用主题样式；所述目标主题样式获取模块，包括：
31.通用属性获取子模块，用于获取所述目标界面主题的通用属性；
32.通用主题样式获取子模块，用于根据所述目标界面主题的属性，获取与所述目标界面主题对应的通用主题样式；
33.通用主题样式赋予子模块，用于为所述通用属性赋予所述通用主题样式。
34.可选地，所述目标主题样式还包括弹窗主题样式；所述目标主题样式获取模块，还包括：
35.弹窗属性获取子模块，用于获取所述qml控件中已被重定义的弹窗属性；
36.弹窗主题样式获取子模块，用于根据所述目标界面主题的属性，获取与所述目标界面主题对应的弹窗主题样式；
37.弹窗主题样式赋予子模块，用于为所述弹窗属性赋予所述弹窗主题样式。
38.本发明还提供了一种电子设备，所述设备包括处理器以及存储器：
39.所述存储器用于存储程序代码，并将所述程序代码传输给所述处理器；
40.所述处理器用于根据所述程序代码中的指令执行如上任一项所述的qml主题皮肤更换方法。
41.本发明还提供了一种计算机可读存储介质，所述计算机可读存储介质用于存储程序代码，所述程序代码用于执行如上任一项所述的qml主题皮肤更换方法。
42.从以上技术方案可以看出，本发明具有以下优点：本发明公开了一种qml主题皮肤更换方法，包括：当接收到针对预设的qml控件的主题皮肤更换请求时，调用界面主题服务；根据主题皮肤更换请求从界面主题服务中确定目标界面主题；获取与目标界面主题对应的目标主题样式；获取与目标主题样式对应的主题皮肤；在预设显示界面上显示主题皮肤。本发明通过设置皮肤跟主题样式之间的映射，使得在程序运行过程中接收到针对皮肤的更换请求时，可以调整控件中主题样式的相关属性，从而实现在程序运行过程中对皮肤的更换。
附图说明
43.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本
发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其它的附图。
44.图1为本发明实施例提供的一种qml主题皮肤更换方法的步骤流程图；
45.图2为本发明实施例中主题样式与控件之间的关系示意图；
46.图3为本发明实施例中皮肤与主题样式之间的关系示意图；
47.图4为本发明另一实施例提供的一种qml主题皮肤更换方法的步骤流程图；
48.图5为本发明实施例提供的一种主题皮肤调用示意图；
49.图6为本发明实施例提供的一种qml主题皮肤更换装置的结构示意图。
具体实施方式
50.本发明实施例提供了一种qml主题皮肤更换方法、装置、电子设备及存储介质，用于解决现有的qml控件在程序运行过程中无法进行主题切换的技术问题。
51.为使得本发明的发明目的、特征、优点能够更加的明显和易懂，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，下面所描述的实施例仅仅是本发明一部分实施例，而非全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
52.请参阅图1，图1为本发明实施例提供的一种qml主题皮肤更换方法的步骤流程图。
53.本发明提供的一种qml主题皮肤更换方法，具体可以包括以下步骤：
54.步骤101，当接收到针对预设的qml控件的主题皮肤更换请求时，调用界面主题服务；
55.qml是一种描述性的脚本语言，文件格式以.qml结尾。语法格式非常像css，但又支持javascript形式的编程控制。qtdesigner可以设计出.ui界面文件，但是不支持和qt原生c++代码的交互。qtscript可以和qt原生代码进行交互，但是有一个缺点，如果要在脚本中创建一个继承于qobject的图形对象非常不方便，只能在qt代码中创建图形对象，然后从qtscript中进行访问。而qml可以在脚本中创建图形对象，并且支持各种图形特效，以及状态机等，同时又能跟qt写的c++代码进行方便的交互。
56.在本发明实施例中，当在程序运行过程中接收到针对预设的qml控件的主题皮肤更换请求时，可以调用界面主题服务。界面主题服务中存储了qml控件自带的界面主题和用户自定义的界面主题，不同的界面主题指向不同的皮肤属性，通过界面主题可以最终导向不同的皮肤展示效果。
57.步骤102，根据主题皮肤更换请求从界面主题服务中确定目标界面主题；
58.在本发明实施例中，当需要进行皮肤更换中，可以在主题皮肤更换请求中携带需要更换的皮肤主题，以在界面主题服务中确定目标界面主题。
59.在一个示例中，界面主题可以星空灰、中国红等颜色为主的主题，也可以为风景为主的主题，具体可以根据需要自定义，本发明实施例对此不作具体限制。
60.步骤103，获取与目标界面主题对应的目标主题样式；
61.在实际场景中，官方提供的主题样式不支持子元素控件样式对父容器控件样式直接继承，造成子元素控件需要反复修改其样式属性值，造成代码重复度较高，样式选择的灵
活性较差的问题。
62.有鉴于此，本发明建立了子元素控件样式对父容器控件样式的继承方式，以实现在选择皮肤时，子元素控件可以直接继承父容器控件的主题样式。
63.在具体实现中，c++对象和值可以使用上下文属性和上下文对象直接嵌入到加载的qml对象的上下文中。这是通过qt qml模块提供的qqmlcontext类实现的，它将数据公开给qml组件的上下文，允许将数据从c++注入到qml中。每个qqmlcontext都包含一组不同于其qobject的属性，这些属性允许根据名称显式地将数据绑定到上下文中。上下文形成了一个层次结构，它的根是qml引擎的根上下文。根上下文由qqmlengine自动创建。将引擎实例化的所有qml组件实例可用的数据放在根上下文中。把仅对组件实例的子集可用的其他数据添加到根上下文的父级子上下文中。子上下文继承父上下文的上下文属性。如果子上下文设置了父上下文中已经存在的上下文属性，则新的上下文属性将覆盖父上下文的属性。本发明实施例可以通过调用qqmlcontext的setcontextproperty方法添加skinname上下文属性。skinname上下文属性是用于管理全局换肤，用户可以自行设置皮肤名枚举类型，将枚举成员转化为字符串，并将值赋予skinname，即能实现全局qml页面的皮肤切换。其中，皮肤的数量可以为一个、两个或多个。
64.由于本发明实施例的主题样式的可继承性，因此，在获取到目标界面主题后，可以为qml控件的各属性筛选对应的目标主题样式。
65.在本发明实施例中，主题样式可以为星空灰主题样式、中国红主题样式等，本领域可根据实际需求自行设定，本发明实施例对此不作具体限定。
66.在具体实现中，可以事先在工程的资源文件中加入uitheme.qml。uitheme.qml的功能是为控件及其子控件赋予主题皮肤样式。uitheme.qml中的skin变量用于设置皮肤，withstyle为当前的主题样式。主题样式可根据需求自行增加，可以是一个、两个或多个。inheritedtheme为继承的主题样式，默认从上级控件的gtheme继承。comp变量用于指向当前控件。loader用于动态加载qml component对象，sourcecomponent值为comp变量。即loader的作用是用于改变comp指向的控件。qtobject类型是仅包含一个非视觉元素对象名的属性。loader中th_是qtobject类型，其中包含了主题样式名、文案颜色属性、logo图片路径属性、按钮背景颜色属性等。可以根据需求进一步扩展。loader中的gtheme为当前主题变量，默认指向th_。loader中的rebuildtheme接口是用于根据loader的变量gtheme更新comp中的所有属性，传参为true，则优先更新使用继承的父控件的主题样式，如果withstyle某些属性存在值，则会再一次更新comp中的属性，传参为false，使用withstyle指向的主题样式。rebuildtheme接口的使用减少了不同主题的父子控件相同属性值的重复定义，减少了代码的重复量。loader中的onloaded接口会优先调用，其中调用rebuildtheme，即comp控件加载时会默认将所有的属性值更新为继承的父控件的主题样式。uitheme.qml中的onwithstylechanged中使用了rebuildtheme(false)，即如果withstyle赋予了值，则comp控件的最终属性值会更新为withstyle指向的主题样式。uitheme.qml中的onskinchanged接口会根据skin变量值，调用themes中getskin方法。
67.在本发明实施例中，以label为例，主题样式与控件之间的关系如图2所示。
68.label.qml中的color属性赋予了gtheme.txtcolor。这里的gtheme即为uitheme.qml中的主题变量。当主题变更时，label的文字颜色也会跟着变，其他控件与此类
似。由rebuildtheme接口实现可知，当父控件使用通用样式的主题，子控件使用弹窗样式的主题时，父控件中的button背景颜色btnbackcolor值为#4e5366，文字颜色txtcolor为#ffffff，子控件中的button会先继承父控件的文字颜色txtcolor和背景颜色btnbackcolor，但是因为弹窗样式的主题重新给btnbackcolor赋予了value值，即弹窗样式对应的主题的listelement存储了btnbackcolor值，故而子控件中的button最终的背景颜色btnbackcolor值为#387bff。
69.步骤104，获取与目标主题样式对应的主题皮肤；
70.在确定了对应的目标主题样式后，可以根据目标主体样式对应的属性来获取主题皮肤。
71.在具体实现中，可以在工程的资源文件中加入themes.qml。themes使用listmodel用于管理不同的皮肤样式。themes的顶层控件为qtobject，即themes这个类仅仅用于定义非视觉元素的属性。一个链表模型(listmodel)是由许多个链表元素(listelement)组成。listelement是存储一些键值对的对象，value是常量、字符串[带引号]、布尔值、数字或枚举，该装置中的listelement存储了与uitheme中th_一致的属性变量。每一个主题样式都对应一个listelement。themes的getskin方法用于实现根据皮肤选择不同的主题。一个皮肤可以拥有多个主题。例如themes中可以增加记录通用样式和弹窗样式的变量，通用样式的默认值可以为星空灰通用样式，弹窗样式默认值可以为星空灰弹窗样式，listmodel其中包含了星空灰通用样式graytheme、中国红通用样式redtheme、电信蓝通用主题样式bluetheme、星空灰弹窗样式messageboxgraytheme、中国红弹窗样式messageboxredtheme、电信蓝弹窗主题样式messageboxbluetheme。getskin方法会根据不同的皮肤，将通用样式和弹窗样式赋予不同的值。在一个示例中，皮肤与主题样式之间的关系如图3所示。
[0072]
步骤105，在预设显示界面上显示主题皮肤。
[0073]
在获取到主题皮肤后，可以在预设的展示有原先的主题皮肤的显示界面上显示更新后的主题皮肤。
[0074]
本发明通过设置皮肤跟主题样式之间的映射，使得在程序运行过程中接收到针对皮肤的更换请求时，可以调整控件中主题样式的相关属性，从而实现在程序运行过程中对皮肤的更换。
[0075]
请参阅图4，图4为本发明另一实施例提供的一种qml主题皮肤更换方法的步骤流程图。
[0076]
步骤401，当接收到针对预设的qml控件的主题皮肤更换请求时，调用界面主题服务；
[0077]
步骤402，从主题皮肤更换请求中获取皮肤属性；
[0078]
步骤403，根据皮肤属性从界面主题服务中确定目标界面主题；
[0079]
在本发明实施例中，可以根据主题皮肤更换请求中的皮肤属性，来确定目标界面主题。
[0080]
其中，皮肤属性可以包括主题颜色、主题图片路径。主题颜色可以分为多种颜色属性，例如默认背景颜色、字体颜色、按钮默认背景颜色、鼠标滑过按钮时的背景颜色等。主题图片路径可以划分为logo的图片路径，最小化图标的图片路径。在工程的资源文件中加入图片，图片路径与资源文件中的图片路径一致，皮肤即可生效。
[0081]
步骤404，获取与目标界面主题对应的目标主题样式；
[0082]
在本发明实施例中，目标主题样式包括通用主题样式，获取与目标界面主题对应的目标主题样式的步骤，可以包括以下子步骤：
[0083]
s41，获取目标界面主题的通用属性；
[0084]
s42，根据目标界面主题的属性，获取与目标界面主题对应的通用主题样式；
[0085]
s43，为通用属性赋予通用主题样式。
[0086]
进一步地，目标主题样式还包括弹窗主题样式；获取与目标界面主题对应的目标主题样式的步骤，还包括：
[0087]
s44，获取qml控件中已被重定义的弹窗属性；
[0088]
s45，根据目标界面主题的属性，获取与目标界面主题对应的弹窗主题样式；
[0089]
s46，为弹窗属性赋予弹窗主题样式。
[0090]
步骤405，获取与目标主题样式对应的主题皮肤；
[0091]
步骤406，在预设显示界面上显示主题皮肤。
[0092]
在获取到主题皮肤后，可以在预设的展示有原先的主题皮肤的显示界面上显示更新后的主题皮肤。
[0093]
本发明通过设置皮肤跟主题样式之间的映射，使得在程序运行过程中接收到针对皮肤的更换请求时，可以调整控件中主题样式的相关属性，从而实现在程序运行过程中对皮肤的更换。
[0094]
为便于理解，以下通过具体示例对本发明进行说明：
[0095]
请参阅图5，图5为本发明实施例提供的一种主题皮肤调用示意图。
[0096]
如图5所示，当应用为qt widgets应用时，需要在所有的qml页面的最外层使用uitheme控件包裹。当应用为qt quick应用时，只需要在main.qml的window下一级调用uitheme，其余控件和页面包裹在uitheme中。并为uitheme的skin值赋予skinname，此时skin与skinname上下文属性相关联。用户可以在combobox下拉列表中加入不同的皮肤选项，点击每个选项skinname赋予不同的值，由上述内容可知，skinname赋予不同的值，应用的皮肤就会跟着切换，例如skinname赋予星空灰，应用的皮肤将会切换至星空灰皮肤。给最外层的uitheme的withstyle样式属性赋予通用主题样式，由上述内容可知，被uitheme包裹的内部所有的控件，例如rectangle、label、button等控件都会使用通用主题样式的皮肤，且因为皮肤选择了星空灰，所以控件会自动选择星空灰皮肤对应的星空灰通用主题样式。当qml页面中存在局部区域内需要使用的主题样式与上一级不一致时，可以在局部区域控件的上一级再包裹一层uitheme控件，第二层uitheme控件的withstyle样式属性值为弹窗主题样式。被第二层uitheme包裹的控件，会优先将控件的属性值更新为通用主题样式，再将弹窗样式重定义的属性值更新为弹窗主题样式的属性值，即第二层被包裹的控件，会在继承通用主题样式的基础上，使用弹窗主题样式。且因为皮肤选择了星空灰，所以控件会在继承星空灰通用主题样式的基础上，使用星空灰弹窗主题样式。此时其中的button的背景色等属性就会自动选择星空灰弹窗主题样式定义的属性值，而星空灰弹窗主题样式未重定义的属性，例如文字颜色等属性则会使用星空灰通用主题样式的属性值。如果控件中涉及到了图片，例如button中加入了icon图标，该装置则会根据主题中赋予的icon图标路径值，从资源文件中加载对应路径的图片。当combobox的下拉选项指向中国红皮肤时，第一层
uitheme包裹的控件就会自动切换至中国红通用样式，第二层uitheme包裹的控件就会在继承中国红通用主题样式的基础之上使用中国红弹窗主题样式。
[0097]
请参阅图6，图6为本发明实施例提供的一种qml主题皮肤更换装置的结构示意图。
[0098]
本发明实施例提供了一种qml主题皮肤更换装置，包括：
[0099]
界面主题服务调用模块601，用于当接收到针对预设的qml控件的主题皮肤更换请求时，调用界面主题服务；
[0100]
目标界面主题确定模块602，用于根据主题皮肤更换请求从界面主题服务中确定目标界面主题；
[0101]
目标主题样式获取模块603，用于获取与目标界面主题对应的目标主题样式；
[0102]
主题皮肤获取模块604，用于获取与目标主题样式对应的主题皮肤；
[0103]
主题皮肤显示模块605，用于在预设显示界面上显示主题皮肤。
[0104]
在本发明实施例中，目标界面主题确定模块602，包括：
[0105]
皮肤属性获取子模块，用于从主题皮肤更换请求中获取皮肤属性；
[0106]
目标界面主题确定子模块，用于根据皮肤属性从界面主题服务中确定目标界面主题。
[0107]
在本发明实施例中，目标主题样式包括通用主题样式；目标主题样式获取模块603，包括：
[0108]
通用属性获取子模块，用于获取目标界面主题的通用属性；
[0109]
通用主题样式获取子模块，用于根据目标界面主题的属性，获取与目标界面主题对应的通用主题样式；
[0110]
通用主题样式赋予子模块，用于为通用属性赋予通用主题样式。
[0111]
在本发明实施例中，目标主题样式还包括弹窗主题样式；目标主题样式获取模块603，还包括：
[0112]
弹窗属性获取子模块，用于获取qml控件中已被重定义的弹窗属性；
[0113]
弹窗主题样式获取子模块，用于根据目标界面主题的属性，获取与目标界面主题对应的弹窗主题样式；
[0114]
弹窗主题样式赋予子模块，用于为弹窗属性赋予弹窗主题样式。
[0115]
本发明实施例还提供了一种电子设备，设备包括处理器以及存储器：
[0116]
存储器用于存储程序代码，并将程序代码传输给处理器；
[0117]
处理器用于根据程序代码中的指令执行本发明实施例的qml主题皮肤更换方法。
[0118]
本发明实施例还提供了一种计算机可读存储介质，计算机可读存储介质用于存储程序代码，程序代码用于执行本发明实施例的qml主题皮肤更换方法。
[0119]
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
[0120]
本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。
[0121]
本领域内的技术人员应明白，本发明实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明实施例可采用在一个或多个其中包含有计算机可
用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
[0122]
本发明实施例是参照根据本发明实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
[0123]
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
[0124]
这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
[0125]
尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。
[0126]
最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。
[0127]
以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。