使用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("

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

}

break；

…………

}

经过这样定义后，通过3个接口函数的灵活使用，就可以在软件运行中，根据需求调用不同的接口函数，灵活的动态更改图文显示控件的显示效果，达到上位机监控软件的显示需求。其实际的工程应用效果如下：

图4 扩展控件工程应用效果图

上图中的主体部分，各类图文显示控件都是基于上述方法扩展而来，可以根据现场设备的实际运行情况灵活的显示动态内容，达到了使用简单、灵活的效果。

5 结论

利用QLabel对HTML标签的支持，扩展QLabel控件，可以使得QLabel作为工控上位机软件的图文显示控件，同时能够进行灵活的动态设置，为基于Qt框架的工控图文显示控件提供了新的思路。