布置

节点树

../_images/presentation-banner.png

节点树定义了内容结构及其在屏幕上的布局。

节点树由显示内容的节点(例如,Image 节点)和实现逻辑的节点(例如,Button 2D 节点)构建而成。相同的节点树支持2D和3D节点,并提供连接它们的方法。

节点树中节点之间的关系非常重要,并定义了多个 Kanzi 核心技术的工作方式。渲染顺序、布局、属性和资源继承,以及输入和消息传播都依赖于节点树中父节点和子节点之间的关系。

Kanzi 提供了工具来模块化和重用节点树的部分(例如,预设)。

Kanzi 中可用的节点

内容控制节点

../_images/content-control-nodes.png
../_images/image-node1.png

Image。

使用 Image 节点显示位图图像。

请参阅 使用 Image 节点。

../_images/model-node.png

Model。

使用 Model 节点显示 Kanzi 应用程序中导入的网格。

请参阅 使用导入的网格。

../_images/nine-patch-image.png

Nine Patch Image。

使用 Nine Patch Image 节点可创建可伸缩的按钮背景,其尺寸可随 Nine Patch Image 内容尺寸伸缩。

请参阅 使用 Nine Patch Image 节点。

../_images/page-node.png

Page。

使用 Page 节点在您的应用程序中创建用户界面的结构,并使用 Page Host 节点管理导航请求和 Page Host 节点下的 Page 节点之间的过渡。例如,您可以使用 Page 和 Page Host 节点在您的 Kanzi 应用程序中创建用户界面的不同部分,例如 Page Host 节点 Home、Media、Navigation 或 Settings 屏幕,每个屏幕都有其自己的 Page 和 Page Host 节点层次结构。

请参阅 使用 Page 和 Page Host 节点。

../_images/text-block1.png

Text Block 3D 和 Text Block 2D。

使用 Text Block 节点在应用程序中显示少量文本。

请参阅 使用 Text Block 节点。

../_images/viewport-3d-2d.png

Viewport 3D 和 Viewport 2D。

使用 Viewport 节点设置渲染目标表面的尺寸,Kanzi 将内容投射到该表面上。

请参阅 Viewport 节点。

交互性控件节点

../_images/interactivity-control-nodes.png
../_images/button-3d-2d.png

Button 3D 和 Button 2D。

使用 Button 节点可通过点击、轻敲或按下键盘上的键来创建互动。

请参阅 使用 Button 节点。

../_images/scroll-view-3d-2d.png

Scroll View 3D 和 Scroll View 2D。

Scroll View 节点可用于定义根据用户输入和基于物理的动画生成滚动消息的区域。

请参阅 使用 Scroll View 节点。

../_images/slider-3d-2d.png

Slider 3D 和 Slider 2D。

使用 Slider 节点,可以让用户使用视觉指针在最小值与最大值之间更改数值。

请参阅 使用 Slider 节点。

../_images/text-box-3d-2d.png

Text Box 3D 和 Text Box 2D。

使用 Text Box 节点为您的应用程序添加单行文本输入。

请参阅 使用 Text Box 节点。

../_images/toggle-button-3d-2d.png

Toggle Button 3D 和 Toggle Button 2D。

使用 Toggle Button 节点可通过具有多个切换状态的按钮创建互动。

请参阅 使用 Toggle Button 节点。

../_images/toggle-button-group-3d-2d.png

Toggle Button Group 3D 和 Toggle Button Group 2D。

Toggle Button Group 节点可让用户只能从一组相互排斥的选项中选定一个选项。

请参阅 使用 Toggle Button Group 节点。

布局控制节点

../_images/layout-control-nodes.png
../_images/content-layout-3d-2d.png

Content Layout 3D 和 Content Layout 2D

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

请参阅 使用 Content Layout 节点。

../_images/dock-layout-3d-2d.png

Dock Layout 3D 和 Dock Layout 2D

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

请参阅 使用 Dock Layout 节点。

../_images/empty-layout-3d-2d.png

Empty Node 3D 和 Empty Node 2D

使用 Empty Node 节点来分组节点并设置其子节点的属性值。

请参阅 使用 Empty Node 节点。

../_images/flow-layout-3d-2d.png

Flow Layout 3D 和 Flow Layout 2D

使用 Flow Layout 节点沿一条线排列节点。当一条线没有空间时,Flow Layout 节点将其子节点放置在新的一行中。

请参阅 使用 Flow Layout 节点。

../_images/grid-layout-3d-2d.png

Grid Layout 3D 和 Grid Layout 2D

使用 Grid Layout 节点以网格形式排列节点。

请参阅 使用 Grid Layout 节点。

../_images/stack-layout-3d-2d.png

Stack Layout 3D 和 Stack Layout 2D

使用 Stack Layout 节点在选定轴上依次排列节点。

请参阅 使用 Stack Layout 节点。

../_images/trajectory-layout-3d-2d.png

Trajectory Layout 3D 和 Trajectory Layout 2D

使用 Trajectory Layout 节点可沿轨迹路径排列项。

请参阅 使用 Trajectory Layout 节点。

容器控件节点

../_images/container-control-nodes.png
../_images/grid-list-box-3d-2d.png

Grid List Box 3D 和 Grid List Box 2D

使用 Grid List Box 节点可用于创建以网格形式排列的项的可滚动列表。

请参阅 使用 Grid List Box 节点。

../_images/trajectory-list-box-3d1.png

Trajectory List Box 3D。

使用 Trajectory List Box 3D 节点可在 3D 空间中创建沿轨迹排列的项的可滚动列表。

请参阅 使用 Trajectory List Box 3D 节点。

舞台节点 (Stage nodes)

../_images/3d-nodes.png
../_images/camera.png

Camera。

使用 Camera 节点显示 Kanzi Studio Preview 中 Scene 的内容及您的 Kanzi 应用程序。

请参阅 使用 Camera 节点。

../_images/instantiator.png

Instantiator。

使用 Instantiator 节点来复制 Instantiator 节点所针对的 3D 节点或 3D 节点树的外观。

请参阅 使用 Instantiator 节点。

../_images/level-of-detail.png

Level of Detail。

使用 Level of Detail 节点可用于根据 Level of Detail 节点的查看距离,显示相同对象或不同对象的不同外观。

请参阅 使用 Level of Detail 节点。

../_images/light-nodes.png

Light 节点。

光源节点可用于为您的 Kanzi 应用程序中的 Scene 创建光源。

Kanzi 具有以下光节点类型:

  • Directional Light 仅在一个方向上发光,适合模拟阳光。

  • Point Light 从一个特定位置同时向所有方向(360 度)发光。

  • Spot Light 从特定位置朝指定方向发射圆锥形光。

请参阅 使用光源节点。

../_images/scene.png

Scene。

使用 Scene 节点在您的 Kanzi 应用程序中显示 3D 内容。

请参阅 使用 Scene 节点。

类层级结构

基类是 Node。2D 节点的基类是 Node2D,并允许添加 2D 节点作为子节点。Node3D 以相同的方式用于 3D 节点。Node 类没有连接子节点的方法,因此 Node2D、Node3D 和派生类可以定义它们接受哪些类型的节点作为子节点。例如,Viewport 2D 派生自 Node2D 类,因此接受 2D 子节点,但也接受一个类型为 Scene 的子节点。这样,Kanzi 可以在异构树中排列 2D 和 3D 节点。

要以同类的方式迭代树形结构,请使用 Visitor 或 Abstract Child API:

每个节点都可以访问其父节点。父指针的类型是 Node,因为父节点的类型可以是2D或3D。