/**
* Set hot the item should flow
* @param flex pointer to a flex layout descriptor
* @param flow an element of `lv_flex_flow_t`.
*/
void lv_obj_set_flex_flow(lv_obj_t * obj, lv_flex_flow_t flow);
形参说明:
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 //将子项放在一列中,不换行,但顺序相反
举例1: LV_FLEX_FLOW_ROW
:
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW); // 设置对象容器使用基于行的流失弹性布局flex
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN); // 设置对象容器使用基于行的流失弹性布局flex
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP); // 设置对象容器使用基于行的流失弹性布局flex
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN_WRAP); // 设置对象容器使用基于行的流失弹性布局flex
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_REVERSE); // 设置对象容器使用基于行的流失弹性布局flex
/**
* Set how to place (where to align) the items and tracks
* @param flex pointer: to a flex layout descriptor
* @param main_place where to place the items on main axis (in their track). Any value of `lv_flex_align_t`.
* @param cross_place where to place the item in their track on the cross axis. `LV_FLEX_ALIGN_START/END/CENTER`
* @param track_place where to place the tracks in the cross direction. Any value of `lv_flex_align_t`.
*/
void lv_obj_set_flex_align(lv_obj_t * obj, lv_flex_align_t main_place, lv_flex_align_t cross_place,
lv_flex_align_t track_cross_place);
函数说明:
设置子元素集在父级中的轨道分布和对齐方式
形参说明:
LV_FLEX_ALIGN_SPACE_EVENLY
LV_FLEX_ALIGN_SPACE_AROUND
LV_FLEX_ALIGN_SPACE_BETWEEN
无法使用)lv_flex_align_t
:
typedef enum {
LV_FLEX_ALIGN_START, //表示在水平方向和垂直方向的顶部左侧。 (默认)
LV_FLEX_ALIGN_END, //表示水平和底部垂直
LV_FLEX_ALIGN_CENTER, //只是居中
LV_FLEX_ALIGN_SPACE_EVENLY, //项目是分布的,因此任意两个项目之间的间距(以及到边缘的空间)是相等的。 不适用于 track_cross_place
LV_FLEX_ALIGN_SPACE_AROUND, //项目均匀分布在轨道中,它们周围的空间相等。 请注意,视觉上的空间并不相等,因为所有项目的两侧都有相等的空间。 第一个项目将与容器边缘有一个单位的空间,但下一个项目之间有两个单位的空间,因为下一个项目有自己的适用间距。 不适用于track_cross_place
LV_FLEX_ALIGN_SPACE_BETWEEN, // 项目均匀分布在轨道中:第一个项目在开始线上,最后一个项目在结束线上。 不适用于track_cross_place。
} lv_flex_align_t;
举例1:
所有btn子元素都距离容器25个像素,各个btn子元素间距均匀分部,和底部对齐
lv_obj_t* cont = lv_obj_create(lv_scr_act()); // 创建一个对象容器 cont
lv_obj_set_size(cont, 400, 200); // 设置对象容器大小
lv_obj_align(cont, LV_ALIGN_TOP_MID, 0, 5); // 设置对象容器基于屏幕中间对齐
lv_obj_set_style_pad_all(cont, 25, LV_PART_MAIN); // 设置对象容器内部 item 与容器边的上下左右间距
//lv_obj_set_style_pad_row(cont, 10, LV_PART_MAIN); // 设置对象容器内部 item 之间的行间距
//lv_obj_set_style_pad_column(cont, 10, LV_PART_MAIN); // 设置对象容器内部 item 之间的列间距
lv_obj_clear_flag(cont, LV_OBJ_FLAG_SCROLLABLE); // 取消滚动条
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP); // 设置对象容器使用基于行的流失弹性布局flex,设置超出部分换行模式
/**
* 设置容器弹性模式
* 1. 容器指针
* 2. LV_FLEX_ALIGN_SPACE_EVENLY 均匀分部子元素之间的间距
* 3. LV_FLEX_ALIGN_END 容器中所有的子元素底部对齐
* 4. 默认0
*/
lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_END, 0);
举例2:
各个btn子元素间距均匀分部,和每行子元素底部对齐,两边距离容器边框25个像素,子元素的区域位置向容器中心对齐,并均匀分部。
lv_obj_t* cont = lv_obj_create(lv_scr_act()); // 创建一个对象容器 cont
lv_obj_set_size(cont, 350, 420); // 设置对象容器大小
lv_obj_align(cont, LV_ALIGN_TOP_MID, 0, 5); // 设置对象容器基于屏幕中间对齐
lv_obj_set_style_pad_all(cont, 25, LV_PART_MAIN); // 设置对象容器内部 item 与容器边的上下左右间距
//lv_obj_set_style_pad_row(cont, 10, LV_PART_MAIN); // 设置对象容器内部 item 之间的行间距
//lv_obj_set_style_pad_column(cont, 10, LV_PART_MAIN); // 设置对象容器内部 item 之间的列间距
lv_obj_clear_flag(cont, LV_OBJ_FLAG_SCROLLABLE); // 取消滚动条
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP); // 设置对象容器使用基于行的流失弹性布局flex,设置超出部分换行模式
/**
* 设置容器弹性模式
* 1. 容器指针
* 2. LV_FLEX_ALIGN_SPACE_EVENLY 均匀分部子元素之间的间距
* 3. LV_FLEX_ALIGN_END 容器中每行所有的子元素底部对齐
* 4. LV_FLEX_ALIGN_CENTER 容器中内容的子元素向容器中心对齐
*/
lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_END, LV_FLEX_ALIGN_CENTER);
举例3:
各个btn子元素间距均匀分部,和每行子元素底部对齐,子元素的区域位置向容器顶部对齐并距离顶边和两边25个像素,并均匀分部。
lv_obj_t* cont = lv_obj_create(lv_scr_act()); // 创建一个对象容器 cont
lv_obj_set_size(cont, 350, 420); // 设置对象容器大小
lv_obj_align(cont, LV_ALIGN_TOP_MID, 0, 5); // 设置对象容器基于屏幕中间对齐
lv_obj_set_style_pad_all(cont, 25, LV_PART_MAIN); // 设置对象容器内部 item 与容器边的上下左右间距
//lv_obj_set_style_pad_row(cont, 10, LV_PART_MAIN); // 设置对象容器内部 item 之间的行间距
//lv_obj_set_style_pad_column(cont, 10, LV_PART_MAIN); // 设置对象容器内部 item 之间的列间距
lv_obj_clear_flag(cont, LV_OBJ_FLAG_SCROLLABLE); // 取消滚动条
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP); // 设置对象容器使用基于行的流失弹性布局flex,设置超出部分换行模式
/**
* 设置容器弹性模式
* 1. 容器指针
* 2. LV_FLEX_ALIGN_SPACE_EVENLY 均匀分部子元素之间的间距
* 3. LV_FLEX_ALIGN_END 容器中所有的子元素底部对齐
* 4. LV_FLEX_ALIGN_CENTER 容器中内容的子元素向容器顶部对齐
*/
lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_END, LV_FLEX_ALIGN_START);
lv_obj_set_flex_align
参数4,参考图片
lv_obj_set_flex_align
参数2和参数3,参考图片
测试案例:
static lv_style_t style_label;
static lv_obj_t* cont;
static lv_obj_t* cont_main;
LV_FONT_DECLARE(myFontOrbitron_18);
void test_demo(void)
{
lv_obj_t* cont = lv_obj_create(lv_scr_act()); // 创建一个对象容器 cont
lv_obj_set_size(cont, 350, 420); // 设置对象容器大小
lv_obj_align(cont, LV_ALIGN_TOP_MID, 0, 5); // 设置对象容器基于屏幕中间对齐
lv_obj_set_style_pad_all(cont, 25, LV_PART_MAIN); // 设置对象容器内部 item 与容器边的上下左右间距
//lv_obj_set_style_pad_row(cont, 10, LV_PART_MAIN); // 设置对象容器内部 item 之间的行间距
//lv_obj_set_style_pad_column(cont, 10, LV_PART_MAIN); // 设置对象容器内部 item 之间的列间距
lv_obj_clear_flag(cont, LV_OBJ_FLAG_SCROLLABLE); // 取消滚动条
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP); // 设置对象容器使用基于行的流失弹性布局flex,设置超出部分换行模式
/**
* 设置容器弹性模式
* 1. 容器指针
* 2. LV_FLEX_ALIGN_SPACE_EVENLY 均匀分部子元素之间的间距
* 3. LV_FLEX_ALIGN_END 容器中所有的子元素底部对齐
* 4. LV_FLEX_ALIGN_CENTER 容器中内容的子元素向容器中心对齐
*/
lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_END, LV_FLEX_ALIGN_START);
static lv_style_t btn_style;
lv_style_init(&btn_style); // 初始化样式
lv_style_set_radius(&btn_style, 5); // 设置样式圆角为0
lv_obj_t* btn1 = lv_btn_create(cont); // 基于cont对象添加button对象
lv_obj_set_size(btn1, 100, 80); // 设置对象大小
lv_obj_t* btn1_label = lv_label_create(btn1); // 创建按键对象创建label对象
lv_label_set_text(btn1_label, "Btn1"); // 设置label文本
lv_obj_center(btn1_label); // label对象居中显示
lv_obj_add_style(btn1, &btn_style, LV_PART_MAIN); // 配置样式
lv_obj_t* btn2 = lv_btn_create(cont); // 基于cont对象添加button对象
lv_obj_set_size(btn2, 80, 110); // 设置对象大小
lv_obj_t* btn2_label = lv_label_create(btn2); // 创建按键对象创建label对象
lv_label_set_text(btn2_label, "Btn2"); // 设置label文本
lv_obj_center(btn2_label); // label对象居中显示
lv_obj_add_style(btn2, &btn_style, LV_PART_MAIN); // 配置样式
lv_obj_t* btn3 = lv_btn_create(cont); // 基于cont对象添加button对象
lv_obj_set_size(btn3, 45, 30); // 设置对象大小
lv_obj_t* btn3_label = lv_label_create(btn3); // 创建按键对象创建label对象
lv_label_set_text(btn3_label, "Btn3"); // 设置label文本
lv_obj_center(btn3_label); // label对象居中显示
lv_obj_add_style(btn3, &btn_style, LV_PART_MAIN); // 配置样式
lv_obj_t* btn4 = lv_btn_create(cont); // 基于cont对象添加button对象
lv_obj_set_size(btn4, 60, 35); // 设置对象大小
lv_obj_t* btn4_label = lv_label_create(btn4); // 创建按键对象创建label对象
lv_label_set_text(btn4_label, "Btn4"); // 设置label文本
lv_obj_center(btn4_label); // label对象居中显示
lv_obj_add_style(btn4, &btn_style, LV_PART_MAIN); // 配置样式
lv_obj_t* btn5 = lv_btn_create(cont); // 基于cont对象添加button对象
lv_obj_set_size(btn5, 70, 50); // 设置对象大小
lv_obj_t* btn5_label = lv_label_create(btn5); // 创建按键对象创建label对象
lv_label_set_text(btn5_label, "Btn5"); // 设置label文本
lv_obj_center(btn5_label); // label对象居中显示
lv_obj_add_style(btn5, &btn_style, LV_PART_MAIN | LV_STATE_PRESSED); // 配置样式
}