LVGL（Flex布局）

---

好的！我来给你详细讲讲 LVGL（Light and Versatile Graphics Library） 里的 Flex布局。

---

什么是 LVGL 的 Flex？

LVGL 是一个轻量级开源嵌入式GUI库，适合资源有限的设备。Flex 是 LVGL 提供的一种布局管理机制，灵感来源于 CSS 的 Flexbox 布局，目的是方便灵活地管理控件的排列和分布。

---

Flex 布局的核心概念

Flex 主要是为了方便容器内子控件的自动排列和分布，它的特点是：

• 子控件可以横向（row）或纵向（column）排列。
• 可以设置主轴对齐（主轴是排列方向）。
• 可以设置交叉轴对齐（交叉轴是与主轴垂直的方向）。
• 控件之间间距（gap）和自动换行。

---

LVGL 中如何使用 Flex？

1. 开启 Flex 布局

Flex 是在容器（比如 lv_obj）上设置的，需要先设置容器的布局为 LV_LAYOUT_FLEX：

lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW);  // 横向排列
// 或者
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);  // 纵向排列

2. Flex 排列方向

lv_obj_set_flex_flow 设置主轴方向和换行方式：

枚举值	说明
LV_FLEX_FLOW_ROW	横向排列，子控件从左到右
LV_FLEX_FLOW_ROW_REVERSE	横向排列，子控件从右到左
LV_FLEX_FLOW_COLUMN	纵向排列，子控件从上到下
LV_FLEX_FLOW_COLUMN_REVERSE	纵向排列，子控件从下到上

3. 主轴对齐（主轴是控件排列的方向）

通过设置 lv_obj_set_style_flex_main_place：

选项	说明
LV_FLEX_ALIGN_START	子控件靠主轴起点对齐
LV_FLEX_ALIGN_CENTER	子控件在主轴方向居中
LV_FLEX_ALIGN_END	子控件靠主轴终点对齐
LV_FLEX_ALIGN_SPACE_BETWEEN	子控件两端对齐，之间均匀分布
LV_FLEX_ALIGN_SPACE_AROUND	子控件均匀分布，首尾间距为子控件间距一半

示例：

lv_obj_set_style_flex_main_place(cont, LV_FLEX_ALIGN_SPACE_BETWEEN, 0);

4. 交叉轴对齐（垂直于主轴方向）

通过 lv_obj_set_style_flex_cross_place 设置：

选项	说明
LV_FLEX_ALIGN_START	子控件靠交叉轴起点对齐
LV_FLEX_ALIGN_CENTER	子控件交叉轴居中
LV_FLEX_ALIGN_END	子控件靠交叉轴终点对齐
LV_FLEX_ALIGN_STRETCH	子控件在交叉轴方向拉伸

5. 换行方式

通过 lv_obj_set_style_flex_track_place 控制子控件换行后的排列：

选项	说明
LV_FLEX_ALIGN_START	换行后的行或列靠起点对齐
LV_FLEX_ALIGN_CENTER	换行后的行或列居中
LV_FLEX_ALIGN_END	换行后的行或列靠终点对齐
LV_FLEX_ALIGN_SPACE_BETWEEN	换行后的行或列均匀分布

6. 子控件的生长和收缩

子控件可以设置 flex_grow 属性，来决定当有剩余空间时该控件是否占用：

lv_obj_set_style_flex_grow(child, 1, 0);  // 该子控件会扩展填满剩余空间

---

Flex 的使用示例

// 创建一个容器
lv_obj_t * cont = lv_obj_create(lv_scr_act());// 设置容器大小和位置
lv_obj_set_size(cont, 300, 200);
lv_obj_center(cont);// 设置容器为 Flex 布局，横向排列
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW);// 主轴对齐为两端对齐
lv_obj_set_style_flex_main_place(cont, LV_FLEX_ALIGN_SPACE_BETWEEN, 0);// 交叉轴居中
lv_obj_set_style_flex_cross_place(cont, LV_FLEX_ALIGN_CENTER, 0);// 创建3个子控件
for(int i = 0; i < 3; i++) {lv_obj_t * btn = lv_btn_create(cont);lv_obj_set_size(btn, 60, 40);lv_obj_t * label = lv_label_create(btn);lv_label_set_text_fmt(label, "Btn %d", i+1);lv_obj_center(label);
}

---

总结

特点	说明
布局方向	横向（row）或纵向（column）
主轴对齐	控件在排列方向上的对齐方式
交叉轴对齐	控件垂直排列方向的对齐方式
换行支持	支持子控件自动换行
子控件伸缩	flex_grow 支持控件占用剩余空间
易用且强大	轻松实现复杂的响应式布局

---