CN113568609B - 基于Qss样式表的UI样式编辑方法 - Google Patents

Abstract

本发明提供了基于Qss样式表的UI样式编辑方法,属于数据可视化设计的技术领域，其通过分析UI样式资源文件的文件内容，确定其包含的所有UI事件元素和转换得到可视化形式的页面元素；再构建触发动作与页面元素之间对应的页面设计要素，以此将页面设计要素换成UI控件；接着利用根据Qss样式表生成的宏文件加载到UI控件中，从而得到可视化形式的UI框架；最后将UI框架布置在软件主界面的不同区域中，从而在不同区域形成与所述UI事件元素相关联的界面操作元素，其利用Qss样式表对UI控件进行加工处理，从而使得到的UI框架能够适用于不同类型的软件主界面中，从而提高UI框架的普适性和软件主界面的设计效率。

Description

基于Qss样式表的UI样式编辑方法

技术领域

本发明涉及数据可视化设计的技术领域，尤其涉及基于Qss样式表的UI样式编辑方法。

背景技术

在软件开发过程中，开发人员需要在软件主界面上进行不同的操作，从而实现相应的软件代码编辑。为了提高开发人员的代码编辑准确性和效率，通常会在软件主界面的工具栏或者任务量上设置相应的内嵌UI样式的操作按键或者操作窗口。但是，这些内嵌UI样式的操作按键或者操作窗口通常是针对不同软件专门生成的，其并不能针对不同软件形成普适性的内嵌UI样式的操作按键或者操作窗口，这样严重降低软件主界面的设计效率和UI样式的可重复利用率。

发明内容

针对上述现有技术存在的缺陷，本发明提供基于Qss样式表的UI样式编辑方法，其通过分析UI样式资源文件的文件内容，确定其包含的所有UI事件元素和转换得到可视化形式的页面元素；再构建触发动作与页面元素之间对应的页面设计要素，以此将页面设计要素换成UI控件；接着利用根据Qss样式表生成的宏文件加载到UI控件中，从而得到可视化形式的UI框架；最后将UI框架布置在软件主界面的不同区域中，从而在不同区域形成与所述UI事件元素相关联的界面操作元素，其利用Qss样式表对UI控件进行加工处理，从而使得到的UI框架能够适用于不同类型的软件主界面中，这不需要针对不同的软件专门设计专用的UI框架，从而提高UI框架的普适性和软件主界面的设计效率。

本发明提供基于Qss样式表的UI样式编辑方法，其包括如下步骤：

步骤S1，获取UI样式资源文件的文件内容；分析所述文件内容，以此确定所述UI样式资源文件包含的所有UI事件元素，并将所述UI事件元素转换成可视化形式的页面元素；

步骤S2，确定每个页面元素在页面上对应的触发动作，以此构建触发动作与页面元素之间对应的页面设计要素；并通过属性编辑器对每个页面设计要素进行编辑，从而将每个页面设计要素转换成UI控件；

步骤S3，将Qss样式表包含的每个样式语法转换成语法模板；并对每个语法模板进行初始化处理，以此获得每个语法模板对应的宏文件；再将所述宏文件对应加载到所述UI控件中，从而得到可视化形式的UI框架；

步骤S4，将所述UI框架布置在软件主界面的不同区域中，从而在不同区域形成与所述UI事件元素相关联的界面操作元素；

进一步，在所述步骤S1中，获取UI样式资源文件的文件内容具体包括：

根据软件主界面的操作功能需求，从预设UI样式资源文件库中选择与所述操作功能需求相匹配的UI样式资源文件；其中，软件主界面的操作功能需求包括在软件主界面上进行代码编辑操作或者代码调用操作对应的功能需求；

对选择得到的UI样式资源文件进行解析识别，从而得到UI样式资源文件的文件内容；其中，所述文件内容包括的软件主界面配置数据；

进一步，在所述步骤S1中，分析所述文件内容，以此确定所述UI样式资源文件包含的所有UI事件元素具体包括：

按照在软件主界面进行配置操作的类型，对所述软件主界面配置数据进行区分，以此确定所述UI样式资源文件包含的UI事件元素；其中，在软件主界面进行的配置操作与UI事件元素一一对应；

进一步，在所述步骤S1中，将所述UI事件元素转换成可视化形式的页面元素具体包括：

根据所述UI事件元素对应的在软件主界面进行的配置操作，生成与所述配置操作相对应的三维形式或者动态形式的可视化页面按键或者可视化页面窗口，以此作为所述页面元素；

进一步，在所述步骤S2中，确定每个页面元素在页面上对应的触发动作，以此构建触发动作与页面元素之间对应的页面设计要素具体包括：

确定启动每个页面元素在页面上对应的触发动作的类型，其中，所述触发动作的类型包括对页面按键进行点击、或者对页面窗口进行点击或拖拽移动；

构建页面元素与不同类型触发动作之间的一对一或者一对多的映射关系，并将所述映射关系作为所述页面设计要素；

进一步，在所述步骤S2中，通过属性编辑器对每个页面设计要素进行编辑，从而将每个页面设计要素转换成UI控件具体包括：

从所述页面设计要素中获取每个页面元素在触发动作的作用下，对应的触发响应时间，以此作为所述页面设计要素的属性值；

将所述触发响应时间与预设响应时间阈值进行比对；若所述触发响应时间大于预设响应时间阈值，通过属性编辑器将所述触发响应时间降低至预设响应时间阈值，从而实现对每个页面设计要素的编辑；若所述触发响应时间小于或等于预设响应时间阈值，则保持当前触发响应时间不变；

再通过属性编辑器将每个页面设计元素转换成UI控件；

进一步，在所述步骤S3中，将Qss样式表包含的每个样式语法转换成语法模板具体包括：

通过宏定义，对Qss样式表包含的每个样式语法设置相应的抽象语法框架，从而将每个样式语法转换成语法模板；

进一步，在所述步骤S3中，对每个语法模板进行初始化处理，以此获得每个语法模板对应的宏文件具体包括：

利用构造函数，对每个语法模板包含的语法逻辑进行初始化处理，以此获得每个语法模板对应的宏文件；其中，所述构造函数是用于对语法逻辑进行语法规范化编辑的函数；

进一步，在所述步骤S3中，将所述宏文件对应加载到所述UI控件中，从而得到可视化形式的UI框架具体包括：

将所述宏文件以插件的形式加载到所述UI控件中，再对所述UI控件进行封装以及添加相应的图形和/或颜色视觉元素，从而得到可视化形式的UI框架；

进一步，在所述步骤S4中，将所述UI框架布置在软件主界面的不同区域中，从而在不同区域形成与所述UI事件元素相关联的界面操作元素具体包括：

将所述UI框架布置在软件主界面的工具栏区域或者任务栏区域中，从而在工具栏区域或者任务栏区域形成与所述UI事件元素相关联的界面操作元素。

本发明的有益效果是：

相比于现有技术，本发明的基于Qss样式表的UI样式编辑方法通过分析UI样式资源文件的文件内容，确定其包含的所有UI事件元素和转换得到可视化形式的页面元素；再构建触发动作与页面元素之间对应的页面设计要素，以此将页面设计要素换成UI控件；接着利用根据Qss样式表生成的宏文件加载到UI控件中，从而得到可视化形式的UI框架；最后将UI框架布置在软件主界面的不同区域中，从而在不同区域形成与所述UI事件元素相关联的界面操作元素，其利用Qss样式表对UI控件进行加工处理，从而使得到的UI框架能够适用于不同类型的软件主界面中，这不需要针对不同的软件专门设计专用的UI框架，从而提高UI框架的普适性和软件主界面的设计效率。

具体实施方式

下面对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

该基于Qss样式表的UI样式编辑方法包括如下步骤：

步骤S1，获取UI样式资源文件的文件内容；分析该文件内容，以此确定该UI样式资源文件包含的所有UI事件元素，并将该UI事件元素转换成可视化形式的页面元素；

步骤S2，确定每个页面元素在页面上对应的触发动作，以此构建触发动作与页面元素之间对应的页面设计要素；并通过属性编辑器对每个页面设计要素进行编辑，从而将每个页面设计要素转换成UI控件；

步骤S3，将Qss样式表包含的每个样式语法转换成语法模板；并对每个语法模板进行初始化处理，以此获得每个语法模板对应的宏文件；再将该宏文件对应加载到该UI控件中，从而得到可视化形式的UI框架；

步骤S4，将该UI框架布置在软件主界面的不同区域中，从而在不同区域形成与该UI事件元素相关联的界面操作元素。

上述技术方案的有益效果为：该基于Qss样式表的UI样式编辑方法通过分析UI样式资源文件的文件内容，确定其包含的所有UI事件元素和转换得到可视化形式的页面元素；再构建触发动作与页面元素之间对应的页面设计要素，以此将页面设计要素换成UI控件；接着利用根据Qss样式表生成的宏文件加载到UI控件中，从而得到可视化形式的UI框架；最后将UI框架布置在软件主界面的不同区域中，从而在不同区域形成与该UI事件元素相关联的界面操作元素，其利用Qss样式表对UI控件进行加工处理，从而使得到的UI框架能够适用于不同类型的软件主界面中，这不需要针对不同的软件专门设计专用的UI框架，从而提高UI框架的普适性和软件主界面的设计效率。

优选地，在该步骤S1中，获取UI样式资源文件的文件内容具体包括：

根据软件主界面的操作功能需求，从预设UI样式资源文件库中选择与该操作功能需求相匹配的UI样式资源文件；其中，软件主界面的操作功能需求包括在软件主界面上进行代码编辑操作或者代码调用操作对应的功能需求；

对选择得到的UI样式资源文件进行解析识别，从而得到UI样式资源文件的文件内容；其中，该文件内容包括的软件主界面配置数据。

上述技术方案的有益效果为：设计布局软件主界面上比如代码编辑或者代码调用等操作都需要借助相应的UI样式资源文件中的文件内容来实现的。该UI样式资源文件包含若干不同软件主界面配置数据，这些软件主界面配置数据可用于但不限于设定软件主界面中实现不同操作功能的按键或者窗口的形状外观、颜色外观、设置位置，还有这些按键或者窗口具体能够实现的操作功能的类型。

优选地，在该步骤S1中，分析该文件内容，以此确定该UI样式资源文件包含的所有UI事件元素具体包括：

按照在软件主界面进行配置操作的类型，对该软件主界面配置数据进行区分，以此确定该UI样式资源文件包含的UI事件元素；其中，在软件主界面进行的配置操作与UI事件元素一一对应。

上述技术方案的有益效果为：由于软件主界面通常需要实现多种不同的配置操作，这些配置操作是与软件主界面配置数据一一对应的，比如在软件主界面上的代码调用操作只与其中一项软件主界面配置数据相匹配。为了对该软件主界面配置数据进行准确的细分，需要将每个配置操作视为一个独立的UI事件元素，这样能够以UI事件元素为基准，对软件主界面配置数据进行区分，从而便于后续针对不同的UI事件元素进行精确的筛选区分。

优选地，在该步骤S1中，将该UI事件元素转换成可视化形式的页面元素具体包括：

根据该UI事件元素对应的在软件主界面进行的配置操作，生成与该配置操作相对应的三维形式或者动态形式的可视化页面按键或者可视化页面窗口，以此作为该页面元素。

上述技术方案的有益效果为：由于UI事件元素与在软件主界面上的配置操作是一一对应关系，在实际操作中，可根据每个UI事件元素选择合适的三维形式或者动态形式的可视化页面按键或者可视化页面窗口，作为软件主界面上对应的页面元素，这些页面元素在视觉上呈现按键或者窗口的形式，当在软件主界面上对按键或者窗口进行点击或者拖拽移动等操作时，按键或者窗口能够触发形成相应配置操作。其中，三维形式或者动态形式的可视化页面按键或者可视化页面窗口是指具有立体三维外观的按键或者窗口，或者具有颜色外观/光泽度外观动态变化的按键或者窗口。

优选地，在该步骤S2中，确定每个页面元素在页面上对应的触发动作，以此构建触发动作与页面元素之间对应的页面设计要素具体包括：

确定启动每个页面元素在页面上对应的触发动作的类型，其中，该触发动作的类型包括对页面按键进行点击、或者对页面窗口进行点击或拖拽移动；

构建页面元素与不同类型触发动作之间的一对一或者一对多的映射关系，并将该映射关系作为该页面设计要素。

上述技术方案的有益效果为：每个页面元素在受到对应触发动作的作用下会实现相应的配置操作，通过构建页面元素与不同类型触发动作之间的一对一或者一对多的映射关系，确保页面元素能够准确地实现相应的配置操作而不会发生误触发的情况。

优选地，在该步骤S2中，通过属性编辑器对每个页面设计要素进行编辑，从而将每个页面设计要素转换成UI控件具体包括：

从该页面设计要素中获取每个页面元素在触发动作的作用下，对应的触发响应时间，以此作为该页面设计要素的属性值；

将该触发响应时间与预设响应时间阈值进行比对；若该触发响应时间大于预设响应时间阈值，通过属性编辑器将该触发响应时间降低至预设响应时间阈值，从而实现对每个页面设计要素的编辑；若该触发响应时间小于或等于预设响应时间阈值，则保持当前触发响应时间不变；

再通过属性编辑器将每个页面设计元素转换成UI控件。

上述技术方案的有益效果为：当页面元素受到点击或者移动拖拽作用时，其会触发而进行代码调用等配置操作，但是该触发过程是存在一定的响应时间，该响应时间的长短决定页面元素的响应快慢，通过将该触发响应时间与预设响应时间阈值进行比对，并根据比对结果，利用属性编辑器来调整触发响应时间，从而提高页面元素的响应速度。其中，该属性编辑器可为但不限于是将页面设计元素打包形成UI控件的专用插件。

优选地，在该步骤S3中，将Qss样式表包含的每个样式语法转换成语法模板具体包括：

通过宏定义，对Qss样式表包含的每个样式语法设置相应的抽象语法框架，从而将每个样式语法转换成语法模板。

上述技术方案的有益效果为：通过对Qss样式表包含的每个样式语法进行宏定义，能够将不同样式语法进行抽象化处理，从而得到对应的抽象语法框架。该抽象语法框架是包含Qss样式表中不同样式的逻辑语法，再将该抽象语法框架作为语法模板能够有效提高Qss样式表的语法可重复利用率。

优选地，在该步骤S3中，对每个语法模板进行初始化处理，以此获得每个语法模板对应的宏文件具体包括：

利用构造函数，对每个语法模板包含的语法逻辑进行初始化处理，以此获得每个语法模板对应的宏文件；其中，该构造函数是用于对语法逻辑进行语法规范化编辑的函数。

上述技术方案的有益效果为：利用构造函数，能够对每个语法模板进行宏文件提取的初始化处理，这样能够将语法模板对应的逻辑语法提炼集中到宏文件中。

优选地，在该步骤S3中，将该宏文件对应加载到该UI控件中，从而得到可视化形式的UI框架具体包括：

将该宏文件以插件的形式加载到该UI控件中，再对该UI控件进行封装以及添加相应的图形和/或颜色视觉元素，从而得到可视化形式的UI框架。

上述技术方案的有益效果为：将该宏文件以插件的形式加载到该UI控件中，这样能够便于实现宏文件与UI控件的解耦组装，以及方便开发人员根据实际需要对UI控件进行不同宏文件的功能扩展。

优选地，在该步骤S4中，将该UI框架布置在软件主界面的不同区域中，从而在不同区域形成与该UI事件元素相关联的界面操作元素具体包括：

将该UI框架布置在软件主界面的工具栏区域或者任务栏区域中，从而在工具栏区域或者任务栏区域形成与该UI事件元素相关联的界面操作元素。

上述技术方案的有益效果为：将该UI框架布置在软件主界面的工具栏区域或者任务栏区域中，能够保证对软件主界面的不同功能区域进行全面的界面操作元素布局。

从上述实施例的内容可知，该基于Qss样式表的UI样式编辑方法通过分析UI样式资源文件的文件内容，确定其包含的所有UI事件元素和转换得到可视化形式的页面元素；再构建触发动作与页面元素之间对应的页面设计要素，以此将页面设计要素换成UI控件；接着利用根据Qss样式表生成的宏文件加载到UI控件中，从而得到可视化形式的UI框架；最后将UI框架布置在软件主界面的不同区域中，从而在不同区域形成与所述UI事件元素相关联的界面操作元素，其利用Qss样式表对UI控件进行加工处理，从而使得到的UI框架能够适用于不同类型的软件主界面中，这不需要针对不同的软件专门设计专用的UI框架，从而提高UI框架的普适性和软件主界面的设计效率。

Claims (7)

1.基于Qss样式表的UI样式编辑方法，其特征在于，其包括如下步骤：

步骤S1，获取UI样式资源文件的文件内容；分析所述文件内容，以此确定所述UI样式资源文件包含的所有UI事件元素，并将所述UI事件元素转换成可视化形式的页面元素；

步骤S2，确定每个页面元素在页面上对应的触发动作，以此构建触发动作与页面元素之间对应的页面设计要素；并通过属性编辑器对每个页面设计要素进行编辑，从而将每个页面设计要素转换成UI控件；

步骤S3，将Qss样式表包含的每个样式语法转换成语法模板；并对每个语法模板进行初始化处理，以此获得每个语法模板对应的宏文件；再将所述宏文件对应加载到所述UI控件中，从而得到可视化形式的UI框架；

步骤S4，将所述UI框架布置在软件主界面的不同区域中，从而在不同区域形成与所述UI事件元素相关联的界面操作元素；

其中，/在所述步骤S1中，将所述UI事件元素转换成可视化形式的页面元素具体包括：

根据所述UI事件元素对应的在软件主界面进行的配置操作，生成与所述配置操作相对应的三维形式或者动态形式的可视化页面按键或者可视化页面窗口，以此作为所述页面元素；

在所述步骤S2中，通过属性编辑器对每个页面设计要素进行编辑，从而将每个页面设计要素转换成UI控件具体包括：

从所述页面设计要素中获取每个页面元素在触发动作的作用下，对应的触发响应时间，以此作为所述页面设计要素的属性值；

将所述触发响应时间与预设响应时间阈值进行比对；若所述触发响应时间大于预设响应时间阈值，通过属性编辑器将所述触发响应时间降低至预设响应时间阈值，从而实现对每个页面设计要素的编辑；若所述触发响应时间小于或等于预设响应时间阈值，则保持当前触发响应时间不变；

再通过属性编辑器将每个页面设计元素转换成UI控件；

在所述步骤S3中，将所述宏文件对应加载到所述UI控件中，从而得到可视化形式的UI框架具体包括：

将所述宏文件以插件的形式加载到所述UI控件中，再对所述UI控件进行封装以及添加相应的图形和/或颜色视觉元素，从而得到可视化形式的UI框架。

2.根据权利要求1所述的基于Qss样式表的UI样式编辑方法，其特征在于：

在所述步骤S1中，获取UI样式资源文件的文件内容具体包括：

根据软件主界面的操作功能需求，从预设UI样式资源文件库中选择与所述操作功能需求相匹配的UI样式资源文件；其中，软件主界面的操作功能需求包括在软件主界面上进行代码编辑操作或者代码调用操作对应的功能需求；

对选择得到的UI样式资源文件进行解析识别，从而得到UI样式资源文件的文件内容；其中，所述文件内容包括的软件主界面配置数据。

3.根据权利要求1所述的基于Qss样式表的UI样式编辑方法，其特征在于：

在所述步骤S1中，分析所述文件内容，以此确定所述UI样式资源文件包含的所有UI事件元素具体包括：

按照在软件主界面进行配置操作的类型，对所述软件主界面配置数据进行区分，以此确定所述UI样式资源文件包含的UI事件元素；其中，在软件主界面进行的配置操作与UI事件元素一一对应。

4.根据权利要求1所述的基于Qss样式表的UI样式编辑方法，其特征在于：

在所述步骤S2中，确定每个页面元素在页面上对应的触发动作，以此构建触发动作与页面元素之间对应的页面设计要素具体包括：

确定启动每个页面元素在页面上对应的触发动作的类型，其中，所述触发动作的类型包括对页面按键进行点击、或者对页面窗口进行点击或拖拽移动；

构建页面元素与不同类型触发动作之间的一对一或者一对多的映射关系，并将所述映射关系作为所述页面设计要素。

5.根据权利要求1所述的基于Qss样式表的UI样式编辑方法，其特征在于：

在所述步骤S3中，将Qss样式表包含的每个样式语法转换成语法模板具体包括：

通过宏定义，对Qss样式表包含的每个样式语法设置相应的抽象语法框架，从而将每个样式语法转换成语法模板。

6.根据权利要求1所述的基于Qss样式表的UI样式编辑方法，其特征在于：

在所述步骤S3中，对每个语法模板进行初始化处理，以此获得每个语法模板对应的宏文件具体包括：

利用构造函数，对每个语法模板包含的语法逻辑进行初始化处理，以此获得每个语法模板对应的宏文件；其中，所述构造函数是用于对语法逻辑进行语法规范化编辑的函数。

7.根据权利要求1所述的基于Qss样式表的UI样式编辑方法，其特征在于：

在所述步骤S4中，将所述UI框架布置在软件主界面的不同区域中，从而在不同区域形成与所述UI事件元素相关联的界面操作元素具体包括：

将所述UI框架布置在软件主界面的工具栏区域或者任务栏区域中，从而在工具栏区域或者任务栏区域形成与所述UI事件元素相关联的界面操作元素。