柔性布局也看 Widgets demo 的源码,第二个界面为柔性布局。
建立柔性布局
弹性流
在父对象上建立柔性布局
lv_obj_set_flex_flow(obj, flex_flow)
flex_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:将子对象排列为一列,顺序相反
弹性对齐
可设置子对象的位置。
lv_obj_set_flex_align(obj, main_place, cross_place, track_cross_place)
main_place 确定怎么在行\列上分配项目。
cross_place 确定如何在行上分配项目。
track_cross_place 确定如何分配行\列。
其取值:
- 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:在一行/列上均匀分布
注意 track_cross_place 下的适用问题。和网格布局类似!
例如:
lv_obj_set_flex_align(color_cont, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
Flex grow
可用于让一个 or 多个子对象填充轨道上可用空间。当子对象拥有 grow parameters,可用空间将会按比例分配。
举个例子:有 400 px 可用空间和对象增长时:
- A with grow = 1
- B with grow = 1
- C with grow = 2
此时,A、B拥有 100 px,C拥有 200 px。
设置的接口函数:
lv_obj_set_flex_grow(child, value);
网络风格
lv_style_set_<property_name>(&style, <value>);
lv_obj_set_style_<property_name>(obj, <value>, <selector>);
- FLEX_FLOW
- FLEX_MAIN_PLACE
- FLEX_CROSS_PLACE
- FLEX_TRACK_PLACE
- FLEX_GROW
内部填充
要修改对象之间的最小空间 flexbox 插入,可以在 flex 容器样式上设置以下属性:
- pad_row 设置行之间的填充。
- pad_column 设置列之间的填充。
如果不希望对象之间有任何填充,则可以使用:
lv_style_set_pad_column(&row_container_style,0)