CN112099792B - 一种可视化ui样式设计方法及系统 - Google Patents
一种可视化ui样式设计方法及系统 Download PDFInfo
- Publication number
- CN112099792B CN112099792B CN202010986356.2A CN202010986356A CN112099792B CN 112099792 B CN112099792 B CN 112099792B CN 202010986356 A CN202010986356 A CN 202010986356A CN 112099792 B CN112099792 B CN 112099792B
- Authority
- CN
- China
- Prior art keywords
- style
- visual
- attribute
- control
- template
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 230000000007 visual effect Effects 0.000 title claims abstract description 109
- 238000000034 method Methods 0.000 title claims abstract description 38
- 238000013461 design Methods 0.000 title claims abstract description 30
- 238000013507 mapping Methods 0.000 claims abstract description 14
- 238000012986 modification Methods 0.000 claims abstract description 11
- 230000004048 modification Effects 0.000 claims abstract description 11
- 230000006870 function Effects 0.000 claims description 28
- 238000001914 filtration Methods 0.000 claims description 7
- 238000012544 monitoring process Methods 0.000 claims description 5
- 238000009877 rendering Methods 0.000 claims description 5
- 238000010276 construction Methods 0.000 claims description 4
- 230000000694 effects Effects 0.000 claims description 3
- 238000004806 packaging method and process Methods 0.000 claims description 3
- 238000012800 visualization Methods 0.000 claims description 3
- 230000008859 change Effects 0.000 claims description 2
- 230000007547 defect Effects 0.000 abstract description 2
- 238000010586 diagram Methods 0.000 description 13
- 230000008569 process Effects 0.000 description 5
- 238000007792 addition Methods 0.000 description 3
- 238000011161 development Methods 0.000 description 3
- 230000006978 adaptation Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012856 packing Methods 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
- G06F8/315—Object-oriented languages
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computing Systems (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明涉及QTDesigner的可视化设计技术领域，提供了一种可视化UI样式设计方法及系统，方法包括：S1：定义用于实现控件的可视化UI样式设计的基础抽象类；S2：同时继承基础抽象类和QT原生控件对应的类，生成自定义可视化样式编辑控件；S3：基于可视化样式编辑控件，创建对应的样式属性，并通过QTDesigner属性面板展示出来；S4：在QTDesigner属性面板上通过可视化属性编辑器对属性值进行编辑，映射样式属性值，形成修改样式后的UI控件。针对QTDesigner的缺陷进行改进，将抽象的QSS代码转化为直观的可视化的界面，无需记住QSS语法，直接在可视化的界面上对属性值进行配置即可。
Description
技术领域
本发明涉及QTDesigner的可视化设计的技术领域，尤其涉及一种可视化UI样式设计方法及系统。
背景技术
QT是一个跨平台的C++图形用户界面库，提供了QTDesigner作为图形界面编辑器。QTDesigner可以支持包括程序设计师、UI设计师在内的用户对UI控件进行布局和UI控件样式的编辑，但是对于UI控件的样式定义，需要编写QSS样式代码，编写QSS样式代码存在如下几个方面的缺点：
(1)QSS样式代码非常抽象，不够直观。
(2)需要记住QSS的语法并理解众多样式代码的含义，以及对应参数。
(3)由于开发人员的手误或者不熟悉导致编码出现错误的情况下无法表现出正确的UI样式，而且很难查找错误。
(4)需要重复编写许多可以重用的QSS代码，导致重复劳动。
发明内容
针对上述问题，本发明的目的在于提供一种可视化UI样式设计方法及系统，针对QTDesigner的缺陷进行了改进，将抽象的QSS代码转化为直观的可视化的界面，无需记住QSS语法，直接在可视化的界面上对属性值进行配置即可。
本发明的上述发明目的是通过以下技术方案得以实现的：
一种可视化UI样式设计方法，包括以下步骤：
S1：定义用于实现控件的可视化UI样式设计的基础抽象类；
S2：同时继承所述基础抽象类和QT原生控件对应的类，生成自定义的可视化样式编辑控件；
S3：基于所述可视化样式编辑控件，创建对应的样式属性，并通过QTDesigner属性面板展示出来，其中，所述样式属性为通过使用预先创建的QSS样式模板生成；
S4：在所述QTDesigner属性面板上通过可视化属性编辑器对属性值进行编辑，映射样式属性值，形成修改样式后的UI控件。
进一步地，在步骤S1中，还包括：
在所述基础抽象类中保存有包括样式模板映射、样式值更改、样式应用、渲染事件过滤、鼠标交互事件过滤在内的一系列的用于为样式的应用或事件的监控提供统一的基础流程的成员变量和成员函数，并且所述基础抽象类中的所述成员变量和所述成员函数，根据基础流程的新增或改变进行随时的增加、修改或删除。
进一步地，在步骤S3中，还包括：
所述QSS样式模板，为通过宏定义实现属性可视化逻辑的预定义，方便后续快速批量实现自定义所述可视化样式编辑控件，具体为：
将QSS样式中每种类型的样式语法格式通过宏定义成语法模板，为每种类型的样式提供一个抽象语法框架，其中，所述语法模板包括样式名和样式值类型在内的参数；
根据所述语法模板定义出每个具体样式的所述QSS样式模板，以样式值作为参数，以所述QSS样式模板作为当前所述可视化样式编辑控件的一个样式属性。
进一步地，在步骤S3中，还包括：
使用Q_PROPERTY宏定义将所述样式属性定义成可视化属性，在所述QTDesigner属性面板中展示出来。
进一步地，根据所述语法模板定义出每个具体样式的所述QSS样式模板，还包括：
将从所述语法模板到所述QSS样式模板的初始化逻辑定义为一系列的初始化宏；
在所述可视化样式编辑控件的构造函数中，调用对应的所述初始化宏，将当前所述可视化样式编辑控件需要的所述语法模板与样式名以及样式值类型映射为一个具体的所述QSS样式模板。
进一步地，当用户从所述QTDesigner属性面板中为所述样式属性设置属性值时，修改所述QSS样式模板中对应的样式值；调用applyStyles()函数触发所述可视化样式编辑控件渲染事件，通过eventsFilter()过滤出渲染事件后调用所述QT原生控件的setStyleSheet函数应用最终的效果。
进一步地，将包括所述基础抽象类、所述语法模板、所述QSS样式模板、所述初始化宏在内的自定义的类和模板，打包生成一个QTDesigner可识别的dll插件文件，以插件的方式给QTDesigner扩展出具有可视化样式编辑的UI框架；
将所述dll插件文件放入QTDesigner对应的插件目录，启动QTDesigner自动加载所述dll插件文件；
所述dll插件文件加载完成后，自动创建所述具有可视化样式编辑的UI框架的控件列表，用户从所述控件列表中选择所述可视化样式编辑控件；
所述可视化样式编辑控件自动在所述QTDesigner属性面板中将样式以属性的形式展现出来，通过所述可视化属性编辑器对属性值进行编辑。
与上述可视化UI样式设计方法相对应，本发明还提供了一种可视化UI样式设计系统，包括：
基础抽象类定义模块，用于定义用于实现控件的可视化UI样式设计的基础抽象类；
控件生成模块，用于同时继承所述基础抽象类和QT原生控件对应的类，生成自定义的可视化样式编辑控件；
样式属性创建模块，用于基于所述可视化样式编辑控件，创建对应的样式属性，并通过QTDesigner属性面板展示出来，其中，所述样式属性为通过使用预先创建的QSS样式模板生成；
属性值编辑模块，用于在所述QTDesigner属性面板上通过可视化属性编辑器对属性值进行编辑，映射样式属性值，形成修改样式后的UI控件。
一种计算机设备，包括存储器和一个或多个处理器，所述存储器中存储有计算机代码，所述计算机代码被所述一个或多个处理器执行时，使得所述一个或多个处理器执行上述可视化UI样式设计方法。
一种计算机可读存储介质，所述计算机可读存储介质存储有计算机代码，当所述计算机代码被执行时，上述可视化UI样式设计方法被执行。
与现有技术相比，本发明包括以下至少一种有益效果是：
(1)通过提供一种可视化UI样式设计方法，包括步骤：S1：定义用于实现控件的可视化UI样式设计的基础抽象类；S2：同时继承所述基础抽象类和QT原生控件对应的类，生成自定义的可视化样式编辑控件；S3：基于所述可视化样式编辑控件，创建对应的样式属性，并通过QTDesigner属性面板展示出来，其中，所述样式属性为通过使用预先创建的QSS样式模板生成；S4：在所述QTDesigner属性面板上通过可视化属性编辑器对属性值进行编辑，映射样式属性值，形成修改样式后的UI控件。上述技术方案，在原始的QT原生控件的基础上，对控件进行改进，形成可视化样式编辑控件，通过属性面板即可以实现对样式属性值的修改，无需人工的去编写QSS代码。
(2)通过设计基础抽象类，将包括样式模板映射、样式值更改、样式应用、渲染事件过滤、鼠标交互事件过滤在内的一系列的用于为样式的应用或事件的监控提供统一的基础流程的成员变量和成员函数全部保存下来，后让可视化编辑控件继承基础抽象类，增加了代码的复用性，基础的流程只需要编辑一次即可，无需重复编辑。
(3)通过将QSS样式中每种类型的样式语法格式通过宏定义成语法模板，为每种类型的样式提供一个抽象语法框架，其中，所述语法模板包括样式名和样式值类型在内的参数；根据所述语法模板定义出每个具体样式的所述QSS样式模板，以样式值作为参数，以所述QSS样式模板作为当前所述可视化样式编辑控件的一个样式属性。上述技术方案，首先根据语法对样式进行分类，为每个类型的模板统一的定义一个公用的语法框架，后根据语法框架再细化的去定义每个具体样式的QSS样式模板，增加了样式属性定义的规范性，同时进一步增加了代码的复用性。
(4)通过将包括所述基础抽象类、所述语法模板、所述QSS样式模板、所述初始化宏在内的自定义的类和模板，打包生成一个QTDesigner可识别的dll插件文件，以插件的方式给QTDesigner扩展出具有可视化样式编辑的UI框架。上述技术方案对自定义开发的部分进行打包，QTDesigner加载后即可直接使用，且打包后的文件具有独立性，方便后续进行维护和版本的更新。
附图说明
图1为本发明一种可视化UI样式设计方法的整体流程图；
图2为本发明自定义图片显示控件继承关系示意图；
图3为本发明对基础抽象类ZQtComponent中成员变量和成员函数的具体举例示意图；
图4为本发明从样式属性生成->样式可视化->样式应用过程的原理图；
图5为本发明扩展出的具有可视化样式编辑的UI框架工作的整体过程图；
图6为本发明插件装载完成后自动创建UI控件列表的示意图；
图7为本发明创建按钮的示意图；
图8为本发明可视化编辑器的示意图；
图9为本发明修改文字属性的示意图；
图10为本发明修改颜色属性的示意图。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本发明的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。
本发明针对QTDesigner的缺陷进行了改进，将抽象的QSS代码转化为直观的可视化的界面，例如：字体、字号、颜色、边框尺寸、倒角、图片自由连接等等均提供了可视化的操作界面。以下通过具体的实施例进行说明。
第一实施例
如图1所示，本实施例提供了一种可视化UI样式设计方法，包括以下步骤：
S1：定义用于实现控件的可视化UI样式设计的基础抽象类。
具体地，在所述基础抽象类中保存有包括样式模板映射、样式值更改、样式应用、渲染事件过滤、鼠标交互事件过滤在内的一系列的用于为样式的应用或事件的监控提供统一的基础流程的成员变量和成员函数，并且所述基础抽象类中的所述成员变量和所述成员函数，根据基础流程的新增或改变进行随时的增加、修改或删除。
基础抽象类作为所有的控件的基类，其原理是用C++可以多继承的特性，让自定义的控件同时从基础抽象类和对应的QT控件(如，QWidget，QLabel，QPushButton等任意要重写的Qt控件)派生，一方面从基础抽象类派生使得自定义的控件具有了可视化样式编辑的功能，另一方面从Qt原生控件派生保留了Qt原有控件的功能。基础抽象类为样式的应用，事件的监控提供一个统一的基础流程。
举个例子来说，自定义图片显示控件，假设原生的图片显示控件为QPushButton，基础抽象类为ZQtComponent,生成的自定义图片显示控件为ZQtButton,继承关系如图2所示。
对于基础抽象类ZQtComponent，如图3所示，为对ZQtComponent中成员变量和成员函数的具体举例，但是实际应用中并不仅限于图3所列出的成员变量和成员函数，成员变量和成员函数的名称也不一定需要与图3中相同，根据需要进行修改、新增、删除。
为了使得基础抽象类的功能更加清晰，对图3中所举例的成员变量和成员函数进行说明如下：
ZQtComponent主要成员函数说明(表1)：
表1
ZQtComponent主要成员变量说明(表2)：
表2
S2：同时继承所述基础抽象类和QT原生控件对应的类，生成自定义的可视化样式编辑控件。
具体地，在基础抽象类建立完成后，自定义可视化样式编辑控件，同时继承基础抽象类和QT原生控件，使得重新生成的可视化样式编辑控件同时具有QT原生控件的功能以及在基础抽象类中定义的功能。
S3：基于所述可视化样式编辑控件，创建对应的样式属性，并通过QTDesigner属性面板展示出来，其中，所述样式属性为通过使用预先创建的QSS样式模板生成。
具体地，在为可视化样式编辑控件创建对应的样式属性之前，需要预先创建QSS样式模板。所述QSS样式模板为通过宏定义实现属性可视化逻辑的预定义，方便后续快速批量实现自定义所述可视化样式编辑控件，具体为：
将QSS样式中每种类型的样式语法格式通过宏定义成语法模板，为每种类型的样式提供一个抽象语法框架，其中，所述语法模板包括样式名和样式值类型在内的参数，其目的是为了实现某个具体的样式可以重用此语法模板；
进而根据所述语法模板定义出每个具体样式的所述QSS样式模板，以样式值作为参数，以所述QSS样式模板作为当前所述可视化样式编辑控件的一个样式属性。
进一步地，根据所述语法模板定义出每个具体样式的所述QSS样式模板，还包括：将从所述语法模板到所述QSS样式模板的初始化逻辑定义为一系列的初始化宏；在所述可视化样式编辑控件的构造函数中，调用对应的所述初始化宏，将当前所述可视化样式编辑控件需要的所述语法模板与样式名以及样式值类型映射为一个具体的所述QSS样式模板。
语法模板的宏定义以及对应的初始化宏经过归纳总结后进一步封装成参数更少的宏定义，例如可以封装成zqtqssproperty.h的文件，方便实际创建自定义控件的开发过程使用和维护，以下表格对宏定义的清单进行举例说明(表3)：
表3
S4：在所述QTDesigner属性面板上通过可视化属性编辑器对属性值进行编辑，映射样式属性值，形成修改样式后的UI控件。
具体地，在本实施例中，当将QSS样式模板作为样式属性之后，通过可视化属性编辑器对属性值进行编辑，形成修改样式后的UI控件。
第二实施例
如图4所示，为本发明的从样式属性生成->样式可视化->样式应用过程的原理图，本实施例对该过程进行说明，包括以下步骤：
(1)当需要扩展控件时，根据该控件包含的样式特点，提取对应的QSS语法模板对应的宏写入控件对应的头文件中，并通过初始化宏根据语法模板在控件对应的构造函数中对QSS样式模板进行初始化。
(2)使用Q_PROPERTY宏定义将样式属性定义成可视化属性，在所述QTDesigner属性面板中展示出来。
(3)当用户从所述QTDesigner属性面板中为所述样式属性设置属性值时，修改所述QSS样式模板中对应的样式值；
(4)调用applyStyles()函数触发所述可视化样式编辑控件渲染事件，通过eventsFilter()过滤出渲染事件后调用所述QT原生控件的setStyleSheet函数应用最终的效果。
第三实施例
本实施例的步骤与第一实施例的步骤基本相同，不同的在于，还包括：
将包括所述基础抽象类、所述语法模板、所述QSS样式模板、所述初始化宏在内的自定义的类和模板，打包生成一个QTDesigner可识别的dll插件文件，以插件的方式给QTDesigner扩展出具有可视化样式编辑的UI框架；
将所述dll插件文件放入QTDesigner对应的插件目录，启动QTDesigner自动加载所述dll插件文件；
所述dll插件文件加载完成后，自动创建所述具有可视化样式编辑的UI框架的控件列表，用户从所述控件列表中选择所述可视化样式编辑控件；
所述可视化样式编辑控件自动在所述QTDesigner属性面板中将样式以属性的形式展现出来，通过所述可视化属性编辑器对属性值进行编辑。
第四实施例
如图5所示，为本发明扩展出的具有可视化样式编辑的UI框架工作的整体过程图，以下对整个过程进行说明，具体包括步骤：
(1)将dll插件文件放入QTDesigner对应插件目录，启动QTDesigner会自动载入插件。
(2)插件装载完成后自动创建UI控件列表。
如：可以自定义以下控件(表4)，以列表的形式展现出来。
表4
| 控件类名 | 控件名 |
| ZQtImage | 普通图片 |
| ZQtTileImage | 重复平铺图片 |
| ZQtScale9Image | 九切图片 |
| ZQtMultiSourcesImage | 多张图，动态图 |
| ZQtButton | 图片按钮 |
| ZQtColorBlock | 纯色块 |
| ZQtColorButton | 色块按钮 |
| ZQtContainer | 空容器 |
| ZQtGraphicsImage | 可绘制图 |
| ZQtGraphicsView | 可绘制视图 |
| ZQtCheckBox | 复选按钮 |
| ZQtList | 列表 |
| ZQtScrollBarV | 竖直滚动条 |
| ZQtScorllBarH | 水平滚动条 |
| ZQtLabel | 文本标签 |
| ZQtInputFiled | 单行输入文本 |
| ZQtTextEdit | 可编辑富文本框 |
| ZQtTextBrowser | 富文本浏览框 |
| ZQtPlainTextEdit | 可编辑文本框 |
| ZQtRadioGroup | 复选按钮组 |
| ZQtPie | 饼装统计图 |
(3)开发人员从UI控件列表中选择需要的控件，控件自动继承基础抽象类和QT原生控件生成可视化样式编辑控件；
(4)可视化样式编辑控件自动在QTDesigner的属性面板中将与本控件相关的样式以属性的形式显示出来。
(5)在所述QTDesigner属性面板上通过可视化属性编辑器对属性值进行编辑，映射样式属性值，形成修改样式后的UI控件实例。
第五实施例
本实施例提供本发明的方法在实际使用时的应用示例：
自定义UI在实际使用时的示意图如图6-10所示。
图6为插件装载完成后自动创建UI控件列表的示意图，选择UI控件列表中的控件进行创建，如创建如图7所示的按钮。
不使用本发明的方法修改样式时，需要编写如下代码：
QPushButton{border-image:url(:/icons/QPushButtonOut.png)20 20 20 20；border-left:20px；border-right:20px；border-top:20px；border-bottom:20px；}
QPushButton:hover{border-image:url(:/icons/QPushButtonOver.png)20 2020 20；border-left:20px；border-right:20px；border-top:20px；border-bottom:20px；}
QPushButton:pressed{border-image:url(:/icons/QPushButtonDown.png)2020 20 20；border-left:20px；border-right:20px；border-top:20px；border-bottom:20px；}
QPushButton:！enabled{border-image:url(:/icons/QPushButtonDisable.png)20 20 20 20；border-left:20px；border-right:20px；border-top:20px；border-bottom:20px；}
QPushButton:checked{border-image:url(:/icons/QPushButtonChecked.png)20 20 20 20；border-left:20px；border-right:20px；border-top:20px；border-bottom:20px；}
QPushButton{font:12pt微软雅黑；}
QPushButton{color:rgba(0,0,0,255)；}
QPushButton:hover{color:rgba(0,0,0,255)；}
QPushButton:pressed{color:rgba(0,0,0,255)；}
QPushButton:！enabled{color:rgba(128,128,128,255)；}
QPushButton:checked{color:rgba(20,50,200,255)；}
当采用了本发明的方法之后，只需要在如图8所示的可视化编辑器上进行修改即可。如修改文字的属性(图9)，修改颜色的属性(图10)。
第六实施例
本实例提供执行本发明的可视化UI样式设计方法的系统，包括：
基础抽象类定义模块1，用于定义用于实现控件的可视化UI样式设计的基础抽象类；
控件生成模块2，用于同时继承所述基础抽象类和QT原生控件对应的类，生成自定义的可视化样式编辑控件；
样式属性创建模块3，用于基于所述可视化样式编辑控件，创建对应的样式属性，并通过QTDesigner属性面板展示出来，其中，所述样式属性为通过使用预先创建的QSS样式模板生成；
属性值编辑模块4，用于在所述QTDesigner属性面板上通过可视化属性编辑器对属性值进行编辑，映射样式属性值，形成修改样式后的UI控件。
其他的细节部分与方法相同，本实施例不再赘述。
一种计算机可读存储介质，计算机可读存储介质存储有计算机代码，当计算机代码被执行时，如上述方法被执行。本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁盘或光盘等。
以上所述仅是本发明的优选实施方式，本发明的保护范围并不仅局限于上述实施例，凡属于本发明思路下的技术方案均属于本发明的保护范围。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理前提下的若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。
以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
应当说明的是，上述实施例均可根据需要自由组合。以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。
Claims (6)
1.一种可视化UI样式设计方法，其特征在于，包括以下步骤：
S1：定义用于实现控件的可视化UI样式设计的基础抽象类；
在所述基础抽象类中保存有包括样式模板映射、样式值更改、样式应用、渲染事件过滤、鼠标交互事件过滤在内的一系列的用于为样式的应用或事件的监控提供统一的基础流程的成员变量和成员函数，并且所述基础抽象类中的所述成员变量和所述成员函数，根据基础流程的新增或改变进行随时的增加、修改或删除；
S2：同时继承所述基础抽象类和 QT原生控件对应的类，生成自定义的可视化样式编辑控件；
S3：基于所述可视化样式编辑控件，创建对应的样式属性，并通过QTDesigner属性面板展示出来，其中，所述样式属性为通过使用预先创建的QSS样式模板生成；
所述QSS样式模板，为通过宏定义实现属性可视化逻辑的预定义，方便后续快速批量实现自定义所述可视化样式编辑控件，具体为：
将QSS样式中每种类型的样式语法格式通过宏定义成语法模板，为每种类型的样式提供一个抽象语法框架，其中，所述语法模板包括样式名和样式值类型在内的参数；
根据所述语法模板定义出每个具体样式的所述QSS样式模板，以样式值作为参数，以所述QSS样式模板作为当前所述可视化样式编辑控件的一个样式属性；
根据所述语法模板定义出每个具体样式的所述QSS样式模板，还包括：将从所述语法模板到所述QSS样式模板的初始化逻辑定义为一系列的初始化宏；在所述可视化样式编辑控件的构造函数中，调用对应的所述初始化宏，将当前所述可视化样式编辑控件需要的所述语法模板与样式名以及样式值类型映射为一个具体的所述QSS样式模板；
S4：在所述QTDesigner属性面板上通过可视化属性编辑器对属性值进行编辑，映射样式属性值，形成修改样式后的UI控件；
将包括所述基础抽象类、所述语法模板、所述QSS样式模板、所述初始化宏在内的自定义的类和模板，打包生成一个QTDesigner可识别的dll插件文件，以插件的方式给QTDesigner扩展出具有可视化样式编辑的UI框架；
将所述dll插件文件放入QTDesigner对应的插件目录，启动QTDesigner自动加载所述dll插件文件；
所述dll插件文件加载完成后，自动创建所述具有可视化样式编辑的UI框架的控件列表，用户从所述控件列表中选择所述可视化样式编辑控件；
所述可视化样式编辑控件自动在所述QTDesigner属性面板中将样式以属性的形式展现出来，通过所述可视化属性编辑器对属性值进行编辑。
2.根据权利要求1所述的可视化UI样式设计方法，其特征在于，在步骤S3中，还包括：
使用Q_PROPERTY宏定义将所述样式属性定义成可视化属性，在所述QTDesigner属性面板中展示出来。
3.根据权利要求1所述的可视化UI样式设计方法，其特征在于，还包括：
当用户从所述QTDesigner属性面板中为所述样式属性设置属性值时，修改所述QSS样式模板中对应的样式值；
调用applyStyles()函数触发所述可视化样式编辑控件渲染事件，通过eventsFilter()过滤出渲染事件后调用所述QT原生控件的setStyleSheet函数应用最终的效果。
4.一种执行如权利要求1-3任意一项所述的可视化UI样式设计方法的系统，其特征在于，包括：
基础抽象类定义模块，用于定义用于实现控件的可视化UI样式设计的基础抽象类；
控件生成模块，用于同时继承所述基础抽象类和 QT原生控件对应的类，生成自定义的可视化样式编辑控件；
样式属性创建模块，用于基于所述可视化样式编辑控件，创建对应的样式属性，并通过QTDesigner属性面板展示出来，其中，所述样式属性为通过使用预先创建的QSS样式模板生成；
属性值编辑模块，用于在所述QTDesigner属性面板上通过可视化属性编辑器对属性值进行编辑，映射样式属性值，形成修改样式后的UI控件。
5.一种计算机设备，包括存储器和一个或多个处理器，所述存储器中存储有计算机代码，所述计算机代码被所述一个或多个处理器执行时，使得所述一个或多个处理器执行如权利要求1至3中任一项所述的方法。
6.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机代码，当所述计算机代码被执行时，如权利要求1至3中任一项所述的方法被执行。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010986356.2A CN112099792B (zh) | 2020-09-18 | 2020-09-18 | 一种可视化ui样式设计方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010986356.2A CN112099792B (zh) | 2020-09-18 | 2020-09-18 | 一种可视化ui样式设计方法及系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112099792A CN112099792A (zh) | 2020-12-18 |
| CN112099792B true CN112099792B (zh) | 2024-02-02 |
Family
ID=73760392
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010986356.2A Active CN112099792B (zh) | 2020-09-18 | 2020-09-18 | 一种可视化ui样式设计方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112099792B (zh) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112732258A (zh) * | 2021-01-11 | 2021-04-30 | 中国船舶重工集团公司第七0七研究所 | 一种基于状态机的动态开关按钮软件实现方法 |
| CN112764741A (zh) * | 2021-03-02 | 2021-05-07 | 浙江鸿城科技有限责任公司 | 一种可视化编辑界面的方法、装置及电子设备 |
| CN112965713B (zh) * | 2021-04-07 | 2024-04-23 | 北京有竹居网络技术有限公司 | 可视化编辑器的开发方法、装置、设备及存储介质 |
| CN113656005B (zh) * | 2021-06-29 | 2023-11-24 | 杭州华橙软件技术有限公司 | 应用组件库构建方法、应用组件配置方法及相关装置 |
| CN113568609B (zh) * | 2021-09-24 | 2021-12-10 | 成都中科合迅科技有限公司 | 基于Qss样式表的UI样式编辑方法 |
| CN114398124B (zh) * | 2021-12-31 | 2024-04-12 | 深圳市珍爱捷云信息技术有限公司 | 基于iOS系统的点九效果图渲染方法及其相关装置 |
| CN117215585B (zh) * | 2023-11-09 | 2024-03-08 | 浪潮通用软件有限公司 | 一种可视化描述以及动态控制界面组件属性的方法及装置 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2007124977A2 (en) * | 2006-04-27 | 2007-11-08 | International Business Machines Corporation | A method and system for generating application data editors |
| CN104298509A (zh) * | 2014-10-08 | 2015-01-21 | 上海航天电子通讯设备研究所 | 一种基于qss样式表的界面美化方法 |
| CN107544806A (zh) * | 2017-09-04 | 2018-01-05 | 江苏中威科技软件系统有限公司 | 可视化表单绘制方法 |
| CN108549533A (zh) * | 2018-04-11 | 2018-09-18 | 上海百事灵多媒体科技有限公司 | 一种epg页面可视化开发中添加自定义控件的方法 |
| CN110413277A (zh) * | 2019-06-24 | 2019-11-05 | 厦门雷霆互动网络有限公司 | 一种ui界面的生成方法及系统 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140053063A1 (en) * | 2012-08-14 | 2014-02-20 | Microsoft Corporation | User interface control framework for stamping out controls using a declarative template |
-
2020
- 2020-09-18 CN CN202010986356.2A patent/CN112099792B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2007124977A2 (en) * | 2006-04-27 | 2007-11-08 | International Business Machines Corporation | A method and system for generating application data editors |
| CN104298509A (zh) * | 2014-10-08 | 2015-01-21 | 上海航天电子通讯设备研究所 | 一种基于qss样式表的界面美化方法 |
| CN107544806A (zh) * | 2017-09-04 | 2018-01-05 | 江苏中威科技软件系统有限公司 | 可视化表单绘制方法 |
| CN108549533A (zh) * | 2018-04-11 | 2018-09-18 | 上海百事灵多媒体科技有限公司 | 一种epg页面可视化开发中添加自定义控件的方法 |
| CN110413277A (zh) * | 2019-06-24 | 2019-11-05 | 厦门雷霆互动网络有限公司 | 一种ui界面的生成方法及系统 |
Non-Patent Citations (1)
| Title |
|---|
| 基于Qt 对Windows 自动安全检查的研究与应用;王星 等;《信息与电脑(理论版)》(第5期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112099792A (zh) | 2020-12-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112099792B (zh) | 一种可视化ui样式设计方法及系统 | |
| US6769095B1 (en) | Hierarchically structured control information editor | |
| RU2537776C2 (ru) | Основанная на разметке расширяемость для интерфейсов пользователя | |
| CN112416339A (zh) | 页面开发方法、装置、计算机设备 | |
| Petzold | Creating Mobile Apps with Xamarin. Forms Preview Edition 2 | |
| CN105511873B (zh) | 用户界面控件展示方法及装置 | |
| CN105094832A (zh) | 一种所见即所得的动态生成用户界面的方法和系统 | |
| US20010045961A1 (en) | System and theme file format for creating visual styles | |
| US20110023014A1 (en) | Method and apparatus for modifying an executable application using in-memory object representation | |
| CN108008953A (zh) | 一种动态适配操作系统主题风格的Qt图形程序设计方法 | |
| CN112306486B (zh) | 一种界面生成方法、装置、服务器及存储介质 | |
| CA2686367A1 (en) | Dynamic native editor code view facade | |
| CN113553635A (zh) | 图库图元配置方法、装置、电子设备和存储介质 | |
| Jelinek et al. | GUI generation from annotated source code | |
| CN115809058A (zh) | 一种生成用户界面框架逻辑树的方法及其相关装置 | |
| US11809844B2 (en) | Creating an app method and system | |
| Borras et al. | Building user interfaces for database applications: The O2 experience | |
| CN110866379B (zh) | 数据可视化图表库系统 | |
| CN111079382A (zh) | 基于mvvm模式的表单渲染方法及系统 | |
| JP4354719B2 (ja) | プログラム開発支援プログラム | |
| CN110688108A (zh) | 一种模型的生成方法、装置及存储介质 | |
| JP2001273125A (ja) | ソースプログラム自動生成方法およびシステム、ならびにそのプログラム記録媒体 | |
| CN111459472B (zh) | 面向mbse图形建模软件的模型元素可视表达方法 | |
| Barzdins et al. | Metamodel Specialization for Graphical Language and Editor Definition. | |
| US7882487B2 (en) | Method of generating C code on the basis of UML specifications |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |