QT自定义控件之化工配置流程示意（源码开源）

2026/8/11 20:08:36 拓冰建站浏览量

QT自定义控件之化工配置流程示意（源码开源）

一、前言

在工业组态、化工仿真、设备监控类桌面软件中，工艺流程示意图是非常核心的 UI 模块。我们经常需要绘制储罐、反应釜、管道、阀门，并且实现管道介质流动动画、实时参数面板、设备状态切换。可能很多人第一想法是引入第三方组态控件，但第三方组件体积大、授权受限、定制化困难。本文就来讲解如何实现这类工业可视化界面。

效果图包含：包含原料罐、输送泵、反应釜、换热器、过滤器、成品罐等设备；带流动效果管线；右侧实时数据面板；时间戳；启停交互按钮。

一、作品展示

这次流程示意图选用蓝、白、灰三种颜色搭建画面底色，配色风格简洁干净，契合化工领域专业清晰的配色设计机制。本次开发采用的技术栈依旧是：C++、Qt、QPainter。

本项目重点实现五大亮点机制：

管道流水的紧密贴合机制

流动介质色块跟随管道折线走向，完美贴合管线路径，还原流体输送效果；

各种原料罐的液体存储仿真机制

根据实时液位参数动态调整罐内介质填充高度，模拟储罐存料、出料的液位变化；

选料增加箭头警示灯的闪烁提醒

通过定时器控制箭头警示元素交替显隐，实现状态闪烁提醒效果；

右侧数据的动态监控

工艺参数随仿真模型实时更新，在右侧面板完成数据可视化展示。

放大缩小自如

整个界面放大缩小自如，不受尺寸影响，可贴合程序的使用。

PixPin_2026-08-11_17-36-33

PixPin_2026-08-11_17-36-50

三、实现流程

1、主窗口结构

主窗口MainWindow，右上角放置普通 QPushButton【开始】按钮；中心放置我们自定义的绘图控件CustomWidget（继承自QWidget）

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);timer = new QTimer(this);  // 创建定时器对象static int count = 0;static bool flag = 0;static int colorflag = 0;connect(timer,&QTimer::timeout,[=](){ui->widget->Set_DisplayEvent_IsShow(22,flag);flag = !flag;int randomNumber = QRandomGenerator::global()->bounded(100); // 生成一个0到99之间的随机数（包括0和99）ui->widget->Set_TextChangeEvent(count,QString::number(randomNumber));count++;if(count>5){count = 0;}//传感器控制ui->widget->Set_TextChangeEvent(count + 4,QString::number(randomNumber));int stateRandomNumber = QRandomGenerator::global()->bounded(3); // 生成一个0到99之间的随机数（包括0和99）ui->widget->Set_TextChangeEvent(10,state[stateRandomNumber]);QDateTime currentDateTime = QDateTime::currentDateTime();QString customFormat = "yyyy-MM-dd HH:mm:ss"; // 年-月-日 时:分:秒QString formattedDateTime = currentDateTime.toString(customFormat);ui->widget->Set_TextChangeEvent(11,formattedDateTime);});}

2、背景图处理

对于工业组态可视化界面，背景是整套流程图的视觉基底，会直接影响整体画面质感与信息可读性。我们需要一张画质精良、氛围感深邃克制的背景素材，不能出现繁杂花哨的元素，避免干扰上层工艺设备、管道、参数面板的展示，保证业务图形始终是视觉焦点。

在实际开发中，素材来源分不同场景：商业交付项目，一般会由公司内部专业 UI 工程师输出经过调色、降噪处理的专属背景图，严格匹配产品整体设计规范；而做 Demo 原型、个人技术验证时，没有 UI 支持，我们就可以借助 AI 绘图工具快速生成适配工控风格的背景，比如科技网格底纹、低饱和度冷色渐变、微弱工业纹理等，开发者可以根据自己的项目需求自由发挥。

3、核心代码

本期的核心代码主要在CustomWidget.cpp中

四、源码开放

本期源码开放，大家可以去下面位置找我私信，感谢大家关注点赞收藏~
https://mp.weixin.qq.com/s/Bq5DUQA86nioCqAOgp8AmQ

建站实战干货

QT自定义控件之化工配置流程示意（源码开源）