---

在 LVGL（Light and Versatile Graphics Library）中，對象的**盒子模型（Box Model）**類似于 Web/CSS 的布局思想，用于描述對象的結構、邊距、填充等空間關系。下面是簡明清晰的講解：

---

🧱 LVGL 對象盒子模型結構

+-------------------------------+ ← 外部對象區域
|         Margin                |
|   +-----------------------+   |
|   |      Border           |   |
|   |   +---------------+   |   |
|   |   |   Padding     |   |   |
|   |   | +----------+  |   |   |
|   |   | |  Content |  |   |   |
|   |   | +----------+  |   |   |
|   |   +---------------+   |   |
|   +-----------------------+   |
+-------------------------------+

---

🔍 組成部分說明

區域	描述
Content	對象真正顯示的內容（文字、圖像等）
Padding	內容與邊框之間的內邊距，設置方式如 lv_obj_set_style_pad_all()
Border	對象的邊框，樣式設置如 lv_obj_set_style_border_width()
Margin	對象與其他對象之間的外邊距，僅在使用布局時起作用

---

🎮 示例代碼

lv_obj_t *btn = lv_btn_create(lv_scr_act());
lv_obj_set_style_pad_all(btn, 10, 0);       // 設置 padding
lv_obj_set_style_border_width(btn, 2, 0);   // 設置 border
lv_obj_set_style_margin_all(btn, 5, 0);     // 設置 margin

---

📌 總結一句話

LVGL 的盒子模型由 margin、border、padding 和 content 組成，控制對象與周圍及自身內容的布局關系。

在 LVGL 中，樣式（Style）系統是實現美觀界面和靈活定制的核心機制之一。它允許開發者控制對象的顏色、大小、圓角、邊框、陰影、透明度、字體等屬性。下面我們分層次講清楚：

---

🧱 一、樣式的本質：lv_style_t 對象

LVGL 用 lv_style_t 結構體來描述樣式，例如：

static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_color_hex(0xff0000));  // 設置背景色為紅色

一個 style 就是一組視覺屬性集合，不屬于某個特定對象，可以多個對象復用。

---

🎨 二、樣式應用的方式

樣式不是自動生效的，必須綁定到對象上才能生效：

lv_obj_add_style(obj, &style, LV_PART_MAIN);

其中：

• obj 是目標對象；
• &style 是樣式指針；
• LV_PART_MAIN 是應用到哪個部件（part），對象可能有多個部分，如主區域、指示器、滑塊等。

---

🧩 三、樣式屬性分類（核心）

屬性類別	典型屬性（函數）	說明
背景	lv_style_set_bg_color()	背景顏色
邊框	lv_style_set_border_width()	邊框寬度
內邊距	lv_style_set_pad_all()	padding
陰影	lv_style_set_shadow_width()	陰影大小
字體/文本	lv_style_set_text_font()	字體
圓角	lv_style_set_radius()	圓角半徑
不透明度	lv_style_set_bg_opa()	背景透明度

---

🪄 四、多個樣式如何合成？

LVGL 樣式系統支持多個樣式疊加：

1. 優先級排序（重要！）：

   • 本地樣式（lv_obj_add_style() 加的） > 主題樣式 > 默認樣式；

2. 相同屬性時，后添加的會覆蓋先添加的；

3. 不同屬性時會疊加。

---

🧪 五、簡易例子

lv_obj_t *label = lv_label_create(lv_scr_act());
lv_label_set_text(label, "Hello LVGL!");// 創建樣式
static lv_style_t style;
lv_style_init(&style);
lv_style_set_text_color(&style, lv_color_hex(0x0000FF));  // 藍色字體
lv_style_set_text_font(&style, &lv_font_montserrat_20);   // 大字體// 應用樣式
lv_obj_add_style(label, &style, LV_PART_MAIN);

---

? 總結一句話

LVGL 的樣式系統通過 lv_style_t 控制對象視覺屬性，支持疊加、復用和局部應用，功能類似于 CSS。