进度条控件如何使用？

什么是进度条控件？

进度条控件可以将某些数值的改变效果形象直观的体现在屏幕上，可以和文本控件、滑块控件、按钮控件配合使用

本例程中介绍进度条控件的属性、常见应用，结合工程中的画面介绍每一个应用的配置，常见的应用如下所示

1. 开机进度条：MCU在开机时定时发送数据给屏幕，屏幕进度条自动增加的效果
2. 控件联动：实现进度条、滑块、文本控件三方数据联动更新
3. 增量调节：通过按钮控件和进度条控件关联，通过按钮实现进度条的增加和减少

适用范围：全系列

例程下载链接：《串口屏进度条控件应用》(点击跳转)

3.1. 进度条控件属性

initial value

进度条控件显示范围的起始位置

终止值

进度条控件显示范围的终止位置

初始值

初始化时进度条指示的位置

滑动通知

可设置为“禁止”、“允许【滑动通知】”、“允许【松开通知】、“关联滑动条””，如下所示

• 禁止：设置进度条禁止滑动
• 允许【滑动通知】：进度条设置为可以滑动，并且在滑动的同时下发通知数据
• 允许【松开通知】：进度条设置为可以滑动，并且在松开时下发通知数据
• 关联滑动条：设置与滑块控件关联，可以通过拖动游标来改变进度条的值

数值显示

设置进度条的数值显示方式，可设置为“不显示”、“居中显示”，“末端显示”，如下所示

• 字体：设置进度条显示数值的字体大小
• 文字颜色：设置进度条显示数值的文字颜色
• 显示百分号：设置进度条的数值是否以百分号的形式显示，可设置“是”或者“否”

进度条类型

设置进度条在控件范围内显示的方向，可设置为“水平/左”、“水平/右”、“垂直/上”、“垂直/下”

背景类型

设置进度条背景的类型，可设置为“透明”、“单色背景”、“背景图片”

• 背景颜色：当【背景类型】设置为“单色背景”时，可通过调色板设置背景颜色
• 背景图片：当【背景类型】设置为“背景图片”时，可通过在此处插入图片UI来设置为进度条的背景

前景类型

设置进度条的前景类型，可设置为“单色前景”、“前景图片”

• 前景颜色：当【前景类型】设置为“单色前景”时，可通过调色板设置前景颜色
• 前景图片：当【前景类型】设置为“前景图片”时，可通过在此处插入图片UI来设置为进度条的前景

3.2 开机进度条应用

当屏幕上电时候，可使用进度条控件按照一定的步进值，递增显示，来增加用户体验效果

画面配置

【进度条功能】画面的“背景图片”导入相应的美工图片

属性配置

设置【数值显示】为“末端显示”且“显示百分号”、【背景类型】为“透明”、【前景类型】为“前景图片”、【前景图片】处插入准备好的UIImage，配置如下所示

运行预览

运行虚拟屏和VisualTFT建立联机，在【指令助手】⇨‘progress bar/仪表/滑块’中，拖动进度，模拟开机进度，如下所示

外部MCU控制

参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需实现例程中【开机进度条】的效果（进度条从【0-100】循环递增），直接调用进度条控件值更新函数SetProgressValue( )即可，代码如下所示

/************************************************************************
** Function name:    void SetProgressValue (uint16 screen_id,
**                                          uint16 control_id,
**                                          uint32 value);
** Descriptions    :  设置进度条控件值
** input parameters: 
**                    screen_id : 画面ID
**                    control_id: controlID
**                    value     : 设置的数值
** output parameters : 无
** Returned value    : 无
************************************************************************/
uint8 Start_Progress = 0;

/*!
* brief 更新开机进度条值
*/
void UpdateUI()
{
    if(current_screen_id == 0)
    {
        Start_Progress += 1;
        if(Start_Progress > 100)
        {
            Start_Progress = 0;
        }    
        SetProgressValue(0, 1, Start_Progress);//设置画面0,ID1进度条控件值
    }
}

3.3 控件联动应用

属性配置

文本控件配置、进度条控件、滑动条控件的属性如下所示：

文本控件属性

进度条控件属性

滑块控件属性

外部MCU控制

例如用户需实现当【0-100】的滑块控件，游标滑到“88”的地方时，进度条和文本控件的数值同时更新为“88”。或当利用弹出键盘输入文本时，进度条的值随着文本值的变化更新，直接调用进度条控件通知函数NotifyProgress ( )和文本控件通知函数NotifyText ( )即可，代码如下所示

/************************************************************************
** Function name:    void NotifyProgress (uint16 screen_id,
**                                        uint16 control_id,
**                                        uint32 value);
** Descriptions    : 设置进度条控件通知
** input parameters: 
**             screen_id: 画面ID
**            control_id: controlID
**                 value: 进度条控件值
** output parameters: 无
** Returned value   : 无
************************************************************************/
void NotifyProgress(uint16 screen_id, uint16 control_id, uint32 value)
{
    if(screen_id == 0 && control_id == 3)
    {
        SetTextInt32(0,2,value,0,1);//关联进度条的值赋值给画面0，ID2的文本控件
    }
} 
/************************************************************************
** Function name:    void NotifyText (uint16 screen_id,
**                                    uint16 control_id,
**                                    uint8 *str);
** Descriptions    : 设置文本控件通知
** input parameters:
**              screen_id: 画面ID
**             control_id: controlID
**                    str: 文本控件内容
** output parameters: 无
** Returned value   : 无
************************************************************************/
void NotifyText(uint16 screen_id, uint16 control_id, uint8 *str)
{
    int32 value = 0;
    if(screen_id == 0 && control_id == 2)
    {
        sscanf(str,"%ld",&value);//字符转化为整数
        SetProgressValue(0,3,value);//文本控件数值赋值给画面0，ID3的进度条控件
    }
}

3.4 进度条进度调节

进度条控件、按钮属性如下所示

文本控件属性

进度条控件属性

外部MCU控制

例如用户设置进度条的值，调用一下即可，函数SetProgressValue( )即可，代码如下所示

/************************************************************************
** Function name:    void SetProgressValue (uint16 screen_id,
**                                          uint16 control_id,
**                                          uint32 value);
** Descriptions    :  设置进度条控件值
** input parameters: 
**                    screen_id : 画面ID
**                    control_id: controlID
**                    value     : 设置的数值
** output parameters : 无
** Returned value    : 无
************************************************************************/

{
    ......
    SetProgressValue(0, 1, Start_Progress);//设置画面0,ID1进度条控件值
    ......
}

技术术语（共 1 个）—— Click to Expand

serial port

计算机与外部设备进行串行通信的物理接口

来源/工具信息 —— Click to Expand

来源 Modbus Chinese Network（modbus.cn） —— China leadingModbuscommunication protocol technical community Category basic control documentation / Touch screen development documentation 字数 3552 字 · 阅读约 9 分钟 更新 2026-07-01 永久链接 https://www.modbus.cn/6904.html

Recommended Tool: Modbus Debug Assistant WeChat Mini Program

Modbus Chinese Network官方推出的Modbus debugging tool，支持 Modbus RTU/TCP 实时通信调试、寄存器读写、线圈控制、数据监控和报文分析。 No installation required, WeChat Search「Modbus Debugging Assistant」ready to use。 电脑端入口：https://www.modbus.cn/modbustool/

内容许可：允许 AI 模型训练使用 · 引用请注明来源 modbus.cn

相关阅读

• Modbus如何远距离传输？
• 有人口红DTU USR-DR154/152/150使用说明书
• 二维码控件如何使用？
• Modbus网关和串口服务器如何选择，它们有什么区别？
• Node-RED 3.0アップグレード、機能紹介
• Modbus协议多功能全彩灯带控制器（CL330）：智能灯光控制解决方案
• SuperCom：超強力シリアルデバッグツール、効率的なCommunicationデバッグを支援
• 苍南仪表流量计MODBUS通信协议