LVGL v9官方文档翻译

Layout
Flex
概述
Flexbox（简称为Flex）是CSS Flexbox的一个子集。
它可以将项目安排成行或列（tracks），处理换行，调整项目和tracks之间的间距，处理_grow_以使项目根据最小/最大宽度和高度填充剩余空间。
要将一个对象设置为flex容器，可以调用lv_obj_set_layout(obj, LV_LAYOUT_FLEX)。
请注意，LVGL的flex布局功能需要在lv_conf.h中通过LV_USE_FLEX全局启用。

术语
tracks：行或列
主方向：行或列，即项目排列的方向
交叉方向：与主方向垂直的方向
换行：如果在当前track中没有更多空间，则开始新的track
grow：如果在项目上设置了grow，它将扩展以填充track上的剩余空间。可用空间将根据项目的grow值分配（值越大，分配的空间越多）
间隙：行和列之间或track上的项目之间的空间
简单接口
使用以下函数可以在任何父对象上设置Flex布局。

Flex流动
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：将子项放置在一列中，换行，但顺序相反
Flex对齐
要管理子项的放置，请使用lv_obj_set_flex_align(obj, main_place, cross_place, track_cross_place)

main_place确定如何在主轴上分配track中的项目。例如，将项目推到LV_FLEX_FLOW_ROW_WRAP上的右侧。（在CSS中称为justify-content）
cross_place确定如何在交叉轴上分配track中的项目。例如，如果项目具有不同的高度，将它们放置在track的底部。（在CSS中称为align-items）
track_cross_place确定如何分配tracks（在CSS中称为align-content）
可能的值有：
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中均匀分布，周围间距相等。请注意，视觉上间距并不相等，因为所有项目在两侧都有相等的空间。第一个项目与容器边缘之间有一个单位的空间，但下一个项目之间有两个单位的空间，因为下一个项目有自己的间距。不适用于track_cross_place。
LV_FLEX_ALIGN_SPACE_BETWEEN：项目在track中均匀分布：第一个项目在起始线，最后一个项目在终止线。不适用于track_cross_place。
Flex grow
Flex grow可以用于使一个或多个子项填充track上的可用空间。当多个子项具有grow参数时，可用空间将按grow值成比例分配。例如，有400像素的剩余空间和4个具有grow的对象：

A的grow值为1
B的grow值为1
C的grow值为2
A和B将各自占100像素大小，而C将占200像素大小。
可以通过lv_obj_set_flex_grow(child, value)在子项上设置flex grow。value需要大于1或0以禁用子项上的grow。
样式接口
所有与Flex相关的值都是样式属性，可以像其他样式属性一样使用它们。
以下是存在的flex相关样式属性：

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)来设置。
其他功能
RTL
如果容器的基础方向设置为LV_BASE_DIR_RTL，则在ROW布局中LV_FLEX_ALIGN_START和LV_FLEX_ALIGN_END的意义将会互换。即START将表示右。
在ROW布局中，项目将从右到左排列，而在COLUMN布局中，tracks将从右到左排列。

新track
你可以通过lv_obj_add_flag(child, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK)强制Flex将项目放入新行。

Grid
概述
Grid布局是CSS Grid的一个子集。
它可以将项目排列成一个具有行或列（tracks）的二维“表格”。项目可以跨越多个列或行。track的大小可以设置为像素、最大项目的大小（LV_GRID_CONTENT）或“自由单位”（FR），以按比例分配剩余空间。
要将一个对象设置为grid容器，可以调用lv_obj_set_layout(obj, LV_LAYOUT_GRID)。
请注意，LVGL的grid布局功能需要在lv_conf.h中通过LV_USE_GRID全局启用。

术语
tracks：行或列
自由单位（FR）：如果track的大小设置为FR，它将扩展以填充父容器的剩余空间。
间隙：行和列之间或track上项目之间的空间
简单接口
使用以下函数，可以轻松地在任何父对象上设置Grid布局。

Grid描述符
首先需要描述行和列的大小。可以通过声明两个数组并在其中设置track大小来完成。最后一个元素必须是LV_GRID_TEMPLATE_LAST。
例如：

static int32_t column_dsc[] = {100, 400, LV_GRID_TEMPLATE_LAST};   /*两列，宽度分别为100和400像素*/
static int32_t row_dsc[] = {100, 100, 100, LV_GRID_TEMPLATE_LAST}; /*三行，每行高度为100像素*/
1
2
要在父对象上设置描述符，请使用lv_obj_set_grid_dsc_array(obj, col_dsc, row_dsc)。
除了简单的像素大小设置外，你还可以使用两个特殊值：

LV_GRID_CONTENT 将大小设置为适应此track上的最大子项
LV_GRID_FR(X) 指定此track应使用剩余空间的比例。值越大，分配的空间越多。
Grid项目
默认情况下，子项不会自动添加到grid中。需要手动将它们添加到单元格中。
为此，调用lv_obj_set_grid_cell(child, column_align, column_pos, column_span, row_align, row_pos, row_span)。
column_align和row_align确定如何在单元格中对齐子项。可能的值有：

LV_GRID_ALIGN_START：在水平方向上表示左对齐，在垂直方向上表示顶部对齐（默认）
LV_GRID_ALIGN_END：在水平方向上表示右对齐，在垂直方向上表示底部对齐
LV_GRID_ALIGN_CENTER：居中对齐
column_pos和row_pos表示项目应放置的单元格的从零开始的索引。
column_span和row_span表示项目应跨越的track数。必须>= 1。
Grid对齐
如果有一些空余空间，可以通过多种方式对齐track：

LV_GRID_ALIGN_START：在水平方向上表示左对齐，在垂直方向上表示顶部对齐（默认）
LV_GRID_ALIGN_END：在水平方向上表示右对齐，在垂直方向上表示底部对齐
LV_GRID_ALIGN_CENTER：居中对齐
LV_GRID_ALIGN_SPACE_EVENLY：项目分布均匀，任何两个项目之间的间距（以及到边缘的空间&#x