使用 Dock Layout 节点

使用 Dock Layout 节点可将互相关联的节点沿 Dock Layout 节点的两侧放置。

Dock Layout 节点以减法方式排列其项目:在定位第一个节点后,Dock Layout 节点使用剩余空间定位下一个节点,依此类推。当排列其子节点时,Dock Layout 节点使用其整个大小。

您可以使用 Side 属性在 Dock Layout 节点中设置要放置节点的边。

../../_images/dock-layout.gif

Dock Layout 节点以减法方式排列其项目:在定位第一个节点后,Dock Layout 节点使用剩余空间定位下一个节点,依此类推。当排列其子节点时,Dock Layout 节点使用其整个大小。

Dock Layout 节点通过以下方式确定其子节点的位置:

  • 子节点在节点树中的显示顺序。

  • Dock Layout 节点的每个子节点中 Side 属性的值。Dock Layout 节点将每个子节点设置为占据整个边。

  • Dock Layout 节点中子节点的数量。

../../_images/dock-layout-how-it-works.gif

创建一个 Dock Layout 节点

要创建 Dock Layout 节点:

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

    您只能在 3D 节点中创建 3D 节点,例如 Scene 节点,并且只能在 2D 节点中创建 2D 节点。

    ../../_images/node-tree-create-dock-layout-2d.png
  2. 在 Node Tree 中,将子节点添加到您在上一步中创建的布局中。

    例如:如果您创建了一个 Dock Layout 3D,请添加几个 Plane 节点;如果您创建了一个 Dock Layout 2D,请添加几个 Image 节点。

    当您添加子节点时,Dock Layout 节点会自动定位它们。

    ../../_images/node-tree-dock-layout-images.png ../../_images/preview-dock-layout-images.png
  3. 在 Node Tree 中,选择 Dock Layout 节点的所有子节点。在 Properties 中,添加 Dock Layout > Side 属性并将其设置为:

    • Left 将子节点设置为占据 Dock Layout 节点的左侧部分。

    • Right 将子节点设置为占据 Dock Layout 节点的右侧部分。

    • Top 将子节点设置为占据 Dock Layout 节点的顶部。

    • Bottom 将子节点设置为占据 Dock Layout 节点的底部。

    例如,设置 Side 属性用于:

    • Image 到 Top

    • Button 到 Bottom

    • Temperature-F 到 Right

    • Condition 到 Right

    • Temperature-C 到 Left

    ../../_images/dock-layout-add-side-property-to-child-node.gif
  4. (可选) 当您希望 Dock Layout 节点中的最后一个子节点占据 Dock Layout 节点的剩余空间时,请在 Dock Layout 节点中添加 Last Item Fill 属性,并启用它。

  5. (可选) 要清除布局中子节点周围的区域,在 Node Tree 中选择布局中的子节点,在 Properties 中单击 image0,并添加和设置边距属性:

    • Depth Margin 用于清除子节点前后区域。

    • Horizontal Margin 用于清除子节点左右两侧的区域。

    • Vertical Margin 清除子节点顶部和底部的区域。

    ../../_images/dock-layout-add-margin.gif

设置 Dock Layout 2D 节点的外观

要设置 2D 节点的外观:

使用 Dock Layout 3D 节点在 API 中

有关详细信息,请参阅 DockLayout3D 类。

在 API 中使用 Dock Layout 2D 节点

有关详细信息,请参阅 DockLayout2D 类。

Dock Layout 属性类型和消息。

有关 Dock Layout 节点的可用属性类型和消息的列表,请参阅 Dock Layout 2D 和 Dock Layout 3D。

另请参阅

使用 Flow Layout 节点

使用 Grid Layout 节点

使用 Stack Layout 节点

使用 Trajectory Layout 节点

布局控制节点

使用 Kanzi Studio Preview 工具为节点启用点击手势。