自动布局容器

接下来说到的布局类型，节点结构都如下图：

自动布局组件有几种基本的布局模式，可以通过 属性进行设置，包括以下几种。

Layout Type 设为 Horizontal 时，所有子节点都会自动横向排列，组件默认会修改节点在 y 轴上的位置或高度，如果子节点需要放置在 Layout 节点的约束框高度范围之外，可以取消勾选 AutoAlignment（如上图）。

水平排序下容易出现内容超出容器的情况，可以根据需要采取如下措施：

• 如果内容对象始终要保持在容器内，可以通过设置 ResizeMode 为 Children，该模式会将内容对象的尺寸限制在容器内（下图右）。

• 如果需要子节点在 y 轴向上对齐，可以在子节点上添加 Widget 组件，并开启 Top 或 Bottom 的对齐模式。

水平排列方向（Horizontal Direction）

在水平布局下，可以通过 HorizontalDirection 设置水平朝向。朝向分为 LEFT_TO_RIGHT 和 两种，前者会按照节点在 层级管理器 中显示顺序从左到右排列；后者会按照节点显示从右到左排列。

垂直布局的布局方式和排列方向跟 水平布局 几乎一致，只是方向上的不同，这里就不再赘述。

Layout Type 设为 GRID 会开始网格布局。网格布局会在固定容器大小内，根据 HorizontalDirection 和 VerticalDirection 组合决定布局起点，根据 StartAxis 属性决定布局方向。

网格排列方向（Grid Direction）

• 开始轴向（Start Axis）
  • 可以设置 HORIZONTAL 或 VERTICAL 两种方向。前者会进行横向排列，后者是纵向排列。

结合排列方向，举两个例子说明：

• 如果当前设置的 HorizontalDirection 为 LEFT_TO_RIGHT，VerticalDirection 为 TOP_TO_BOTTOM，StartAxis 为 HORIZONTAL，则是告知组件要的排序方式是从容器的 左上角 开始按水平方向排列（下图左）。

• 如果当前设置的 HorizontalDirection 为 RIGHT_TO_LEFT，VerticalDirection 为 BOTTOM_TO_TOP，StartAxis 为 VERTICAL，则是告知组件要的排序方式是从容器的 右下角 开始按垂直方向排列（下图右）。

  

Grid 排序也有可能出现内容超出容器的情况，可以参考上文中的 水平布局，通过调整 ResizeMode 属性解决。

关于 Layout 组件的属性的详细说明，请参考 Layout 组件 文档。