小安派lvgl学习(二)

# lvgl flex布局学习 ## 代码示例  ``` // 纵向flex布局 lv_obj_t * the_col = lv_obj_create(lv_scr_act()); lv_obj_clear_flag(the_col, LV_OBJ_FLAG_SCROLLABLE); lv_obj_set_size(the_col, 240, 80); lv_obj_set_flex_flow(the_col, LV_FLEX_FLOW_COLUMN); lv_obj_set_flex_align(the_col, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER); lv_obj_align(the_col, LV_ALIGN_TOP_MID, 0, 0); // 标题 lv_obj_t * main_title = lv_label_create(the_col); lv_label_set_text (main_title, "main_title"); lv_obj_add_style(main_title, &style_title, 0); lv_obj_add_style(main_title, &style_text_opacity, 0); lv_obj_t * sub_title = lv_label_create(the_col); lv_label_set_text (sub_title, "sub_title"); lv_obj_add_style(sub_title, &style_title, 0); lv_obj_add_style(sub_title, &style_text_opacity, 0); // 横向flex布局 lv_obj_t * the_row = lv_obj_create(lv_scr_act()); lv_obj_clear_flag(the_row, LV_OBJ_FLAG_SCROLLABLE); // 取消滚动条 lv_obj_set_size(the_row, 240, 60); lv_obj_set_flex_flow(the_row, LV_FLEX_FLOW_ROW); lv_obj_set_flex_align(the_col, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER); lv_obj_align_to(the_row, the_col, LV_ALIGN_OUT_BOTTOM_MID, 0, 0); // 创建按钮1 lv_obj_t * btn1 = lv_btn_create(the_row); // 创建按钮2 lv_obj_t * btn2 = lv_btn_create(the_row); // 给按钮添加文字 lv_obj_t * label1 = lv_label_create(btn1); lv_label_set_text(label1, "FLEXBTN1"); lv_obj_t * label2 = lv_label_create(btn2); lv_label_set_text(label2, "FLEXBTN2"); ``` 示例中, 两个文字是纵向flex布局, 两个按钮是横向flex布局 使用 `lv_obj_set_flex_flow` 方法设置当前的对象为flex布局, 方法第一个参数是当前对象, 第二个参数是排列方向, 一般也就用LV_FLEX_FLOW_ROW 和 `LV_FLEX_FLOW_COLUMN` ```c LV_FLEX_FLOW_ROW 将子元素排成一排而不包裹 LV_FLEX_FLOW_COLUMN 将子项放在一列中而不换行 LV_FLEX_FLOW_ROW_WRAP 将孩子排成一排并包裹起来 LV_FLEX_FLOW_COLUMN_WRAP 将子元素放置在带有环绕的列中 LV_FLEX_FLOW_ROW_REVERSE 将子元素排成一行而不换行，但顺序相反 LV_FLEX_FLOW_COLUMN_REVERSE 将子项放在一列中，不换行，但顺序相反 LV_FLEX_FLOW_ROW_WRAP_REVERSE 将子元素排成一行而不换行，但顺序相反 LV_FLEX_FLOW_COLUMN_WRAP_REVERSE 将子项放在一列中，不换行，但顺序相反 ``` 设置完方向, 可以设置元素如何排列, 使用 `lv_obj_set_flex_align` , 第一个参数是当前对象, 第二个参数是横向的对齐方式, 第三个参数是纵向的对齐方式, 这玩意跟CSS的挺像的 ``` LV_FLEX_ALIGN_START：水平方向左，垂直方向上 LV_FLEX_ALIGN_CENTER：居中 LV_FLEX_ALIGN_END：水平方向右，垂直方向下 LV_FLEX_ALIGN_STRETCH： LV_FLEX_ALIGN_SPACE_EVENLY：使两项目间距相等 LV_FLEX_ALIGN_SPACE_AROUND：在一行/列上均匀分布，视觉空间不相等 LV_FLEX_ALIGN_SPACE_BETWEEN：在一行/列上均匀分布 ``` 除了这些 还用到了对象的对齐方法 `lv_obj_align` 和 `lv_obj_align_to` `lv_obj_align` 设置了纵向flex布局的为顶部中间对齐 `lv_obj_align_to` 设置了横向flex布局相对于上面的横向布局 LV_ALIGN_OUT_BOTTOM_MID 对齐 这样就紧挨着他下面啦 ) 然后 `lv_label_create` 和 `lv_btn_create` 的参数填对应的布局对象中即可

你好 有完整代码吗

赞一个

赞

不错不错

👍🏻

学习学习

赞