[lvgl layout] flexible layout

Flexible layout Widgets demo Source code , The second interface is flexible layout .

Establish flexible layout

Elastic flow

Create a flexible layout on the parent object

lv_obj_set_flex_flow(obj, flex_flow)

flex_flow The value of ：

• LV_FLEX_FLOW_ROW： Arrange sub objects in a row , It can exceed the maximum width of the parent object
• LV_FLEX_FLOW_COLUMN： Arrange sub objects in a column ,
• LV_FLEX_FLOW_ROW_WRAP： Arrange sub objects in a row , No more than the parent object
• LV_FLEX_FLOW_COLUMN_WRAP： Arrange sub objects in a column , No more than the parent object
• ----------------------------------------------------------------------------------------------------
• LV_FLEX_FLOW _ROW_REVERSE： Arrange sub objects in a row , In reverse order
• LV_FLEX_FLOW_COLUMN_REVERSE： Arrange sub objects in a column , In reverse order
• LV_FLEX_FLOW_ROW_WRAP_REVERSE： Arrange sub objects in a row , In reverse order
• LV_FLEX_FLOW_COLUMN_WRAP_REVERSE： Arrange sub objects in a column , In reverse order

Elastic alignment

You can set the position of sub objects .

lv_obj_set_flex_align(obj,  main_place, cross_place, track_cross_place)

main_place Determine how to be good \ Assign items on the column .

cross_place Determine how to allocate items on the line .

track_cross_place Determine how to allocate rows \ Column .

Its value is ：

• LV_FLEX_ALIGN_START： Horizontal left , Vertically
• LV_FLEX_ALIGN_CENTER： In the middle
• LV_FLEX_ALIGN_END： Horizontal right , Vertically
• LV_FLEX_ALIGN_STRETCH：
• LV_FLEX_ALIGN_SPACE_EVENLY： Make the distance between two items equal
• LV_FLEX_ALIGN_SPACE_AROUND： In a row / Evenly distributed on the column , Visual space is not equal
• LV_FLEX_ALIGN_SPACE_BETWEEN： In a row / Evenly distributed on the column

Be careful track_cross_place Applicable problems under . Similar to grid layout ！

for example ：

lv_obj_set_flex_align(color_cont, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);

Flex grow

Can be used to make a or Multiple sub objects fill the available space on the track . When a child object has grow parameters, Free space will be allocated proportionally .

for instance ： Yes 400 px When available space and objects grow ：

• A with grow = 1
• B with grow = 1
• C with grow = 2

here ,A、B Have 100 px,C Have 200 px.

Set the interface function ：

lv_obj_set_flex_grow(child, value);

---

Network style

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

Inside filling

To modify the minimum space between objects flexbox Insert , Can be in flex Set the following properties on the container style ：

• pad_row Set padding between rows .
• pad_column Set the padding between columns .

If you don't want any padding between objects , You can use ：

lv_style_set_pad_column(&row_container_style,0)