button控件How to use？

什么是button控件？

button控件可以设置弹起或按下的状态。

控件的背景可以设置为单色，也可以设置图片，这样按下时就可以看到真实button按下的效果。

button控件还可以实现多种Function，如长按、瞬变、置位等。

本章节介绍button控件基本属性、常见的应用，结合工程中的画面介绍每一个应用的配置，常见的应用如下所示：

buttonswitchFunction：

实现瞬变、switch、置位、复位、长按、延时的Function

button逻辑Function：

实现两个button的互斥、使用指令实现总switch的Function

单button多状态：

可以用一个button和一个图标实现多状态button的Function

button的禁止与使能：

使用button的延时Function对其它button进行禁止和使能

Customization指令：

按下button时对外sendCustomization指令

1.1属性介绍

本章节重点介绍button控件的属性，属性窗口下所示

触摸虚框

用户按下button时，显示虚框，如下所示：

事件通知

button状态改变时，上传通知。

（注意如果Closebutton通知的话，minic脚本、lua脚本对应button不会触发回调，同时也没有指令通过串口发出）

弹起时的图片

button弹起状态时显示的图片。勾选“裁剪”时，将显示图片中button坐标对应的区域的图像

按下时的图片

button按下时显示的图片。勾选“裁剪”时，将显示图片中button坐标对应的区域的图像

文字状态

在button控件上显示文字。选择“是”，可按状态显示文字，如下所示

1. 字体：文字大小和样式
2. 弹起时的颜色、按下时的颜色：文字的颜色
3. 弹起时的文字、按下时的文字：两种不同状态时显示的文字

触控用途

• Switch画面
• switch描述
• Customization按键
• Customization指令
• 弹出菜单

如图所示：

Switch画面

Switch到指定画面，Related参数配置如下所示：

可选Function有：

1. 目标画面：点击button控件时，Switch到指定画面
2. 子画面：子画面一般为透明背景的小窗口，可作为对话框使用。目标页面的【背景透明】选择“透明”，在页面中设置一个图片控件，图片控件的【路径】选择对应的UI，显示效果如下所示
3. 动画效果：Switch页面时的过渡效果，可以选择整个画面从左到右、从上到下、渐隐渐消、逐渐打开等效果。仅物联型支持此Function
4. 动画范围：在指定范围内显示动画效果，在指定范围外不显示，可以设置整个画面或指定范围
5. 密码保护：Open密码保护后，需要输入正确的密码才能Switch画面

switch描述

buttonswitch的Function，Related参数配置如下所示：

可选Function有：

1. 初始状态：switch的初始状态。
2. Operation风格：
   • 瞬变：松开后，switch自动弹起，类似轻触switchFunction。
   • switch：按下后，switch由弹起变成按下或由按下变成弹起，类似带锁switchFunction。
   • 置位：switch只能由弹起变成按下。
   • 复位：switch只能由按下变成弹起。
   • 长按：与瞬变button相似，但按压时每隔100毫秒通知一次。
   • 延时：按压指定timeLength后发出通知
3. 对内指令：在按下或者弹起后，对内部执行的指令
4. 对外指令：在按下或者弹起后，对外部send的指令

Customization按键

把相应button转换成值输入。需要配合Customization键盘输入的Text控件使用，可以将button控件设计为Customization键盘，用户需要把button控件当做Customization按键

Customization指令

sendCustomization的hexadecimalformat的data。即为用户设置按下button后，设备上传Customization的datamessage。不能send帧尾为FF FC FF FF的message，和大彩协议冲突

弹出菜单

需要协同菜单控件和Text控件使用，实现点击button即可弹出菜单，用户在选择弹出的菜单后，配合Text控件，把所选data显示出来

1.2 buttonswitchFunction应用

【buttonswitchFunction】画面，介绍button的瞬变、switch、置位、复位、长按、延时Function

画面配置

在【buttonswitchFunction】画面的“背景图片”导入相应的美工图片。在该画面中设置button控件

属性配置

1. 瞬变以button的瞬变Function为例，设置【触摸虚框】为“否”、【按下时的图片】选择处理好的图片、勾选【裁剪】、【触摸用途】为“switch描述”、【Operation风格】“瞬变”同理，其它button的【触摸虚框】、【按下时的图片】、【裁剪】、【触摸用途】设置相同，但是Operation风格设置不同，此文不在赘述
2. switch设置button的switchFunction，【Operation风格】为“switch”，如下所示
3. 置位设置button的置位Function，【Operation风格】为“置位”，如下所示
4. 复位设置button的复位Function，【初始状态】为“按下”、【Operation风格】为“复位”，如下所示
5. 长按设置button的长按Function，【Operation风格】为“长按”、【长按延时】为“0.1s”，如下所示
6. 延时设置button的延时Function，【Operation风格】为“延时”、【长按延时】为“5s”，如下所示

运行预览

运行虚拟屏，VisualTFT软件和虚拟屏用“虚拟串口”建立联机。打开【指令Assistant】，选择左侧导航栏【button控件】，设置“设置button控件弹起和按下状态”的指令参数。设置画面（画面ID：0）中的button控件（控件ID：1）按下。则在虚拟屏中，该button控件从弹起变为按下，运行效果如下所示

MCU控制button状态

参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需设置button状态，则直接调用设置button函数SetButtonValue ( )即可，代码如下所示。

/*******************************************************************
** Function name:     void SetButtonValue(uint16 screen_id,
**                                        uint16 control_id,
**                                        uchar value);
** Descriptions    :  设置button状态
** input parameters:  
**                   screen_id : 画面ID
**                   control_id: 控件ID
**                   value     : button状态，0为弹起，1为按下
** output parameters : 无
** Returned value    : 无
*******************************************************************/
{
  ……
  SetButtonValue(1, 1, 1); //画面ID1，控件ID1,button按下
  ……
}

1.3 button逻辑Function应用

【button逻辑Function应用】画面，介绍button的互斥、和总switch控制Function。

button互斥

画面配置

在【buttonswitchFunction】画面的“背景图片”导入相应的美工图片。在该画面中设置button控件，如下所示

属性配置

button“Start”：设置【触摸虚框】为“否”、【按下时的图片】选择设置好的图片、勾选【裁剪】、【触摸用途】为“switch描述”、【Operation风格】“switch”，配置如下所示

同理，button“Stop”的【触摸虚框】、【按下时的图片】、【裁剪】、【触摸用途】、【Operation风格】设置相同，但是【初始状态】设置为“弹起”

互斥配置

互斥button的设置方法如下，同时选择button“Start”和“Stop”，然后依次点击【菜单】-【Edit】-【switchbutton互斥】，Openbutton互斥，自动会往button对内置指令添加button批量处理指令，Operation如下所示

运行预览

运行虚拟屏，点击button“Start”和“Stop”，同一time只有一个button可以处于按下状态。如下所示

buttonswitch控制

画面配置

在【buttonswitchFunction】画面的“背景图片”导入相应的美工图片。在该画面中设置button控件，如下所示：

属性配置

设置button1、button2、button3，设置【触摸虚框】为“否”、【按下时的图片】选择设置好的图片、勾选【裁剪】、【触摸用途】为“switch描述”、【Operation风格】“switch”，如下所示

设置buttonOpen all，设置【触摸虚框】为“否”、【按下时的图片】选择设置好的图片、勾选【裁剪】、【触摸用途】为“switch描述”、【Operation风格】“switch”，如下所示

选择button控件（控件ID：6）

1. 属性栏中的【对内指令】→“弹起时”
2. 弹出指令填写框，选择“指令Assistant”
3. 在指令Assistant栏，选择button控件
4. 如设置画面ID1、button控件1的状态按下，点击按下生成指令
5. Copy指令到对内指令窗口

同理，button控件ID2、ID3的button按下效果重复4-5步骤即可。当button控件ID6弹起时候，设置button控件ID1、2、3的button弹起状态的处理方式类似

运行预览

运行虚拟屏，VisualTFT软件和虚拟屏用“虚拟串口”建立联机。打开【指令Assistant】，选择左侧导航栏【批量更新控件numerical value】，设置“更新多个控件numerical value”的指令参数。设置【画面ID】选择“1”，【buttonType】为“button控件”，【buttonID】分别填写3、4、5，【值】都写1。则在虚拟屏中，该button控件从弹起变为按下，运行效果下所示

PS：同时支持send指令一个button一个button设置控制，本处不演示运行效果

MCU批量控制button状态

参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需批量设置同一个页面的button状态，则直接调用批量设置button函数BatchSetButtonValue ( )即可，代码下所示：

/*******************************************************************

** Function name:    void BatchSetButtonValue (uint16 control_id,
**                                             uint8 state);
** Descriptions    : 批量更新当前页面的button状态
** input parameters: 
**                  control_id: 控件ID
**                  state     : button状态，0为弹起，1为按下
** output parameters: 无
** Returned value   : 无
*******************************************************************/
{
    BEGIN_CMD(); //指令开头
    BatchSetButtonValue(1, 1); //控件ID1,button按下
    BatchSetButtonValue(2, 1); //控件ID2,button按下
    ……
    END_CMD(); //指令结尾
}

1.4 单button多状态应用

【单button多状态】画面，介绍使用一个button和一个图标实现多状态button的Function

画面配置

在【单button多状态】画面的“背景图片”导入相应的美工图片。在该画面中设置button控件，如下所示：

属性配置

设置图标控件的属性，【图标文件】选择制作好的ICON文件，配置如下所示

选择button控件（控件ID：2），属性栏中设置【触摸虚框】为“否”，对button按下填写对应的指令，步骤如下所示

1. 【对内指令】→“按下时”，弹出指令填写框
2. 选择“指令Assistant”
3. 在指令Assistant界面，左侧导航栏选择【图标控件】
4. 设置“图标控件显示”区域的指令参数，填写对应的参数。如设置画面（画面ID：2）中的图标控件（控件ID：1），点击下一帧
5. Copy指令到【对内指令】→“按下时”的窗口，Operation如下所示：

运行预览

运行虚拟屏，点击button，图标会轮询显示。VisualTFT软件和虚拟屏用“虚拟串口”建立联机。打开【指令Assistant】，选择左侧导航栏【图标控件】，设置“图标控件显示”的指令参数。设置画面（画面ID：2）中的button控件（控件ID：1）的图标控件显示第1帧。则在虚拟屏中，button显示“暂停Pause”，运行效果如下所示

MCU设置图标的显示

参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需设置图标显示指定帧，则直接调用设置图标的显示帧的函数AnimationPlayFrame( )即可，代码如下所示

/*******************************************************************

** Function name:     void AnimationPlayFrame(uint16 screen_id,
**                                            uint16 control_id,
**                                            uint8 frame_id);
** Descriptions    :  设置图标显示指定的帧
** input parameters:  screen_id:  画面ID
**                    control_id:  控件ID
**                    frame_id:  指定帧
** output parameters: 无
** Returned value   : 无
*******************************************************************/

{
  ……
  AnimationPlayFrame(2, 1, 1); //画面ID2，控件ID1的图标显示第1帧
  ……
}

1.5 button的禁止与使能应用

【button的禁止与使能】画面，介绍使用指令控制button的禁止与使能

画面配置

在【button的禁止与使能】画面的“背景图片”导入相应的美工图片。在该画面中设置三个button控件（控件ID：1、2、3），如下所示

属性配置

设置button1、2、3的属性，设置【触摸虚框】为“否”。设置button3的属性，设置【触摸虚框】为“否”、【按下时的图片】选择设置好的图片、勾选【裁剪】、【初始状态】为“按下”、【Operation风格】为“延时”、【长按延时】为“5s”，配置如下所示

设置button的使能/失能：选择button控件（控件ID：3）

1. 属性栏中的【对内指令】→“弹起时”
2. 弹出指令填写框
3. 选择“指令Assistant”，在指令Assistant界面
4. 左侧导航栏选择【禁/使能屏幕更新】，填写对应的参数。如例程中，控制画面（画面ID：3）中的图标控件（控件ID：1），点击“使能控件”
5. 将生成的指令Copy到指令窗口，如下所示，同理其他button的使能/失能Operation处理参考即可

运行预览

运行虚拟屏，VisualTFT软件和虚拟屏用“虚拟串口”建立联机。打开【指令Assistant】，选择左侧导航栏【禁/使能控件】，设置“禁止或使能控件Function”的指令参数。设置画面（画面ID：3）中的button控件（控件ID：1）的button控件禁止触摸。则在虚拟屏中，触摸button1Invalid。

MCU控制button禁止/使能

参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需禁止button的触摸，则直接调用button禁止/使能函数SetControlEnable ( )即可，代码如下所示

/*******************************************************************

** Function name:     void SetControlEnable (uint16 screen_id,
**                                           uint16 control_id,
**                                           uint8 enable);
** Descriptions    :   设置触摸控件使能
** input parameters:   screen_id :  画面ID
**                     control_id:  控件ID
**                     enable    :  控件是否使能
** output parameters:  无
** Returned value   :  无
*******************************************************************/
{
  ……
  SetControlEnable (2, 1, 1); //画面ID3，控件ID1的button禁止触摸
  ……
}

1.6 Customization指令应用

【Customization指令】画面，介绍button对外sendCustomization指令的Function

画面配置

在【buttonswitchFunction】画面的“背景图片”导入相应的美工图片。在该画面中设置一个button控件（控件ID：1），如下所示

属性配置

设置button1的属性，设置【触摸虚框】为“否”、【事件通知】为“否”、【按下时的图片】选择设置好的图片、勾选【裁剪】、【触控用途】为“Customization指令”、【弹起时】为Customization的hexadecimal指令“55 00”、【按下时】为Customization的hexadecimal指令“55 01”，配置如下所示

运行预览

运行虚拟屏，右键点击屏幕弹出【参数设置】窗口，点击Customization按send指令，运行效果如下所示

例程Document：

[wshop_downloads]

技术术语（共 1 个）—— 点击展开

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

来源/Tools信息 —— 点击展开

来源 Modbus Chinese Network（modbus.cn） —— China leadingModbus通信协议技术社区 Category Basic Control Document / 触控屏开发Document 字数 6211 字 · 阅读约 16 分钟 更新 2026-07-01 永久链接 https://www.modbus.cn/6813.html

Recommended Tool: Modbus Debug Assistant WeChat Mini Program

Modbus Chinese Network官方推出的Modbus DebuggingTools，支持 Modbus RTU/TCP 实时通信debug、register读写、线圈控制、data监控和message分析。 无需安装，微信Search「Modbus DebuggingAssistant」即可使用。 电脑端入口：https://www.modbus.cn/modbustool/

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

Related阅读

• Q06系列智能Scene面板switch说明书
• 4.3寸智能触控面板-RS485Customization协议输出,自由configuration,Modbus,情景模式
• ModbusSmart Home多Function控制面板-对灯光，Scene，curtain，Music，空调，地暖等控制
• 12V弱电Modbusswitch智能面板
• GUI Designerbutton类控件使用手册