构建电子商务网站的步骤百度营销网页版

---

---

一、什么是 LVGL 的网格布局（Grid）？

网格布局是一种类似 HTML 中 CSS Grid 的布局方式，它允许你将容器划分为“行 × 列”的结构，然后把子控件放到网格的具体格子中。它更适用于复杂、规则、静态的控件排布，比如表格、键盘、计算器等。

---

二、使用 Grid 布局的步骤

✅ 1. 设置容器为 Grid 布局

lv_obj_set_layout(cont, LV_LAYOUT_GRID);

或者你可以直接使用 lv_obj_set_grid_dsc_array() 来初始化布局（推荐使用）

---

✅ 2. 定义网格行列模板

你需要提前定义一个“模板”，告诉 LVGL 每行/每列多宽、是否可伸缩。

常用单位：

• LV_GRID_FR(n)：比例单位（像 CSS 的 fr）
• LV_GRID_CONTENT：自动匹配内容大小
• LV_GRID_TEMPLATE_LAST：标记模板结束

示例：

static lv_coord_t col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(2), LV_GRID_TEMPLATE_LAST};
static lv_coord_t row_dsc[] = {LV_GRID_CONTENT, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};

这表示：

• 有两列，第一列宽度是 1 比例单位，第二列宽度是 2；
• 有两行，第一行为内容大小，第二行为 1 比例单位。

---

✅ 3. 应用模板到容器

lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);

---

✅ 4. 设置子控件在网格中的位置和跨度

lv_obj_set_grid_cell(child, LV_GRID_ALIGN_STRETCH, 0, 2,LV_GRID_ALIGN_CENTER, 1, 1);

参数解释如下：

lv_obj_set_grid_cell(obj, col_align, col_pos, col_span,row_align, row_pos, row_span);

参数	说明
col_align	水平方向对齐（如：LV_GRID_ALIGN_CENTER）
col_pos	起始列编号（从 0 开始）
col_span	横向跨几列
row_align	垂直方向对齐
row_pos	起始行编号
row_span	纵向跨几行

---

三、完整示例：2×2 网格

lv_obj_t * cont = lv_obj_create(lv_scr_act());
lv_obj_set_size(cont, 300, 200);
lv_obj_center(cont);static lv_coord_t col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
static lv_coord_t row_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);// 创建 4 个按钮，放入网格
for (int i = 0; i < 4; i++) {lv_obj_t * btn = lv_btn_create(cont);lv_obj_set_grid_cell(btn, LV_GRID_ALIGN_CENTER, i % 2, 1,LV_GRID_ALIGN_CENTER, i / 2, 1);lv_obj_t * label = lv_label_create(btn);lv_label_set_text_fmt(label, "Btn %d", i + 1);lv_obj_center(label);
}

---

四、Grid 与 Flex 的对比

特性	Grid 网格布局	Flex 弹性布局
布局结构	明确的行列划分，固定网格格子	主轴 + 子控件自动流式排列
控件定位	子控件放入指定行列、支持跨行跨列	子控件根据顺序自动排列
控件大小	可通过比例、内容、固定值精确控制	通常由控件自身宽高 + grow 决定
对齐控制	每个子控件可以独立设置对齐	整体主轴和交叉轴对齐控制为主
响应式程度	更适合静态、规则布局（如键盘）	更适合动态内容排列、流式排版（如卡片墙）
学习曲线	略高，需要理解网格结构和定位	较低，上手快

---

五、如何选择？

需求类型	建议使用
表格、键盘、计算器、九宫格类布局	✅ Grid
聊天记录、图片流、按钮组	✅ Flex
可预知的行列内容	✅ Grid
不确定控件数量或大小	✅ Flex

---

六、可视化对比图示意（示意）🔍

Grid 布局                    Flex 布局
┌────┬────┐                ┌────┬────┬────┐
│ A1 │ A2 │                │ A  │ B  │ C  │
├────┼────┤                └────┴────┴────┘
│ B1 │ B2 │                主轴流动排列
└────┴────┘
规则行列结构                控件顺序排列

---