[發(fā)明專利]一種可視化UI樣式設(shè)計(jì)方法及系統(tǒng)

在審

• 申請(qǐng)?zhí)枺?/td>: 202010986356.2
• 申請(qǐng)日: 2020-09-18
• 公開(kāi)（公告）號(hào): CN112099792A
• 公開(kāi)（公告）日: 2020-12-18
• 發(fā)明（設(shè)計(jì)）人: 王少白;周武建;侯堯
• 申請(qǐng)（專利權(quán)）人: 上海逸動(dòng)醫(yī)學(xué)科技有限公司
• 主分類號(hào): G06F8/38
• 分類號(hào): G06F8/38;G06F8/30
• 代理公司: 上海漢聲知識(shí)產(chǎn)權(quán)代理有限公司 31236
• 代理人: 胡晶

1.一種可視化UI樣式設(shè)計(jì)方法，其特征在于，包括以下步驟：

S1：定義用于實(shí)現(xiàn)控件的可視化UI樣式設(shè)計(jì)的基礎(chǔ)抽象類；

S2：同時(shí)繼承所述基礎(chǔ)抽象類和QT原生控件對(duì)應(yīng)的類，生成自定義的可視化樣式編輯控件；

S3：基于所述可視化樣式編輯控件，創(chuàng)建對(duì)應(yīng)的樣式屬性，并通過(guò)QTDesigner屬性面板展示出來(lái)，其中，所述樣式屬性為通過(guò)使用預(yù)先創(chuàng)建的QSS樣式模板生成；

S4：在所述QTDesigner屬性面板上通過(guò)可視化屬性編輯器對(duì)屬性值進(jìn)行編輯，映射樣式屬性值，形成修改樣式后的UI控件。

2.根據(jù)權(quán)利要求1所述的可視化UI樣式設(shè)計(jì)方法，其特征在于，在步驟S1中，還包括：

在所述基礎(chǔ)抽象類中保存有包括樣式模板映射、樣式值更改、樣式應(yīng)用、渲染事件過(guò)濾、鼠標(biāo)交互事件過(guò)濾在內(nèi)的一系列的用于為樣式的應(yīng)用或事件的監(jiān)控提供統(tǒng)一的基礎(chǔ)流程的成員變量和成員函數(shù)，并且所述基礎(chǔ)抽象類中的所述成員變量和所述成員函數(shù)，根據(jù)基礎(chǔ)流程的新增或改變進(jìn)行隨時(shí)的增加、修改或刪除。

3.根據(jù)權(quán)利要求1所述的可視化UI樣式設(shè)計(jì)方法，其特征在于，在步驟S3中，還包括：

所述QSS樣式模板，為通過(guò)宏定義實(shí)現(xiàn)屬性可視化邏輯的預(yù)定義，方便后續(xù)快速批量實(shí)現(xiàn)自定義所述可視化樣式編輯控件，具體為：

將QSS樣式中每種類型的樣式語(yǔ)法格式通過(guò)宏定義成語(yǔ)法模板，為每種類型的樣式提供一個(gè)抽象語(yǔ)法框架，其中，所述語(yǔ)法模板包括樣式名和樣式值類型在內(nèi)的參數(shù)；

根據(jù)所述語(yǔ)法模板定義出每個(gè)具體樣式的所述QSS樣式模板，以樣式值作為參數(shù)，以所述QSS樣式模板作為當(dāng)前所述可視化樣式編輯控件的一個(gè)樣式屬性。

4.根據(jù)權(quán)利要求1所述的可視化UI樣式設(shè)計(jì)方法，其特征在于，在步驟S3中，還包括：

使用Q_PROPERTY宏定義將所述樣式屬性定義成可視化屬性，在所述QTDesigner屬性面板中展示出來(lái)。

5.根據(jù)權(quán)利要求3所述的可視化UI樣式設(shè)計(jì)方法，其特征在于，根據(jù)所述語(yǔ)法模板定義出每個(gè)具體樣式的所述QSS樣式模板，還包括：

將從所述語(yǔ)法模板到所述QSS樣式模板的初始化邏輯定義為一系列的初始化宏；

在所述可視化樣式編輯控件的構(gòu)造函數(shù)中，調(diào)用對(duì)應(yīng)的所述初始化宏，將當(dāng)前所述可視化樣式編輯控件需要的所述語(yǔ)法模板與樣式名以及樣式值類型映射為一個(gè)具體的所述QSS樣式模板。

6.根據(jù)權(quán)利要求3所述的可視化UI樣式設(shè)計(jì)方法，其特征在于，還包括：

當(dāng)用戶從所述QTDesigner屬性面板中為所述樣式屬性設(shè)置屬性值時(shí)，修改所述QSS樣式模板中對(duì)應(yīng)的樣式值；

調(diào)用applyStyles()函數(shù)觸發(fā)所述可視化樣式編輯控件渲染事件，通過(guò)eventsFilter()過(guò)濾出渲染事件后調(diào)用所述QT原生控件的setStyleSheet函數(shù)應(yīng)用最終的效果。

7.根據(jù)權(quán)利要求1所述可視化UI樣式設(shè)計(jì)方法，其特征在于，還包括：

將包括所述基礎(chǔ)抽象類、所述語(yǔ)法模板、所述QSS樣式模板、所述初始化宏在內(nèi)的自定義的類和模板，打包生成一個(gè)QTDesigner可識(shí)別的dll插件文件，以插件的方式給QTDesigner擴(kuò)展出具有可視化樣式編輯的UI框架；

將所述dll插件文件放入QTDesigner對(duì)應(yīng)的插件目錄，啟動(dòng)QTDesigner自動(dòng)加載所述dll插件文件；

所述dll插件文件加載完成后，自動(dòng)創(chuàng)建所述具有可視化樣式編輯的UI框架的控件列表，用戶從所述控件列表中選擇所述可視化樣式編輯控件；

所述可視化樣式編輯控件自動(dòng)在所述QTDesigner屬性面板中將樣式以屬性的形式展現(xiàn)出來(lái)，通過(guò)所述可視化屬性編輯器對(duì)屬性值進(jìn)行編輯。