lvgl有哪些布局?

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_flowLV_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_flowlv_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)。

掌握这些布局方法后,你可以轻松构建出适应不同屏幕尺寸的界面,无需为每个控件手动计算坐标。

相关推荐
放下华子我只抽RuiKe52 小时前
NLP自然语言处理硬核实战笔记
前端·人工智能·机器学习·自然语言处理·开源·集成学习·easyui
PieroPc2 小时前
电脑DIY组装报价系统 用MiMo V2 Pro 写html ,再用opencode(选MiMo 作模型) 当录入口
前端·html
好家伙VCC2 小时前
# 发散创新:用Selenium实现自动化测试的智能断言与异常处理策略在现代Web应用开发中,*
java·前端·python·selenium
木子清billy2 小时前
物联网浏览器(IoTBrowser)-js开发人脸识别
开发语言·javascript·物联网
关中老四2 小时前
【原生JS甘特图MZGantt 】如何给父任务设置独立进度条
前端·javascript·甘特图
英俊潇洒美少年2 小时前
react 18 的fiber算法
前端·算法·react.js
xiegwei2 小时前
android Compose 图片星星评分组件
android·前端·elementui
Irene19913 小时前
ES13 # 私有字段( Private Fields) 语法:在类中定义真正的私有属性
javascript·私有字段
小鹿软件办公3 小时前
Firefox 149 正式推送:多任务处理升级,五大新功能详解
前端·firefox