LVGL对象的盒子模型和样式

---

在 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。