使用 Flow Layout 节点¶
使用 Flow Layout 节点沿一条线排列节点。当一条线没有空间时，Flow Layout 节点将其子节点放置在新的一行中。
您可以使用 Flow Layout 节点以与在页面上排列内容相同的方式来排列内容。
Flow Layout 节点按照您添加的顺序遍历其子节点，并首先沿着在 Primary Direction 属性中设置的线排列项目。当 Flow Layout 节点在由 Primary Direction 属性设置的方向上没有可用空间时，它会沿着您在 Secondary Direction 属性中设置的方向创建新行。请参阅 设置 Flow Layout 节点的方向。
您可以设置方向和起始点，以便在 x、y 和 z 轴上排列 Flow Layout 3D 子节点，以及在 x 和 y 轴上排列 Flow Layout 2D 子节点。
创建一个 Flow Layout 节点¶
要创建 Flow Layout 节点：
在 Node Tree 按 Alt 并右键单击 中，选择要创建 Flow Layout 节点的节点，并选择 Flow Layout 3D 或 Flow Layout 2D。
您只能在 3D 节点中创建 3D 节点，例如 Scene 节点，并且只能在 2D 节点中创建 2D 节点。
小技巧
在 Preview 中，选择 Flow Layout 2D tool
，通过在 Preview 中单击并拖动来创建 Flow Layout 2D 节点。创建宽度大于高度的布局时，布局方向为 Left to Right。
创建高度大于宽度的布局时，布局方向为 Top to Bottom。
在 Node Tree 中，将子节点添加到您在上一步中创建的布局中。
例如，如果您创建了一个 Flow Layout 3D 节点，请添加几个包含 3D 内容的 Empty Node 3D 节点。如果您创建了一个 Flow Layout 2D 节点，请添加几个 Image 节点。
当您添加子节点时，Flow Layout 节点会根据 Primary Direction 和 Secondary Direction 属性定义的轴来定位它们。
（可选） 要清除布局中子节点周围的区域，在 Node Tree 中选择布局中的子节点，在 Properties 中单击
，并添加和设置边距属性：Depth Margin 用于清除子节点前后区域。
Horizontal Margin 用于清除子节点左右两侧的区域。
Vertical Margin 清除子节点顶部和底部的区域。
设置 Flow Layout 节点的方向¶
对于 Flow Layout 节点，您可以设置起始点和 Flow Layout 节点排列其子节点的方向。
要设置 Flow Layout 节点的方向：
创建一个 Flow Layout 节点并向其添加子节点。请参阅 创建一个 Flow Layout 节点。
在 Properties 中设置 Flow Layout 节点方向属性：
Primary Direction。这是子节点排列的方向，直到它们达到 Flow Layout 节点的限制。
例如：对于一个 Flow Layout 节点，其 Primary Direction 设置为 Left to Right，限制由 Layout Width 属性设置。然而，如果 Primary Direction 设置为 Near to Far，限制由 Layout Depth 属性设置。
Secondary Direction。这是当子节点超过 Primary Direction 属性设置的限制时，子节点排列的方向。
例如，要设置一个 Flow Layout 节点，其中子节点首先从左到右添加，然后从上到下添加，请将 Primary Direction 属性设置为 Left to Right，并将 Secondary Direction 属性设置为 Top to Bottom。
请注意，为了使 Flow Layout 节点按照 Secondary Direction 属性定义的方向移动，您必须设置 Primary Direction 属性的限制。
例如，要根据以下语言中使用的规则安排流式布局中的项：
从左向右书写的语言，设置属性：
Primary Direction 到 Left to Right
Secondary Direction 到 Top to Bottom
从右向左书写的语言，设置属性：
Primary Direction 到 Right to Left
Secondary Direction 到 Top to Bottom
繁体中文书写布局，设置属性：
Primary Direction 到 Top to Bottom
Secondary Direction 到 Right to Left
设置 Flow Layout 2D 节点的外观¶
要设置 2D 节点的外观：
您可以使用单色、纹理或材质填充 2D 节点。请参阅 调整 2D 节点的外观。
您可以将后期处理效果应用于2D节点。请参阅 2D 节点的效果。
您可以围绕所有三个轴旋转 2D 节点，以创建 3D 透视效果。请参阅 为2D节点创建3D透视效果。
您可以应用自定义渲染到 2D 节点，以创建后处理效果。请参阅 应用自定义渲染到 2D 节点。
您可以将2D节点渲染为像素完美。请参阅 渲染像素完美的2D节点。
使用 API 中的 Flow Layout 3D 节点¶
要创建 Flow Layout 3D 节点：
// Create a Flow Layout 3D node named Flow. The default primary direction is
// left-to-right and the secondary direction top-to-bottom.
FlowLayout3DSharedPtr flow = FlowLayout3D::create(domain, "Flow");
要设置 Flow Layout 3D 节点的宽度：
// Set the width of the Flow Layout 3D node to 6 device-independent pixels to
// limit its size in its primary direction. By limiting the size in
// the primary direction you force the node to create a new line in
// the secondary direction, when it cannot fit an item in the primary direction.
flow->setWidth(6.0f);
要将项添加到 Flow Layout 3D 节点：
// Flow Layout 3D node arranges its items in the order that you add them.
// Create a 3D node ...
Model3DSharedPtr item1 = Model3D::createBox(domain, "item1", Vector3(2.0f, 1.0f, 1.0f), ThemeRed);
// ... and add it to the Flow Layout 3D node.
flow->addChild(item1);
// The second item still fits in the first line.
Model3DSharedPtr item2 = Model3D::createBox(domain, "item2", Vector3(3.0f, 1.0f, 1.0f), ThemeGreen);
flow->addChild(item2);
// There is still space in the first line, but the third item is
// too large to fit, so the Flow Layout 3D node creates a new line.
Model3DSharedPtr item3 = Model3D::createBox(domain, "item3", Vector3(5.0f, 1.0f, 1.0f), ThemeBlue);
flow->addChild(item3);
// The fourth item fits in the second line by leaving no empty space.
Model3DSharedPtr item4 = Model3D::createBox(domain, "item4", Vector3(1.0f, 1.0f, 1.0f), ThemeOrange);
flow->addChild(item4);
// The Flow Layout 3D node places the last item in a new line.
Model3DSharedPtr item5 = Model3D::createBox(domain, "item5", Vector3(3.0f, 1.0f, 1.0f), ThemeGreen);
flow->addChild(item5);
有关详细信息，请参阅 FlowLayout3D 类。
使用 API 中的 Flow Layout 2D 节点。¶
要创建 Flow Layout 2D 节点：
// Create a Flow Layout 2D node named Flow. The default primary direction is
// left-to-right and secondary direction top-to-bottom.
FlowLayout2DSharedPtr flow = FlowLayout2D::create(domain, "Flow");
要设置 Flow Layout 2D 节点的宽度：
// Set the width of the Flow Layout 2D node to 600 pixels to limit its size in its
// primary direction. By limiting the size in the primary direction you force
// the node to create a new line in the secondary direction, when it cannot fit
// an item in the primary direction.
flow->setWidth(600.0f);
要将项添加到 Flow Layout 2D 节点：
// Flow Layout 2D node arranges its items in the order that you add them.
// Create a 2D node ...
EmptyNode2DSharedPtr item1 = EmptyNode2D::create(domain, "item1", 200.0f, 200.0f, ThemeRed);
// ... and add it to the Flow Layout 2D node.
flow->addChild(item1);
// The second item still fits in the first line.
EmptyNode2DSharedPtr item2 = EmptyNode2D::create(domain, "item2", 250.0f, 250.0f, ThemeBlue);
flow->addChild(item2);
// There is still space in the first line, but the third item is
// too large to fit, so the Flow Layout 2D node creates a new line.
EmptyNode2DSharedPtr item3 = EmptyNode2D::create(domain, "item3", 200.0f, 200.0f, ThemeGreen);
flow->addChild(item3);
// The fourth item fits in the second line by leaving no empty space.
EmptyNode2DSharedPtr item4 = EmptyNode2D::create(domain, "item4", 400.0f, 400.0f, ThemeOrange);
flow->addChild(item4);
// The Flow Layout 2D node places the last item in a new line.
EmptyNode2DSharedPtr item5 = EmptyNode2D::create(domain, "item5", 150.0f, 150.0f, ThemeRed);
flow->addChild(item5);
有关详细信息，请参阅 FlowLayout2D 类。
Flow Layout 属性类型和消息。¶
有关 Flow Layout 节点的可用属性类型和消息的列表，请参阅 Flow Layout 2D 和 Flow Layout 3D。