首页lvgl 相对控件其他控件在下方

lvgl 相对控件其他控件在下方

时间: 2025-07-08 07:00:48 浏览: 6

### 使用 `lv_obj_align_to` 实现控件相对定位为了让一个控件位于另一个控件的下方，可以直接使用 `lv_obj_align_to` 函数。此函数允许指定目标控件相对于源控件的位置关系。 ```c /* 让 label 控件位于 img 控件正下方 */ lv_obj_t *img = lv_img_create(lv_scr_act()); lv_obj_t *label = lv_label_create(lv_scr_act()); lv_obj_align_to(label, img, LV_ALIGN_OUT_BOTTOM_MID, 0, 10); /* (水平偏移量, 垂直偏移量) */ ``` 上述代码片段展示了如何使标签控件精确地位于图片控件之下，并保持中间对齐[^1]。 ### 利用 Flex 容器实现垂直布局另一种更为推荐的方法是利用Flexbox容器特性来构建垂直排列结构。这需要先确认项目配置文件 `lv_conf.h` 已经启用了 `LV_USE_FLEX` 功能选项[^3]。 #### 创建并配置Flex容器 ```c static void create_vertical_layout(void) { /* 创建一个新的容器用于容纳子元素 */ lv_obj_t *container = lv_obj_create(lv_scr_act()); /* 启用flex流模式并将方向设为列向 */ lv_obj_set_flex_flow(container, LV_FLEX_FLOW_COLUMN); } ``` 接着按照顺序依次往这个容器里添加各个组件，比如先是图像再跟上文字说明： ```c void add_child_objects(lv_obj_t *parent) { /* 添加一张测试图 */ lv_obj_t *test_image = lv_img_create(parent); /* 设置默认显示的文字 */ lv_obj_t *description_text = lv_label_create(parent); lv_label_set_text(description_text, "This is a description."); } ``` 这样做不仅能够保证两个部件之间的上下级次序，而且还能借助框架自带的功能轻松应对不同尺寸屏幕下的自适应需求[^2]。

阅读全文