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
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 的参数填对应的布局对象中即可
