在 LVGL（Light and Versatile Graphics Library）中，屏幕（Screen）是 GUI 的最頂級(jí)容器，它負(fù)責(zé)管理和承載所有 UI 對(duì)象。為了增強(qiáng)靈活性和分層顯示的能力，LVGL 引入了三層屏幕架構(gòu)，分別是：

?? LVGL 的三層屏幕架構(gòu)

從顯示優(yōu)先級(jí)高到低，三層為：

1. Top Layer（頂層）

• 位置：最上層
• 作用：用于顯示始終在最前面的元素，如彈窗（modal）、消息提示框、加載動(dòng)畫(huà)（spinner）、自定義浮動(dòng)組件等。
• 特性：不受普通屏幕的切換影響；不會(huì)隨屏幕變化被清除或覆蓋；可用于臨時(shí)性 UI 組件的顯示；
• 使用方式：

2. System Layer（系統(tǒng)層）

• 位置：中間層，介于 Top Layer 和 active screen 之間
• 作用：用于 LVGL 系統(tǒng)自身使用的圖層，如：輸入法彈出窗口鼠標(biāo)光標(biāo)LVGL 內(nèi)部提示組件
• 特點(diǎn)：一般不推薦用戶(hù)使用；可通過(guò) lv_layer_sys() 訪問(wèn)，但應(yīng)謹(jǐn)慎操作；和 Top Layer 一樣，也不隨屏幕切換而消失；
• 使用方式（如需了解）：

3. Active Screen（當(dāng)前屏幕層）

• 位置：最底層
• 作用：用于正常顯示 UI 的主界面包含按鈕、標(biāo)簽、圖像、滑塊等常規(guī)控件；
• 特點(diǎn)：通過(guò) lv_scr_act() 獲取當(dāng)前活躍的屏幕；屏幕切換時(shí)，原屏幕會(huì)被替換；
• 使用方式：

?? 總結(jié)對(duì)比

案例：

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

	/* 屏幕層對(duì)象 */
	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);

	/* 頂層對(duì)象 */
	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);

	/* 系統(tǒng)層對(duì)象 */
	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);  // 藍(lán)色
	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） 創(chuàng)建并演示“三層屏幕結(jié)構(gòu)”的經(jīng)典示例：普通屏幕層、頂層和系統(tǒng)層。

?? 整體作用

本示例創(chuàng)建了三個(gè)矩形對(duì)象（obj1、obj2、obj3），分別掛載在 不同層 上，并通過(guò)位置、顏色、尺寸來(lái)讓它們可視化地疊加顯示，從而清晰看出 LVGL 層級(jí)結(jié)構(gòu)的優(yōu)先級(jí)和遮擋關(guān)系。

? 普通屏幕層對(duì)象（綠色背景）

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);

?? 說(shuō)明：

• 創(chuàng)建在當(dāng)前屏幕（普通 UI 層）上。
• 寬高為 300x300，相當(dāng)大。
• 居中后左移 -60px，偏左一點(diǎn)。
• 背景為綠色，邊框較深綠。

?? 效果：

• 是最底層，任何在“頂層”和“系統(tǒng)層”的對(duì)象都會(huì)遮擋它。

? 頂層對(duì)象（紅色面板）

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);

?? 說(shuō)明：

• 創(chuàng)建在 lv_layer_top() 頂層，比普通層高。
• 100x100，居中顯示。
• 紅色背景，深紅邊框。

?? 效果：

• 會(huì)部分遮擋 obj1（綠色矩形）
• 不會(huì)被 obj1 遮擋。
• 會(huì)被 obj3 遮擋（系統(tǒng)層）

? 系統(tǒng)層對(duì)象（藍(lán)色面板）

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);  // 藍(lán)色
lv_obj_set_style_border_width(obj3, 2, 0);
lv_obj_set_style_border_color(obj3, lv_color_hex(0x000033), 0);

?? 說(shuō)明：

• 創(chuàng)建在 lv_layer_sys() 系統(tǒng)層，優(yōu)先級(jí)最高。
• 200x200，居中右移 +60px，偏右。
• 藍(lán)色背景，深藍(lán)邊框。

?? 效果：

• 會(huì)遮擋 obj1（屏幕層）、obj2（頂層）
• 不會(huì)被任何對(duì)象遮擋。

??? 屏幕顯示效果（視覺(jué)疊加圖）

+-------------------------------------------------------------+
|                                                             |
|   [obj3 藍(lán)色 200x200]        ← 最上面，偏右               |
|        ________                                              |
|       |        |                                             |
|       | obj2   |        ← 中間紅色100x100（浮在obj1上）     |
|       |________|                                             |
|                                                             |
|   [obj1 綠色 300x300]       ← 最下層，偏左                 |
|                                                             |
+-------------------------------------------------------------+

你將看到：

• 一個(gè)大大的綠色矩形偏左。
• 一個(gè)中間紅色小方塊浮在綠色上方。
• 一個(gè)偏右的藍(lán)色方塊遮住了紅色和綠色部分。