LVGL 布局

布局旨在自动定位组件，无需指定 x 和 y 坐标来定位每个组件。这是简化配置的好方法，因为它允许您省略对齐选项。

布局配置选项应用于任何父组件或页面，影响子组件的外观。布局计算的位置和大小会覆盖子组件的常规 x、y、width 和 height 设置。

请查看 Cookbook 中的 Flex 布局定位、网格布局定位和天气预报面板示例，这些示例演示了如何自动化组件定位，可能减少设备 YAML 配置的大小，并节省大量手动计算。

可以在组件上使用 hidden、ignore_layout 和 floating 标志来在布局计算中忽略它们。

配置变量

layout (可选, 字典)：HORIZONTAL、VERTICAL 之一，或描述布局配置的字典：
- type (可选, 字符串)：FLEX、GRID 或 NONE。默认为 NONE。
- 根据所选类型的更多选项如下。

水平布局

配置 layout: horizontal 是 flex 布局的简写：

  layout:
    type: flex
    flex_flow: row
    flex_align_main: space_evenly
    flex_align_track: center
    flex_align_cross: center

此外，如果在容器上设置了 pad_all 选项（从而将填充应用于外部），则列之间也会应用相同的填充，即会设置 pad_column。

垂直布局

配置 layout: vertical 是 flex 布局的简写：

  layout:
    type: flex
    flex_flow: column
    flex_align_main: space_evenly
    flex_align_track: center
    flex_align_cross: center

与 horizontal 布局类似，在容器上使用 pad_all 也会在行之间应用该填充。

Flex

LVGL 中的 Flex 布局是 CSS Flexbox 的子集实现。

它可以将项目排列成行或列（轨道），处理换行，调整项目和轨道之间的间距，甚至可以根据最小/最大宽度和高度处理布局增长以使项目填充剩余空间。

术语说明：

轨道：行或列的主方向流：项目依次放置的方向上的行或列。
交叉方向：垂直于主方向的方向。
换行：如果轨道中没有更多空间，则启动新轨道。
间隙：行和列之间或轨道上项目之间的空间。
增长：如果在项目上设置，它将增长以填充轨道上的剩余空间。可用空间将根据项目的增长值进行分配（较大的值意味着更多空间）。它决定组件应该占用多少可用空间。例如，如果轨道上的所有项目都设置了 grow 为 1，则轨道中的空间将平均分配给它们。如果其中一个项目的值为 2，则该项目将占用其他项目中任何一个的两倍空间。

配置变量：

flex_flow (可选, 字符串)：选择子组件的排列方式：
ROW：将子组件排列成一行，不换行。
COLUMN：将子组件排列成一列，不换行。
ROW_WRAP：将子组件排列成一行，换行（默认）。
COLUMN_WRAP：将子组件排列成一列，换行。
ROW_REVERSE：将子组件排列成一行，不换行，但顺序相反。
COLUMN_REVERSE：将子组件排列成一列，不换行，但顺序相反。
ROW_WRAP_REVERSE：将子组件排列成一行，换行，但顺序相反。
COLUMN_WRAP_REVERSE：将子组件排列成一列，换行，但顺序相反。
flex_align_main (可选, 字符串)：确定如何在主轴上分配轨道中的项目。例如，在 flex_flow: ROW_WRAP 时将项目向右对齐（CSS 中称为 justify-content）。可能的选项如下。
flex_align_cross (可选, 字符串)：确定如何在交叉轴上分配轨道中的项目。例如，如果项目具有不同的高度，则 flex_align_cross: end 将每个项目对齐到轨道底部（CSS 中称为 align-items）。可能的选项如下。
flex_align_track (可选, 字符串)：确定如何分配轨道（CSS 中称为 align-content）。可能的选项如下。

用于 flex_align_main、flex_align_cross、flex_align_track 的值：
START：水平表示左侧，垂直表示顶部（默认）。
END：水平表示右侧，垂直表示底部。
CENTER：简单地居中。
SPACE_EVENLY：项目均匀分布，使任何两个项目之间的间距（以及到边缘的空间）相等。不适用于 flex_align_track。
SPACE_AROUND：项目在轨道中均匀分布，周围有相等的空间。请注意，视觉上空间不相等，因为所有项目两侧都有相等的空间。第一个项目与容器边缘有一个单位的空间，但与下一个项目之间有两个单位的空间，因为下一个项目有自己的间距。不适用于 flex_align_track。
SPACE_BETWEEN：项目在轨道中均匀分布：第一个项目在起始线上，最后一个项目在结束线上。不适用于 flex_align_track。

flex_align_cross 选项还可以接受参数 STRETCH，这将使项目填充交叉轴上的可用空间。这是通过将每个项目的默认高度或宽度设置为 100% 来实现的。项目上的显式高度或宽度将覆盖此设置。

pad_row (可选, int16)：设置行之间的填充，以像素为单位。
pad_column (可选, int16)：设置列之间的填充，以像素为单位。
flex_grow (可选, int16)：可用于使一个或多个子组件填充轨道上的可用空间。当一个或多个子组件设置了 flex_grow 时，可用空间将根据增长值按比例分配。默认为 0，禁用增长。

# 示例 flex 布局

- obj:
    layout:
      type: flex
      pad_row: 4
      pad_column: 4px
      flex_align_main: center
      flex_align_cross: start
      flex_align_track: end
    widgets:
      - animimg:
          flex_grow: 1

Grid

LVGL 中的 Grid 布局是 CSS Grid 的子集实现。

它可以将项目排列成具有行或列（轨道）的 2D “表格”。项目可以跨越多列或多行。轨道的大小可以设置为像素、轨道中最大项目的尺寸（CONTENT）或”自由单位”来按比例分配自由空间。

术语说明：

轨道：行或列。
间隙：行和列之间或轨道上项目之间的空间。
自由单位 (FR)：用于轨道上可用空间的比例分配单位。它接受一个无单位整数值作为比例。它决定组件应该占用多少可用空间。例如，如果轨道上的所有项目都设置了 FR 为 1，则轨道中的空间将平均分配给它们。如果其中一个项目的值为 2，则该项目将占用其他项目中任何一个的两倍空间。

单元格定位：

子组件可以使用 grid_cell_row_pos 和 grid_cell_column_pos 配置变量放置在网格上。如果指定了其中任何一个，则必须同时指定两者。如果两者都未指定，则组件将按行优先顺序放置在第一个可用位置。预留空间时会考虑行和列的跨度。除非将选项 multiple_widgets_per_cell 设置为 true，否则两个或更多组件不能显式分配相同的行和列位置。

简写形式

配置 layout: <rows>x<cols> 是具有指定行数和列数的网格布局的简写，所有行和列大小相等。例如，layout: 2x3 是 layout: { type: grid, grid_rows: [2], grid_columns: [3] } 的简写，所有行和列都设置了 FR(1)。

配置变量（必须放在 layout 键下）：

grid_rows (必需)：网格中的行数，表示为像素值列表、CONTENT 或 FR(n)（自由单位，其中 n 是比例整数值）。
grid_columns (必需)：网格中的列数，表示为像素值列表、CONTENT 或 FR(n)（自由单位，其中 n 是比例整数值）。
grid_row_align (可选, 字符串)：如何对齐行。仅在 grid_rows 以像素给出时有效。可能的选项如下。
grid_column_align (可选, 字符串)：如何对齐列。仅在 grid_columns 以像素给出时有效。可能的选项如下。
pad_row (可选, int16)：设置行之间的填充，以像素为单位。
pad_column (可选, int16)：设置列之间的填充，以像素为单位。
multiple_widgets_per_cell (可选, 布尔值)：如果为 true，则多个组件可以放置在同一单元格中。默认为 false。

在网格布局中，放置在网格上的所有子组件都有额外的配置选项可用：

grid_cell_row_pos (可选, int16)：组件的位置，出现在哪一行（从 0 开始计数）。
grid_cell_column_pos (可选, int16)：组件的位置，出现在哪一列（从 0 开始计数）。
grid_cell_x_align (可选, 字符串)：如何在单元格内水平对齐组件。也可以通过样式属性应用。可能的选项如下。
grid_cell_y_align (可选, 字符串)：如何在单元格内垂直对齐组件。也可以通过样式属性应用。可能的选项如下。
grid_cell_row_span (可选, int16)：组件跨越多少行。默认为 1。
grid_cell_column_span (可选, int16)：组件跨越多少列。默认为 1。

NOTE

这些 grid_cell_ 变量应用于网格布局中的单个组件（单元格）！

用于 grid_column_align、grid_row_align、grid_cell_x_align、grid_cell_y_align 的值：

START：水平表示左侧，垂直表示顶部（默认）。
END：水平表示右侧，垂直表示底部。
CENTER：简单地居中。
STRETCH：在相应方向上将组件拉伸到单元格。不适用于 grid_column_align、grid_row_align。
SPACE_EVENLY：项目均匀分布，使任何两个项目之间的间距（以及到边缘的空间）相等。
SPACE_AROUND：项目在轨道中均匀分布，周围有相等的空间。请注意，视觉上空间不相等，因为所有项目两侧都有相等的空间。第一个项目与容器边缘有一个单位的空间，但与下一个项目之间有两个单位的空间，因为下一个项目有自己的间距。
SPACE_BETWEEN：项目在轨道中均匀分布：第一个项目在起始线上，最后一个项目在结束线上。

# 示例网格布局

- obj:
    layout:
      type: grid
      grid_row_align: end
      grid_rows: [ 100px, fr(1), content ]
      grid_columns: [ fr(1), fr(1) ]
      pad_row: 12px
      pad_column: 12px
    widgets:
      - image:
          src: image_id
          grid_cell_row_pos: 0
          grid_cell_column_pos: 0
          on_click:
            lvgl.page.next:
      - label:
          text: "第 0 行, 第 1 列"
          grid_cell_row_pos: 0
          grid_cell_column_pos: 1
      - label:
          text: "第 2 行, 第 0 列"
          grid_cell_row_pos: 2
          grid_cell_column_pos: 0
      - label:
          text: "第 1 行, 第 0 列"
      - label:
          text: "第 1 行, 第 1 列"
      - label:
          long_mode: wrap
          text: "第 2 行, 第 1 列 (2/0 已占用)"

TIP

要可视化透明组件的实际计算大小，您可以临时在其上设置 outline_width: 1。