LVGL的三层屏幕结构

在 LVGL（Light and Versatile Graphics Library）中，屏幕（Screen）是 GUI 的最顶级容器，它负责管理和承载所有 UI 对象。为了增强灵活性和分层显示的能力，LVGL 引入了三层屏幕架构，分别是：

🌟 LVGL 的三层屏幕架构

从显示优先级高到低，三层为：

1. Top Layer（顶层）

• 位置：最上层

• 作用：用于显示始终在最前面的元素，如弹窗（modal）、消息提示框、加载动画（spinner）、自定义浮动组件等。

• 特性：

  • 不受普通屏幕的切换影响；
  • 不会随屏幕变化被清除或覆盖；
  • 可用于临时性 UI 组件的显示；

• 使用方式：

  lv_obj_t * top_layer = lv_layer_top();
  lv_obj_t * label = lv_label_create(top_layer);
  

2. System Layer（系统层）

• 位置：中间层，介于 Top Layer 和 active screen 之间

• 作用：用于 LVGL 系统自身使用的图层，如：

  • 输入法弹出窗口
  • 鼠标光标
  • LVGL 内部提示组件

• 特点：

  • 一般不推荐用户使用；
  • 可通过 lv_layer_sys() 访问，但应谨慎操作；
  • 和 Top Layer 一样，也不随屏幕切换而消失；

• 使用方式（如需了解）：

  lv_obj_t * sys_layer = lv_layer_sys();
  

3. Active Screen（当前屏幕层）

• 位置：最底层

• 作用：用于正常显示 UI 的主界面

  • 包含按钮、标签、图像、滑块等常规控件；

• 特点：

  • 通过 lv_scr_act() 获取当前活跃的屏幕；
  • 屏幕切换时，原屏幕会被替换；

• 使用方式：

  lv_obj_t * screen = lv_scr_act();
  lv_obj_t * btn = lv_btn_create(screen);
  

🧠 总结对比

案例：

	lv_obj_t* obj1;
	lv_obj_t* obj2;
	lv_obj_t* obj3;

	/* 屏幕层对象 */
	obj1 = lv_obj_create(lv_screen_active());
	lv_obj_set_size(obj1, 300, 300);
	lv_obj_align(obj1, LV_ALIGN_CENTER, -60, 0);
	lv_obj_set_style_bg_color(obj1, lv_color_hex(0x00FF00), 0);  // 绿色
	lv_obj_set_style_border_width(obj1, 2, 0);
	lv_obj_set_style_border_color(obj1, lv_color_hex(0x003300), 0);

	/* 顶层对象 */
	obj2 = lv_obj_create(lv_layer_top());
	lv_obj_set_size(obj2, 100, 100);
	lv_obj_align(obj2, LV_ALIGN_CENTER, 0, 0);
	lv_obj_set_style_bg_color(obj2, lv_color_hex(0xFF0000), 0);  // 红色
	lv_obj_set_style_border_width(obj2, 2, 0);
	lv_obj_set_style_border_color(obj2, lv_color_hex(0x330000), 0);

	/* 系统层对象 */
	obj3 = lv_obj_create(lv_layer_sys());
	lv_obj_set_size(obj3, 200, 200);
	lv_obj_align(obj3, LV_ALIGN_CENTER, 60, 0);
	lv_obj_set_style_bg_color(obj3, lv_color_hex(0x0000FF), 0);  // 蓝色
	lv_obj_set_style_border_width(obj3, 2, 0);
	lv_obj_set_style_border_color(obj3, lv_color_hex(0x000033), 0);

这段代码是使用 LVGL（Light and Versatile Graphics Library） 创建并演示“三层屏幕结构”的经典示例：普通屏幕层、顶层和系统层。

🔍 整体作用

本示例创建了三个矩形对象（obj1、obj2、obj3），分别挂载在 不同层 上，并通过位置、颜色、尺寸来让它们可视化地叠加显示，从而清晰看出 LVGL 层级结构的优先级和遮挡关系。

✅ 普通屏幕层对象（绿色背景）

obj1 = lv_obj_create(lv_screen_active());
lv_obj_set_size(obj1, 300, 300);
lv_obj_align(obj1, LV_ALIGN_CENTER, -60, 0);
lv_obj_set_style_bg_color(obj1, lv_color_hex(0x00FF00), 0);  // 绿色
lv_obj_set_style_border_width(obj1, 2, 0);
lv_obj_set_style_border_color(obj1, lv_color_hex(0x003300), 0);

📌 说明：

• 创建在当前屏幕（普通 UI 层）上。
• 宽高为 300x300，相当大。
• 居中后左移 -60px，偏左一点。
• 背景为绿色，边框较深绿。

📊 效果：

• 是最底层，任何在“顶层”和“系统层”的对象都会遮挡它。

✅ 顶层对象（红色面板）

obj2 = lv_obj_create(lv_layer_top());
lv_obj_set_size(obj2, 100, 100);
lv_obj_align(obj2, LV_ALIGN_CENTER, 0, 0);
lv_obj_set_style_bg_color(obj2, lv_color_hex(0xFF0000), 0);  // 红色
lv_obj_set_style_border_width(obj2, 2, 0);
lv_obj_set_style_border_color(obj2, lv_color_hex(0x330000), 0);

📌 说明：

• 创建在 lv_layer_top() 顶层，比普通层高。
• 100x100，居中显示。
• 红色背景，深红边框。

📊 效果：

• 会部分遮挡 obj1（绿色矩形）
• 不会被 obj1 遮挡。
• 会被 obj3 遮挡（系统层）

✅ 系统层对象（蓝色面板）

obj3 = lv_obj_create(lv_layer_sys());
lv_obj_set_size(obj3, 200, 200);
lv_obj_align(obj3, LV_ALIGN_CENTER, 60, 0);
lv_obj_set_style_bg_color(obj3, lv_color_hex(0x0000FF), 0);  // 蓝色
lv_obj_set_style_border_width(obj3, 2, 0);
lv_obj_set_style_border_color(obj3, lv_color_hex(0x000033), 0);

📌 说明：

• 创建在 lv_layer_sys() 系统层，优先级最高。
• 200x200，居中右移 +60px，偏右。
• 蓝色背景，深蓝边框。

📊 效果：

• 会遮挡 obj1（屏幕层）、obj2（顶层）
• 不会被任何对象遮挡。

🖼️ 屏幕显示效果（视觉叠加图）

+-------------------------------------------------------------+
|                                                             |
|   [obj3 蓝色 200x200]        ← 最上面，偏右               |
|        ________                                              |
|       |        |                                             |
|       | obj2   |        ← 中间红色100x100（浮在obj1上）     |
|       |________|                                             |
|                                                             |
|   [obj1 绿色 300x300]       ← 最下层，偏左                 |
|                                                             |
+-------------------------------------------------------------+

你将看到：

• 一个大大的绿色矩形偏左。
• 一个中间红色小方块浮在绿色上方。
• 一个偏右的蓝色方块遮住了红色和绿色部分。