《lvgl基础学习 —— flex和grid》

1.为什么要学布局

　　如果只用lv_obj_set_pos(obj, x, y)和lv_obj_set_pos(obj, x, y)

会发生什么？

• 分辨率一变 → 全乱

• 文案长度变 → 重叠

• 加一个控件 → 全部重算坐标

• 工程越大 → 越难维护

　　布局 = UI “自动排版”

LVGL的两种核心布局

布局     适合场景                    类比
Flex    列表 / 设置页 / 线性排列      CSS flexbox
Grid    表格 / 键盘 / 九宫格         表格布局

　　90% 的界面 = Flex
Grid 用在“很规整”的地方

 

Flex

　　Flex是把子控件按“行或列”自动排列。

你只需要决定：

• 横向 or 纵向

• 对齐方式

• 间距

 

Flex的API基本用法：

创建一个容器（container）

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_layout(cont, LV_LAYOUT_FLEX);

 

设置Flex方向：

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

 

demo：三个按钮，自动竖着排

void ui_flex_demo(void)
{lv_obj_t *cont = lv_obj_create(lv_scr_act());lv_obj_set_size(cont, 220, 200);lv_obj_center(cont);lv_obj_set_layout(cont, LV_LAYOUT_FLEX);lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);lv_obj_set_flex_align(cont,LV_FLEX_ALIGN_START,   // 主轴LV_FLEX_ALIGN_CENTER, // 交叉轴LV_FLEX_ALIGN_CENTER  // 行对齐
    );for(int i = 0; i < 3; i++) {lv_obj_t *btn = lv_btn_create(cont);lv_obj_set_size(btn, 180, 50);lv_obj_t *label = lv_label_create(btn);lv_label_set_text_fmt(label, "Button %d", i + 1);lv_obj_center(label);}
}