当前位置：首页 > news >正文

LVGL列表部件实战：从基础创建到高级交互设计

news 2026/5/12 3:08:32

1. LVGL列表部件基础入门

第一次接触LVGL的列表部件时，我完全被它强大的功能震撼到了。这个看似简单的UI组件，实际上包含了嵌入式开发中最常用的交互模式。想象一下手机上的联系人列表或者音乐播放列表 - 这就是我们要用lv_list_create实现的效果。

创建基础列表只需要一行代码：

lv_obj_t* my_list = lv_list_create(lv_scr_act(), NULL);

但别被这简单的外表欺骗了，列表部件背后藏着不少玄机。我刚开始用的时候，经常遇到列表项显示不全的问题，后来才发现必须手动设置尺寸：

lv_obj_set_size(my_list, 200, 300); // 宽度200像素，高度300像素

列表最基础的用法是添加文本项和按钮项。这里有个小技巧：添加文本项时最好用分组标题，这样界面会更清晰：

lv_list_add_text(my_list, "系统设置"); // 分组标题 lv_list_add_btn(my_list, LV_SYMBOL_SETTINGS, "显示设置"); lv_list_add_btn(my_list, LV_SYMBOL_WIFI, "网络设置");

2. 动态管理列表内容

实际项目中，静态列表根本不够用。记得有一次做智能家居控制面板，需要根据设备状态动态更新列表，这时候就需要掌握列表的动态管理技巧。

添加按钮项时，返回值特别重要：

lv_obj_t* new_btn = lv_list_add_btn(my_list, LV_SYMBOL_POWER, "开关");

这个返回值new_btn就是后续操作这个按钮的钥匙。比如要删除这个按钮：

lv_obj_del(new_btn); // 直接删除对象

更复杂的场景是批量操作。我做过一个音乐播放列表，需要经常清空重绘：

lv_list_clean(my_list); // 清空整个列表

动态更新时有个坑要注意：删除项后索引会变化。有次我写循环删除时踩了这个坑，后来改用倒序删除就稳了：

for(int i=lv_obj_get_child_cnt(my_list)-1; i>=0; i--){ if(需要删除的条件){ lv_obj_del(lv_obj_get_child(my_list, i)); } }

3. 深度定制列表样式

默认的列表样式太朴素了，好在LVGL提供了强大的样式系统。我第一次美化列表时，被样式继承机制搞晕了，后来才明白要分层次设置。

修改背景色是最基础的：

lv_obj_set_style_bg_color(my_list, lv_color_hex(0x2B2B2B), LV_PART_MAIN);

但真正让列表出彩的是对单独项的美化。比如突出显示当前选中项：

lv_obj_t* first_item = lv_obj_get_child(my_list, 0); lv_obj_set_style_bg_color(first_item, lv_color_hex(0x4A90E2), LV_PART_MAIN);

按钮样式也可以个性化。我特别喜欢给不同功能的按钮设置不同颜色：

lv_obj_t* delete_btn = lv_list_add_btn(my_list, LV_SYMBOL_TRASH, "删除"); lv_obj_set_style_bg_color(delete_btn, lv_color_hex(0xFF5252), LV_PART_MAIN);

滚动条样式经常被忽视，但其实很影响用户体验。这是我常用的配置：

static lv_style_t scroll_style; lv_style_init(&scroll_style); lv_style_set_width(&scroll_style, 6); // 滚动条宽度 lv_style_set_bg_color(&scroll_style, lv_color_hex(0x4A4A4A)); lv_obj_add_style(my_list, &scroll_style, LV_PART_SCROLLBAR);

4. 高级交互与事件处理

没有交互的列表就像没有灵魂的躯壳。LVGL的事件系统让列表活了起来，但刚开始用可能会觉得复杂。

最基本的点击事件这样处理：

static void btn_event_cb(lv_event_t* e){ lv_obj_t* btn = lv_event_get_target(e); printf("点击了：%s\n", lv_list_get_btn_text(my_list, btn)); } lv_obj_t* btn = lv_list_add_btn(my_list, NULL, "测试按钮"); lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL);

滚动事件也很有用。我做过一个效果，滚动时列表项会有视差移动：

static void scroll_event_cb(lv_event_t* e){ // 计算滚动位置并设置项的偏移量 } lv_obj_add_event_cb(my_list, scroll_event_cb, LV_EVENT_SCROLL, NULL);

更高级的交互是手动控制焦点。比如实现方向键导航：

lv_list_focus(目标按钮, LV_ANIM_ON); // 带动画聚焦到指定按钮

5. 实战案例解析

5.1 自动滚动列表

音乐播放器需要自动滚动到当前播放的歌曲。实现这个效果的关键是：

lv_obj_scroll_to_view(目标项, LV_ANIM_ON);

但要注意，必须在列表布局完成后调用，否则可能无效。我通常加个延迟：

lv_task_create([](lv_task_t* task){ lv_obj_scroll_to_view(目标项, LV_ANIM_ON); lv_task_del(task); }, 100, LV_TASK_PRIO_LOW, NULL);

5.2 浮动操作按钮

类似Material Design的浮动按钮效果：

lv_obj_t* float_btn = lv_btn_create(my_list); lv_obj_set_size(float_btn, 50, 50); lv_obj_add_flag(float_btn, LV_OBJ_FLAG_FLOATING); lv_obj_align(float_btn, LV_ALIGN_BOTTOM_RIGHT, -10, -10);

5.3 横向列表布局

默认列表是纵向的，改成横向也很简单：

lv_list_set_layout(my_list, LV_LAYOUT_ROW_MID);

但要注意，改成横向后，滚动方向也要相应调整：

lv_obj_set_scroll_dir(my_list, LV_DIR_HOR);

6. 性能优化技巧

在资源受限的嵌入式设备上，列表性能尤为重要。我总结了几个实用技巧：

虚拟列表：对于超长列表，只渲染可见区域的项目
对象复用：滚动时重复利用移出视口的列表项
延迟加载：复杂内容等显示时再加载
简化样式：减少不必要的样式属性

这里有个对象复用的示例框架：

// 创建池对象 #define POOL_SIZE 10 lv_obj_t* item_pool[POOL_SIZE]; // 初始化时创建池 for(int i=0; i<POOL_SIZE; i++){ item_pool[i] = lv_list_add_btn(my_list, NULL, ""); lv_obj_add_flag(item_pool[i], LV_OBJ_FLAG_HIDDEN); } // 需要显示时从池中取出 lv_obj_t* item = 获取空闲池对象(); lv_label_set_text(lv_obj_get_child(item, 0), "新内容"); lv_obj_clear_flag(item, LV_OBJ_FLAG_HIDDEN);

查看全文

http://www.jsqmd.com/news/527513/