- 1. 什么是菜单控件？
- 2. 10.1 菜单控件属性
- 3. 10.2 下拉菜单应用-文本控件输入
- 4. 10.3 下拉菜单应用-滑动选择控件输入
什么是菜单控件？
下拉选择框可以通过菜单控件来显示。用户可以设置按下按钮后弹出菜单，也可以通过发送指令弹出菜单，点击菜单后数据可以输出到文本控件或者选择控件，然后显示在串口屏上
本例程中介绍菜单控件常见的应用，结合工程中的画面介绍每一个应用的配置，常见的应用如下所示
- 下拉菜单应用：菜单数据输出到文本控件中。
- 外部主机修改选项：菜单数据输出到选择控件中，外部主机修改选择控件的选项
适用范围：全系列
例程下载链接：《菜单控件应用》(点击跳转)
10.1 菜单控件属性
本章节重点介绍菜单控件的属性，属性窗口如下所示
菜单外观
单色、Image、图片与文字，如下所示
单色
可以直接使用软件生成一个简单的菜单外观，
- 字体：字体样式和大小
- 背景色：菜单底色
- 前景色：菜单的字体和分割线颜色
注：文字设置在后文的“菜单设置”中描述
Image
使用图片作为菜单控件的背景，可以设置弹起时的图片和按下时的图片，效果如下所示
图片与文字
同时显示单色功能和图片功能的内容。可以使用自定义底图，然后文字使用属性设置的字体
菜单风格
设置菜单的显示风格
- 弹出菜单：即下拉菜单，可通过按钮触发弹出
- 固定菜单：菜单固定显示状态
菜单方向
设置菜单选项呈现样式
- 垂直，如下所示
- 水平，如下所示
菜单项数
菜单选项的项数
语言数
菜单选项的数量。此选项与“多语言”功能配合。系统语言改变时，菜单选项将改变
10.2 下拉菜单应用-文本控件输入
按钮控件的触摸用途可以设置弹出菜单
画面配置
在【下拉菜单应用】画面的“背景图片”导入相应的美工图片。在该画面添加文本控件、菜单控件以及按钮控件，如下所示
属性配置
菜单控件属性
设置【菜单控件】外观为“Image”，【菜单风格】为“弹出键盘”，通知方式为“按下和松开”，菜单方向为“水平”，菜单项数为”5“，菜单选项和图片上的文字对应，设置为”57.7V;100V;220V;380V;Invalid;“，如下所示
文本控件属性
文本默认为“57.7V”，输入为“用户主机输入”，属性配置如下所示
按钮控件属性
设置按钮的触摸用途为“弹出键盘”，菜单控件ID：菜单控件的ID，输入控件ID：文本控件的ID，属性如下所示
运行预览
运行虚拟屏，VisualTFT软件和虚拟屏用“虚拟串口”建立联机。点击按钮弹出菜单，选择菜单选项显示到文本框，点击菜单选项，将子项内容更新到文本框并收起菜单控件，运行效果如下所示
同时，在指令助手中，设置【画面ID】为“0”、【controlID】为“3”、【文本控件ID】为“1”，勾选【显示下拉菜单】，click“send”。则在虚拟屏中，该菜单控件自动显示，如下所示
MCU控制显示/隐藏下拉菜单
参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需实现显示下拉菜单，则直接调用菜单显示函数ShowPopupMenu ( )即可，代码如下所示
/************************************************************************
** Function name : void ShowPopupMenu(uint16 screen_id,
** uint16 control_id,
** uint8 show,
** uint16 focus_control_id);
** Descriptions : 设置下拉菜单显示/隐藏
** input parameters :
** screen_id : 画面ID
** control_id:controlID
** show: 0隐藏，1显示，为0时focus_control_idInvalid
** focus_control_id:关联的文本控件(菜单控件的内容输出到文本控件)
** output parameters: 无
** Returned value : 无
************************************************************************/
{
……
ShowPopupMenu(0,3,1,1); //显示画面0、control3的菜单控件，并
//把输出结果显示在控件1的文本控件中
……
}10.3 下拉菜单应用-滑动选择控件输入
【外部主机修改选项】画面，介绍使用滑动选择控件代替文本控件与菜单控件结合使用，此方法与文本控件的区别是，在使用外部单片机发送指令控件串口屏的情况下，文本控件的指令相对比较长，显示中文时还必须转换得到中文字符的编码。而因为选择控件的选项在工程编辑时就已写入，使用单片机控制时，发送相应的选项索引就可以显示对应的选项，指令相对简单，选项索引Start from 0。
画面配置
和【下拉菜单应用-文本控件输入】章节类似，不在阐述
属性配置
菜单控件属性
和【下拉菜单应用-文本控件输入】章节类似，不在阐述
滑动选择控件属性配置
设置【用途】为“状态显示”、【数据选项[语言1]】设置为”57.7V;100V;220V;380V;Invalid;“
按钮控件属性
和【下拉菜单应用-文本控件输入】章节类似，不在阐述
运行预览
运行虚拟屏，VisualTFT软件和虚拟屏用“虚拟串口”建立联机。open【指令助手】，选择左侧导航栏【滑动选择控件】，设置“设置滑动选择控件值”的指令参数。在指令助手中，设置【画面ID】为“1”、【controlID】为“1”、【选项索引】为“2”，click“send”。则在虚拟屏中，该选择控件显示“220V”，运行效果如下所示
MCU控制选择控件选项
参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需实现选择控件显示预设的选项，则直接调用选择控件设置选项的函数SetSelectorValue( )即可，代码如下所示
/********************************************************************
** Function name: void SetSelectorValue(uint16 screen_id,
** uint16 control_id,
** uint8 item);
** Descriptions : 设置选择控件的选项
** input parameters: screen_id : 画面ID
** control_id: controlID
** item : 当前选项
** output parameters: 无
** Returned value : 无
********************************************************************/
{
……
SetSelectorValue(1,1,2); //把画面1、control1的滑动选择控件显示第2项
……
}
Leave a Reply