使用HTML擴展Qt控件

邵 剛 貴 恒 胡楊超

中國船舶重工集團公司第七一三研究所 河南 鄭州 450001

0 引言

在工業控制系統中，經常需要通過上位機的圖形用戶界面（GUI）來和下位機進行一些必要的交互[1]。隨著工業控制系統不斷的發展，用戶對工業控制系統的圖形用戶界面的需求也不斷提高。為了滿足特定環境的需求，尤其是針對一些特定的工控系統，我們經常需要定制一些個性化的GUI。

目前，在工業控制系統中的圖形用戶界面，除了采用通用的組態軟件之外，自行開發相應的工業控制圖形軟件是在特定項目中常見的手段。以傳統的 MFC（Microsoft Foundation Classes）方法開發復雜的圖形界面，需要程序員編寫大量的代碼，對控件的實現需要調用底層的繪圖函數進行繪制[2]。本文采用Qt開發平臺，通過Qt對HTML標簽支持的特性，完成圖文顯示控件的快速開發。

1 Qt概述

Qt是一個多平臺的C++圖形用戶界面應用程序框架[3]。它提供給應用程序開發者建立圖形用戶界面應用程序所需的所有功能，并提供 Qt Designer 圖形界面開發工具直接用來設計可視化的應用程序界面，可進行拖拽式的界面控件排布，便于程序開發。Qt 具有跨平臺性能，可以一次編寫多處編譯，具有良好的封裝機制、友好的信號-槽連接事件驅動機制，能夠非常優雅的完成事件的投遞與響應。Qt是KDE等項目所使用的支持庫，完全面向對象，很容易擴展，并且具有可移植性、易用性和運行速度快等特點[4]。

2 Qt的可擴展性

Qt具備非常完善的可擴展性，通過Qt的面向對象特性和插件機制，用戶可以很方便的擴展Qt本身和應用程序。

一般來說，在Qt中擴展自定義控件，基本上都是對Qt已有控件的直接繼承，通過繼承并重載父類中的虛函數來實現。當需要繪制時，首先調用update()或者repaint()方法來產生繪圖事件，然后應用程序的notify()函數把它發送到事件接收者，最后事件接收者通過paintEvent()函數調用特定的繪制方法來實現自身的繪制[5]。其流程圖如下：

圖1 Qt控件自繪流程圖

上述方法是傳統的Qt控件擴展方法，但是，該方法對使用稍顯繁瑣，而且針對工控軟件的圖文顯示需求而言，需要是動態、靈活的顯示下位設備的實時狀態，一個控件會有多種現實需求。而這種方法對每個不同圖像的顯示都需要定義一個擴展類，不具備靈活性。

在這種情況下，通過Qt的QLabel等控件支持HTML標簽的特性，通過實時更換控件文本參數就可以切換其顯示內容，可以很方便的實現自定義圖文的功能，達到事半功倍的效果。

3 QLabel對HTML的支持

Qt的某些文本窗體部件能夠顯示富文本，使用HTML4標記。能夠以這種方式顯示富文本的窗體控件有：QTextDocument,以及QLabel、QTextEdit等。而作為顯示控件而言，QLabel是最具備多場景適應性的。對于QLabel而言，HTML4的大多數基本標簽都是支持的，其中包括，這樣就能夠通過標簽，在QLabel中顯示圖片。同時，QLabel還支持基本的CSS語法，通過組合HTML和CSS元素，可以較為靈活的組合各種效果。例如：QLabel("hello
")；其顯示效果為下圖所示：

圖2 HTML顯示效果圖

4 使用HTML擴展QLabel

在工控項目中，經常需要各種各樣的圖文混排顯示控件，根據下位設備設施的實際情況來動態設置標簽的顯示。類似下圖：

圖3 工控圖文顯示效果圖

面對這種需求，可以很簡單的通過HTML來達到希望的效果。

為了達到靈活控制的目的，我們自定義一個類sgLabel繼承于QLabel，同時，自定義幾個接口函數：

表1 擴展控件接口函數表

其中，setContent的第3個參數align是一個ALIGN 型的枚舉值，我們通過這個值來定義圖片與文本的布局方式，包括文本與圖片的橫向排列、縱向排列、前后順序、上下順序、對齊方式等定義，以此來適應不同場景對圖文顯示控件的不同需求。

需要注意的是，QLabel對某些布局性的CSS是不支持的，因此在這里，我們使用了HTML的表格標簽，配合HTML的標簽屬性來實現圖片和文本內容的居中對齊。其部分關鍵代碼如下：

switch (_align) {

case H_R_CENTER：

{

"").arg(_picture).arg(_text))；

}

break；

case H_L_CENTER：

{

this->setText(QString(""

}

break；

case V_B_CENTER：

{

}

break；

case V_T_CENTER：

{

this->setText(QString("

}

break；

…………

}

經過這樣定義后，通過3個接口函數的靈活使用，就可以在軟件運行中，根據需求調用不同的接口函數，靈活的動態更改圖文顯示控件的顯示效果，達到上位機監控軟件的顯示需求。其實際的工程應用效果如下：

圖4 擴展控件工程應用效果圖

上圖中的主體部分，各類圖文顯示控件都是基于上述方法擴展而來，可以根據現場設備的實際運行情況靈活的顯示動態內容，達到了使用簡單、靈活的效果。

5 結論

利用QLabel對HTML標簽的支持，擴展QLabel控件，可以使得QLabel作為工控上位機軟件的圖文顯示控件，同時能夠進行靈活的動態設置，為基于Qt框架的工控圖文顯示控件提供了新的思路。