4、控件系统迁移（上）：按钮、标签、文本框的创建与属性映射

好，咱们进入控件迁移的正题了。说实话，控件是GUI的骨架，用户看到的、点到的、输入的全是控件。TouchGFX和LVGL在控件体系上思路差不多，但API风格差异挺大。我刚开始从TouchGFX切到LVGL时，最不适应的就是——怎么连个按钮都要多写好几行？

但用顺手了你会发现，LVGL的控件设计更贴近嵌入式底层，灵活度也更高。今天咱们先啃三个最基础的控件：按钮、标签、文本框。这三个搞定了，后面那些复杂的控件（列表、滑块、图表）就一通百通。

4.1 按钮（Button）的创建与属性映射

按钮是交互的起点。TouchGFX里创建一个按钮，通常是继承Button类，然后在构造函数里设图片或文本。LVGL更直接——你创建一个对象，设置样式，绑定点击回调，完事。

先看个对比，你感受一下：

我个人习惯在LVGL里这样写一个标准按钮：

/* 创建按钮 */
lv_obj_t *btn = lv_btn_create(lv_scr_act());
lv_obj_set_pos(btn, 50, 50);
lv_obj_set_size(btn, 120, 40);

/* 按钮上的标签（LVGL创建按钮时会自动附带一个标签子对象） */
lv_obj_t *label = lv_obj_get_child(btn, 0);
lv_label_set_text(label, "确认");

/* 设置点击回调 */
lv_obj_add_event_cb(btn, btn_click_cb, LV_EVENT_CLICKED, NULL);

/* 回调函数 */
static void btn_click_cb(lv_event_t *e) {
    LV_LOG_USER("按钮被点击了");
    /* 你的业务逻辑 */
}

我在项目里遇到过一个问题：TouchGFX的按钮有setTouchable(true/false)来控制是否可点击，LVGL里对应的是lv_obj_add_flag(btn, LV_OBJ_FLAG_CLICKABLE)和lv_obj_clear_flag(btn, LV_OBJ_FLAG_CLICKABLE)。嗯，这个细节容易漏，迁移时记得检查。

4.2 标签（Label）的创建与属性映射

标签就是显示文本的，TouchGFX里叫TextArea，LVGL里叫lv_label。名字不同，但干的活一样——显示静态或动态文本。

来看看属性映射表：

LVGL的标签有个很实用的功能——长文本模式。你可以设置文本超出宽度时自动换行、滚动或省略。TouchGFX里要实现类似效果，得自己写逻辑或者用TextAreaWithWildcard配合滚动容器，挺麻烦的。

/* 创建标签 */
lv_obj_t *label = lv_label_create(lv_scr_act());
lv_obj_set_pos(label, 20, 100);
lv_obj_set_size(label, 200, 40);

/* 设置文本 */
lv_label_set_text(label, "系统运行时间: 0s");

/* 设置文本颜色和对齐 */
lv_obj_set_style_text_color(label, lv_color_hex(0x2c3e50), 0);
lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_CENTER, 0);

/* 动态更新（比如每秒更新一次） */
static void update_label(lv_timer_t *timer) {
    static uint32_t seconds = 0;
    seconds++;
    lv_label_set_text_fmt(lv_obj_get_user_data(timer), "系统运行时间: %d秒", seconds);
}

/* 创建定时器更新标签 */
lv_obj_set_user_data(label, label);
lv_timer_create(update_label, 1000, NULL);

4.3 文本框（Text Area）的创建与属性映射

文本框是用户输入的入口。TouchGFX里叫TextAreaWithWildcard（其实更接近显示），真正的输入框是Keyboard配合TextArea。LVGL直接提供了lv_textarea，自带光标、选中、密码模式，省事不少。

写个实际例子，创建一个带键盘输入的文本框：

/* 创建文本框 */
lv_obj_t *ta = lv_textarea_create(lv_scr_act());
lv_obj_set_pos(ta, 30, 200);
lv_obj_set_size(ta, 260, 40);

/* 设置属性 */
lv_textarea_set_placeholder_text(ta, "点击输入用户名...");
lv_textarea_set_max_length(ta, 16);
lv_textarea_set_one_line(ta, true);

/* 设置样式：边框、圆角、背景色 */
lv_obj_set_style_border_width(ta, 1, 0);
lv_obj_set_style_border_color(ta, lv_color_hex(0xcccccc), 0);
lv_obj_set_style_radius(ta, 4, 0);
lv_obj_set_style_bg_color(ta, lv_color_hex(0xffffff), 0);

/* 创建键盘（LVGL内置键盘） */
lv_obj_t *kb = lv_keyboard_create(lv_scr_act());
lv_keyboard_set_textarea(kb, ta);  /* 关联文本框 */

你看，LVGL的文本框和键盘是解耦的，但通过lv_keyboard_set_textarea一键关联。TouchGFX里你得自己处理键盘按键映射、焦点切换、输入法状态……说实话，LVGL这套省心太多了。

4.4 控件属性映射总览

为了让你迁移时能快速查阅，我把三个控件的核心属性映射整理成了一张图。这张SVG图展示了从TouchGFX到LVGL的思维转换路径：

4.5 迁移避坑指南

最后，我把自己踩过的坑总结一下，你迁移时直接对照检查：

• 父子关系别搞反：TouchGFX里控件添加到父容器是隐式的（通过Container::add），LVGL里lv_xxx_create(parent)的第一个参数就是父对象。如果你传NULL或lv_scr_act()，控件会添加到当前活动屏幕。我刚开始写的时候，经常忘记传父对象，结果控件显示不出来。
• 样式是全局的：LVGL的样式默认会继承。如果你给屏幕设了一个字体，所有子控件默认都用这个字体。TouchGFX里每个控件独立设置样式，迁移时记得检查样式冲突。
• 回调参数不同：TouchGFX的回调是void handler(const AbstractButton& btn)，LVGL是void handler(lv_event_t *e)。你需要通过lv_event_get_target(e)拿到触发事件的控件对象。
• 内存管理：LVGL的控件创建会动态分配内存，删除用lv_obj_del(obj)。如果你频繁创建删除控件（比如动态菜单），记得调用lv_mem_monitor检查内存碎片。