使用堆栈布局 (Stack Layout) 节点

堆栈布局 (Stack Layout) 可用于在选定轴上依次排列节点。您可以设置方向和起点，以便在 x、y 和 z 轴上排列 3D 堆栈布局 (Stack Layout 3D) 子节点以及在 x 和 y 轴上排列 2D 堆栈布局 (Stack Layout 2D) 子节点。

创建 堆栈布局 (Stack Layout) 节点

要创建 堆栈布局 (Stack Layout) 节点：

1. 在工程 (Project) 中按下 Alt 并右键点击要在其中创建堆栈布局 (Stack Layout) 节点的那个节点，然后选择 3D 堆栈布局 (Stack Layout 3D) 或 2D 堆栈布局 (Stack Layout 2D)。
   请注意，只能在 3D 节点内创建 3D 节点，只能在 2D 节点内创建 2D 节点。
   建议

   在预览 (Preview) 中选择2D 堆栈布局工具 (Stack Layout 2D tool) ，在预览 (Preview) 中点击并拖动来创建 2D 堆栈布局 (Stack Layout 2D) 节点。2D 堆栈布局 (Stack Layout 2D) 上方的 显示布局方向。

   • 创建宽度大于高度的布局时，布局方向在 x 轴上。
     
   • 创建高度大于宽度的布局时，布局方向在 y 轴上。
     
2. 在工程 (Project) 中向您在上一步中创建的布局添加子节点。
   例如，如果您创建 3D 堆栈布局 (Stack Layout 3D) 节点，则添加若干球体 (Sphere) 节点，如果您想创建 2D 堆栈布局 (Stack Layout 2D) 节点，则添加若干图像 (Image) 节点。
   添加子节点时，堆栈布局 (Stack Layout) 节点会沿自己的方向 (Direction) 属性所定义的轴放置这些子节点。
3. （可选）在属性 (Properties) 中，将方向 (Direction) 属性设置为您希望堆栈布局 (Stack Layout) 节点在排列其子节点时所沿的那个轴。

4. （可选） 要清除布局中子节点周围的区域，在工程 (Project) 中选择布局中的子节点，在属性 (Properties) 中点击 ，然后添加并设置边距属性：

   • 深度边距 (Depth Margin) 用于清除子节点前后的区域。
   • 水平边距 (Horizontal Margin) 用于清除子节点左右两侧的区域。
   • 垂直边距 (Vertical Margin) 用于清除子节点底部和顶部的区域。

反转堆栈布局 (Stack Layout) 节点子节点的顺序

要反转堆栈布局 (Stack Layout) 节点中的子节点的顺序，请在 工程 (Project) 中选择要反转其子节点顺序的那个堆栈布局 (Stack Layout) 节点，然后在属性 (Properties) 中启用已反向 (Reversed) 属性。

设置 2D 堆栈布局 (Stack Layout 2D) 节点的外观

要设置 2D 节点的外观：

• 您可以使用单色、纹理或材质填充 2D 节点。请参阅调整 2D 节点的外观。
  
• 您可以围绕所有三个轴旋转 2D 节点，以创建 3D 透视效果。请参阅为 2D 节点创建 3D 透视效果。
  
• 您可以应用自定义渲染到 2D 节点，以创建后处理效果。请参阅应用自定义渲染到 2D 节点。
  

在 API 中使用 3D 堆栈布局 (Stack Layout 3D) 节点

要创建 3D 堆栈布局节点：

//创建一个名为 Stack 的 3D 堆栈布局节点。
StackLayout3DSharedPtr stack = StackLayout3D::create(domain, "Stack");

要控制堆栈布局的方向：

//设置堆栈布局，以使其沿 x 轴排列自己的项。
stack->setDirection(StackLayout3D::DirectionX);

要将项添加到堆栈布局：

//堆栈布局 3D 按照您添加项时所用的顺序排列这些项。
//创建一个模型节点并...
Model3DSharedPtr item1 = Model3D::createBox(domain, "item1", Vector3(1.3f, 1.3f, 1.3f), ThemeRed);
// ... 将其添加到堆栈布局中。
stack->addChild(item1);
Model3DSharedPtr item2 = Model3D::createSphere(domain, "item2", 0.8f, 30, 30, ThemeGreen);
stack->addChild(item2);
Model3DSharedPtr item3 = Model3D::createBox(domain, "item3", Vector3(1.0f, 1.0f, 1.0f), ThemeBlue);
stack->addChild(item3);

要反向堆栈布局排列其项的顺序：

//设置堆栈布局，以使其按反向顺序排列其项。
stack->setReversed(true);

有关详细信息，请参阅 API reference中的 StackLayout3D 类。

在 API 中使用 2D 堆栈布局 (Stack Layout 2D) 节点

要创建 2D 堆栈布局节点：

//创建一个名为 Stack 的 2D 堆栈布局对象。
StackLayout2DSharedPtr stack = StackLayout2D::create(domain, "Stack");

要控制堆栈布局的方向：

//设置堆栈布局，以使其沿 x 轴排列自己的项。
stack->setDirection(StackLayout2D::DirectionX);

要将项添加到堆栈布局：

//2D 堆栈布局按照您添加项时所用的顺序排列这些项。
//创建 3D 对象...
EmptyNode2DSharedPtr item1 = EmptyNode2D::create(domain, "item1", 100.0f, 100.0f, ThemeRed);
// ... 并将其添加到堆栈布局中。
stack->addChild(item1);
EmptyNode2DSharedPtr item2 = EmptyNode2D::create(domain, "item2", 100.0f, 100.0f, ThemeGreen);
stack->addChild(item2);
EmptyNode2DSharedPtr item3 = EmptyNode2D::create(domain, "item3", 100.0f, 100.0f, ThemeBlue);
stack->addChild(item3);

要反向堆栈布局排列其项的顺序：

//设置堆栈布局，以使其按反向顺序排列其项。
stack->setReversed(true);

有关详细信息，请参阅 API reference中的 StackLayout2D 类。

堆栈布局 (Stack Layout) 属性类型和消息

要查看 堆栈布局 (Stack Layout) 节点可用属性类型和消息的完整列表，请参阅 Stack layout 2D和 Stack layout 3D。

另请参阅

使用停靠布局 (Dock Layout) 节点

使用流式布局 (Flow Layout) 节点

使用网格布局 (Grid Layout) 节点

使用堆栈布局 (Stack Layout) 节点

使用轨迹布局 (Trajectory Layout) 节点

布局控制节点

使用 Kanzi Studio 为节点启用点击手势

打开导航