在图形界面开发中,控件可以说是重中之重;毕竟我们之所以使用 GUI 库,目的就是为了方便地展示和交互各种信息;玲珑 GUI 提供了丰富的控件系统,但我们不需要一开始就掌握每一个控件的细节——只要理解了控件的基本逻辑,其余控件的使用自然就能举一反三;
本文将通过一个简单的控件——Button(按键)——来带你快速理解玲珑 GUI 中控件的构成与使用方法;如果你想了解更多控件的细节,可以参考 玲珑 GUI 的官方文档;
控件属性
我们以 Button 为例,来看一个控件通常都包含哪些属性(同时也包含Button特有的属性):

geometry
- X 和 Y 表示控件在页面中的位置;
- Width 和 Height 表示控件的宽度和高度;
文本相关
按钮上显示的文字,可以设置字体类型、字号、颜色等;
注意:字体大小越大,占用 Flash 空间越多,嵌入式平台要合理控制!
字符集设置
这是一个比较特殊但很关键的点;
- 玲珑 GUI 并不会自动生成所有中文字符的字库(那样就不够“轻量”了对不对);
- 所以你需要在软件里提前添加你需要显示的文字到“字符集”中;
- 然后控件就能引用这个字符集来正确显示文字;
如果你没有将某个汉字加入字符集,即使你设置了这个文字,运行时也可能显示不了!


键值
每个按键都有一个 uint32_t 类型的“键值”,可以作为按键编号,也可以作为事件触发的依据,用于判断“当前按下的是哪个按键”;
开关功能(自锁)
如果启用了此功能,按钮变为“自锁”模式:按下切换状态,不是按下即触发、抬起即恢复;
翻页功能
可以设置按钮按下后跳转到某个页面(页面编号见 UI 文件列表);用于页面之间的快速跳转;
蜂鸣器配置
需要你先移植蜂鸣器支持(官方文档中有),然后可以设置触发条件(按下/抬起/全触发)来实现蜂鸣器提示功能;
显示类型
控件有三种背景显示方式:
- 透明:只有文字,背景透明;
- 颜色:按下和抬起状态分别可设置颜色;
- 图片:设置不同状态对应的背景图,适合已经设计好的界面;
使用代码控制控件
控件配置好后,就可以点击“生成代码”,玲珑 GUI 会自动为每个页面生成三个函数:

- void ui_页面名LogicInit(void):进入页面时执行的初始化操作(如获取句柄,申请空间等);
- void ui_页面名LogicLoop(void):当前页面的循环逻辑(例如实体按键扫描、刷屏);
- void ui_页面名LogicQuit(void):退出页面时的清理操作(如释放资源、句柄等);
强烈建议将你的页面逻辑写入这三个函数中,方便维护与切换;
在 LLGUIBuilder 的代码编辑页(点击 .c 文件)右侧,可以看到所有控件的 API;

例如:nButtonSetText() 就是用来设置按钮文字的函数;
想必有读者已经看到相同的功能总是有两个函数,一个p开头,一个n开头,分别是什么意思呢?(他们分别有不同的意思,在这一章我们先使用n开头的函数)
- n开头的函数是使用控件ID来控制的;
- p开头的函数是用指向控件的指针来控制的;
那么又会有读者有疑问,那么控件ID怎么得到呢?
可以在图形编辑页面点击控件,查看控件名称后缀的编号,然后在LLGUIBuilder代码页面或Keil工程头文件中查找对应 ID;

通过上面的方法,我们就可以用代码控制一些控件的逻辑了,但这样只是代码主动控制控件,但怎么样被动触发事件呢?
比如用户按下了按键,我们如何执行对应的逻辑呢,一直扫描按键状态显然不是一个好方法,那么在逻辑控制章节,我会讲到没有提及的这一部分;