首页lvgl的flex的样式

lvgl的flex的样式

时间: 2025-06-07 18:17:41 浏览: 13

### 如何在 LVGL 中使用 Flex 布局样式 #### 启用 Flex 功能为了能够在项目中使用 Flex 布局，需先确认 `lv_conf.h` 文件中的宏定义 `LV_USE_FLEX` 已被设置为 1。这一步骤确保了编译器会包含必要的源文件来支持此特性[^1]。 ```c #define LV_USE_FLEX 1 ``` #### 创建并配置容器对象创建一个新的容器作为父级组件，并指定其布局模式为 Flex： ```c // 初始化一个新容器 lv_obj_t * container = lv_obj_create(lv_scr_act()); lv_obj_set_size(container, 200, 200); // 设置大小 lv_obj_center(container); // 居中显示于屏幕中央 lv_obj_set_layout(container, LV_LAYOUT_FLEX); // 应用Flex布局 ``` #### 添加子元素到容器内向上述已设定好属性的容器里加入多个子部件，这些子部件将会遵循由父容器所规定的排列方式自动调整位置与尺寸比例关系： ```c for(int i=0; i<5; ++i){ lv_obj_t* child = lv_btn_create(container); lv_obj_add_flag(child, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK); // 新增轨道标志位 char buf[8]; sprintf(buf,"Btn %d", i+1); lv_label_create(child)->setText(buf); // 给按钮添加标签文字说明 } ``` #### 调整具体行为参数利用 API 函数进一步微调各个方向上的对齐策略以及间距等细节选项，从而实现更精细的效果控制： ```c /* 主轴分布 */ lv_obj_set_flex_flow(container,LV_FLEX_FLOW_ROW_WRAP); /* 子项间水平间隔 */ lv_obj_set_style_pad_column(container,10,NULL); /* 子项间垂直间隔 */ lv_obj_set_style_pad_row(container,10,NULL); /* 容器内部边距 */ lv_obj_set_style_pad_all(container,10,NULL); /* 对齐方式 */ lv_obj_set_align(container,LV_ALIGN_CENTER); ```

阅读全文