lv_obj_set_size(cont, 400, 220); // 设置对象大小 lv_obj_center(cont); // 对象显示在屏幕中央 lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW); // 设置对象弹性布局的排列方式,把子对象排成一行,而不需要包裹
时间: 2025-03-18 13:15:06 浏览: 167
### 使用LVGL实现对象大小设置、中心对齐及弹性布局
#### 对象大小设置
在LVGL中,可以通过`lv_obj_set_size()`函数来调整对象的宽度和高度。该函数接受三个参数:目标对象指针、宽度值以及高度值[^4]。
```c
// 设置对象obj的尺寸为宽200像素,高100像素
lv_obj_set_size(obj, 200, 100);
```
#### 居中对齐
为了将某个对象在其父容器内居中对齐,可以使用`lv_obj_align_to()`或者简化版的`lv_obj_center()`函数。如果需要更灵活的操作,则推荐使用`lv_obj_align_to()`[^2]。
```c
// 将子对象child相对于父对象parent居中对齐
lv_obj_align_to(child, parent, LV_ALIGN_CENTER, 0, 0);
// 或者直接让对象center居中于屏幕或其父级
lv_obj_center(center);
```
#### 弹性布局与行排列不换行
LVGL支持通过样式系统配置复杂的布局行为,比如弹性盒子模型(Flexbox)。启用弹性布局后,可以通过设置特定属性控制子项的行为,例如沿主轴分布的方式、跨轴上的对其方式等[^1]。
以下是创建一个具有弹性布局特性的容器并安排内部项目按照行顺序展示而不自动折行的例子:
```c
// 初始化一个新的容器作为父节点
lv_obj_t *flex_container = lv_obj_create(lv_scr_act());
// 开启此容器内的元素采用 flex 布局模式
lv_obj_set_layout(flex_container, LV_LAYOUT_FLEX);
// 定义一些基本样式以消除间距影响整体外观效果
static lv_style_t no_padding;
lv_style_init(&no_padding);
lv_style_set_pad_all(&no_padding, 0); // 移除所有填充区域距离
lv_obj_add_style(flex_container, &no_padding, 0);
// 配置 Flex Container 的具体表现形式
lv_obj_set_flex_flow(flex_container, LV_FLEX_FLOW_ROW); // 单向水平流式布局
lv_obj_set_flex_main_place(flex_container, LV_FLEX_PLACE_SPACE_EVENLY); // 主轴均匀间隔放置各组件
lv_obj_set_flex_cross_place(flex_container, LV_FLEX_PLACE_CENTER); // 跨越轴方向保持中间位置
// 添加几个测试用的小方块到上述构建好的 flex container 当中去观察实际运行状况
for (int i=0;i<5;++i){
lv_obj_t* item = lv_obj_create(flex_container);
lv_obj_set_size(item ,40 ,40 );
}
```
以上代码片段展示了如何在一个屏幕上建立具备指定功能需求的 UI 结构,并且合理运用了相关 API 实现预期视觉呈现效果[^3]。
阅读全文
相关推荐



















