使用 Content Layout 节点¶

使用 Content Layout 节点在 UI 控件中将内容呈现为单个项目。

例如，使用 Content Layout 节点创建列表项或带有边框、背景、图标和标签的按钮的布局。

默认情况下，Content Layout 节点的大小由其子节点的大小决定。默认情况下，没有子节点的 Content Layout 节点会拉伸以占用所有可用空间。

Content Layout 节点不会排列其子节点。要在 Content Layout 节点中排列节点，请使用另一个布局控制节点。请参阅布局控制节点。

Content Layout 允许您创建布局，其中：

Content Layout 节点的内容决定了 Content Layout 节点的大小。请参阅创建一个适应其内容大小的 Content Layout 节点。。
Content Layout 节点的内容会根据您设置的大小进行调整。请参阅创建一个 Content Layout，其中内容适应固定大小。。

创建一个 Content Layout 节点¶

要创建 Content Layout 节点：

在 Node Tree 按 Alt 并右键单击中，选择您要创建 Content Layout 节点的节点，并选择 Content Layout 3D 或 Content Layout 2D。

您只能在 3D 节点中创建 3D 节点，例如 Scene 节点，并且只能在 2D 节点中创建 2D 节点。
在 Node Tree 中向 Content Layout 节点添加内容。

例如：如果您创建了一个 Content Layout 2D 节点，请创建一个 Text Block 2D 节点。

Content Layout 节点不会排列其子节点。要在 Content Layout 节点中排列节点，请使用另一个布局控制节点。请参阅布局控制节点。
要在 Content Layout 节点的内容周围添加空格，请在 Node Tree 中选择 Content Layout 节点，并在 Properties 中添加并设置填充属性：
- Depth Padding 在 Content Layout 3D 节点中的内容前后添加空格。
- Horizontal Padding 用于在内容的左侧和右侧添加空格。
- Vertical Padding 在内容的顶部和底部添加空格。

创建一个适应其内容大小的 Content Layout 节点。¶

您可以使用 Content Layout 节点来创建适应其内容大小的布局。在此示例中，您创建了一个带有边框、背景、图标和标签的2D按钮布局。

要创建一个适应其内容大小的 Content Layout 节点：

在 Node Tree 中创建一个 Button 2D node，在 Properties 中添加 Background Brush 属性，并将其设置为您想要用来填充 Button 2D 节点的画刷。请参阅调整 2D 节点的外观。

您用画笔填充 Button 2D 节点以显示按钮的边框。

例如，选择 + Color Brush，命名画笔，单击 Background Brush 属性旁边的，并设置颜色画笔的颜色。
在 Button 2D node 中创建一个 Content Layout 2D 节点，在 Properties 中添加 Background Brush 属性，并将其设置为您想要用于填充 Content Layout 2D 节点的画刷。

Content Layout 2D 节点将按钮拉伸以占据所有可用空间。
向 Content Layout 节点添加内容。

例如，创建一个 Stack Layout 2D 节点，并在 Stack Layout 2D 节点中创建：
- Image 节点和在 Properties 中添加并设置：
  - 将 Image 到显示按钮图标的纹理。
  - Vertical Alignment 到 Center
  - Horizontal Margin 属性 Right 属性字段用于在 Image 节点的右侧添加空间。
- Text Block 2D 节点，并在 Properties 中添加和设置：
  - Text 设置按钮标签。
  - Vertical Alignment 到 Center
Content Layout 2D 节点占用您添加到其中的内容所需的空间。
在 Node Tree 中选择 Content Layout 2D 节点，并在 Properties 中添加并设置：
- Horizontal Padding 和 Vertical Padding 用于设置 Content Layout 2D 节点与其父节点之间的间距。
  
  这样可以设置按钮边框与内容之间的空间量。
- Horizontal Margin 和 Vertical Margin 用于设置按钮边框的厚度。

创建一个 Content Layout，其中内容适应固定大小。¶

您可以使用 Content Layout 节点创建一个布局，使内容适应您设置的大小。在此示例中，您创建了一个具有边框、背景、图标和标签的固定大小的2D按钮布局。

要创建一个内容适应固定大小的 Content Layout：

创建一个适应其内容大小的2D布局。请参阅创建一个适应其内容大小的 Content Layout 节点。。
设置包含 Content Layout 2D 节点的节点的大小。

例如：在 Node Tree 中选择 Button 2D 节点，并在 Properties 中添加并设置 Layout Width 和 Layout Height 属性。
在 Node Tree 中选择 Content Layout 2D 节点，并在 Properties 中添加并设置：
- Horizontal Alignment 和 Vertical Alignment 到 Stretch
  
  通过这种方式，您可以将 Content Layout 2D 节点设置为在 x 和 y 轴上占据尽可能多的空间。
- 将 Clip Children 设置为 enabled。
  
  通过这种方式，您可以将 Content Layout 2D 节点的子节点内容裁剪以适应 Content Layout 2D 节点的大小。
对齐 Content Layout 节点的内容。

例如：在 Node Tree 中选择 Stack Layout 2D 节点，在 Properties 中添加 Vertical Alignment 属性，并将其设置为 Center。