LVGL 提供了多种布局方式,帮助你高效组织界面元素,避免手动计算坐标。在 v8.2.0 中,主要有以下几种布局方法:
1. 绝对定位(手动设置坐标)
最基础的方式,通过 lv_obj_set_pos(obj, x, y) 直接指定控件相对于父对象的位置。
适用场景:控件数量少、固定位置(如状态栏图标)。
c
lv_obj_set_pos(btn, 10, 20);
2. 对齐(Alignment)
将控件相对于父对象或其他控件对齐,支持偏移。常用函数:
lv_obj_center(obj)--- 居中lv_obj_align(obj, LV_ALIGN_TOP_MID, dx, dy)--- 顶部中间对齐lv_obj_align_to(obj, ref_obj, LV_ALIGN_OUT_RIGHT_TOP, dx, dy)--- 相对于另一个控件对齐
适用场景:单一控件或控件组的位置固定,但无需复杂的自动排列。
c
lv_obj_align(btn, LV_ALIGN_BOTTOM_MID, 0, -10); // 底部中间,向上偏移10
3. Flex 布局(弹性布局)
类似 CSS Flexbox,让子控件在一行或一列中自动排列,支持换行、对齐方式、间距等。
启用方式:
c
lv_obj_set_flex_flow(container, LV_FLEX_FLOW_ROW); // 水平排列
lv_obj_set_flex_align(container, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_set_style_pad_row(container, 10, 0); // 行间距
lv_obj_set_style_pad_column(container, 5, 0); // 列间距
常用参数:
flex_flow:LV_FLEX_FLOW_ROW(水平)、LV_FLEX_FLOW_COLUMN(垂直)、LV_FLEX_FLOW_ROW_WRAP(换行)等。flex_align:主轴上对齐(LV_FLEX_ALIGN_START/CENTER/END/SPACE_BETWEEN/SPACE_AROUND/SPACE_EVENLY)和交叉轴对齐。
适用场景:列表、按钮组、工具栏等需要动态排列的控件组。
4. Grid 布局(网格布局)
将容器划分为网格,子控件可指定占据的行列,支持跨行跨列。
启用方式:
c
static lv_coord_t col_dsc[] = {100, LV_GRID_FR(1), 100, LV_GRID_TEMPLATE_LAST};
static lv_coord_t row_dsc[] = {40, 40, LV_GRID_TEMPLATE_LAST};
lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
// 将按钮放置在网格的第0行第1列
lv_obj_set_grid_cell(btn, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1);
参数:
col_dsc/row_dsc:定义列宽/行高,可以使用固定值或LV_GRID_FR(1)(比例分配剩余空间)。lv_obj_set_grid_cell:设置控件位置和跨度。
适用场景:复杂表单、仪表盘、等宽多列布局。
5. 布局容器(lv_obj_set_layout)
LVGL 内置了几种简单布局,可通过 lv_obj_set_layout(cont, LV_LAYOUT_...) 快速启用:
LV_LAYOUT_NONE:默认,无特殊布局LV_LAYOUT_FLEX:启用 Flex 布局(效果与lv_obj_set_flex_flow类似)LV_LAYOUT_GRID:启用 Grid 布局
通常更推荐直接使用 lv_obj_set_flex_flow 和 lv_obj_set_grid_dsc_array,因为它们提供了更丰富的控制。
布局选择建议
| 场景 | 推荐布局 |
|---|---|
| 固定位置(如状态栏) | 绝对定位 + 对齐 |
| 垂直排列的菜单、列表 | Flex(列) |
| 水平排列的工具栏 | Flex(行) |
| 复杂仪表板、等分网格 | Grid |
| 响应式布局(自适应宽高) | Flex(配合 LV_FLEX_ALIGN_SPACE_BETWEEN)或 Grid(配合 LV_GRID_FR) |
注意事项
- 布局与样式:布局主要控制位置和尺寸,样式则控制外观,两者可叠加。
- 容器背景 :启用布局的容器如果希望有背景,需设置
lv_obj_set_style_bg_opa(cont, LV_OPA_COVER, 0)等样式。 - 子控件大小 :在布局中,子控件可通过
lv_obj_set_size固定大小,也可由布局自动分配(如lv_obj_set_flex_grow)。
掌握这些布局方法后,你可以轻松构建出适应不同屏幕尺寸的界面,无需为每个控件手动计算坐标。