第 2 步 - 创建应用程序结构¶

在此步骤中，您使用 Page 节点和 Pages 窗口来创建应用程序结构。您还将学习如何使用 Brushes 绘制 2D 节点的背景。

创建 Page 节点。¶

在本节中，您使用 Pages 窗口创建三个 Page 节点，每个节点代表应用程序的不同部分。

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

在本教程的这一步和后续步骤中，您可以学习将内容添加至您在这里创建的 Page 节点。

要创建 Page 节点：

选择 Pages 窗口，旁边是 Library 和 Dictionaries 窗口。

在 Pages 窗口中，单击 RootPage 节点下方的以创建一个 Page 节点。在 RootPage 节点中创建三个 Page 子节点。当您在 Pages 窗口中添加 Page 节点时，在 Node Tree 窗口中，Kanzi Studio 显示这些节点在节点树中的位置。

当您在 Pages 窗口中点击一个 Page 节点时，Kanzi Studio 使用 Push 过渡切换到该 Page 节点。由于您刚创建的 Page 节点中没有内容，因此在 Preview 中点击不会产生任何视觉效果。

../../_images/create-three-page-nodes.png

动作	快捷键
平移	点击鼠标中键并拖动。按下 `Space` 键，然后单击并拖动鼠标左键。
缩放	滚动鼠标滚轮。按下 `Shift` 和 `Alt` 键，然后单击并拖动鼠标左键。

在 Pages 中，双击 Page 节点的名称，输入新名称，然后按 Enter。

例如，调用三个节点 Navigation、Car 和 Media。
在 Node Tree 中选择 RootPage 节点，并在 Properties 中将 Default Subpage 属性设置为 Page 节点 Navigation。

当您激活设置了 Default Subpage 属性的 Page Host 节点时，Kanzi 激活所选的 Page 节点。例如，当您将 Navigation 节点设置为 RootPage 节点的默认子页面时，当您启动应用程序时，Kanzi 显示 Navigation 节点。

设置 Page 节点的背景¶

笔刷可用于设置 2D 节点的背景。在 Kanzi 中，默认情况下所有 2D 节点都有透明背景。

在 Kanzi 中，您可以使用这些画笔：

使用 Color Brush 为 2D 节点填充单色。
使用 Texture Brush 以纹理填充 2D 节点。
使用 Material Brush 将 2D 节点填充为材质。

当您创建一个 Kanzi Studio 项目时，它有一个默认的 Texture Brush，称为 DefaultBackground，并且它会绘制 RootPage 节点的背景。

要设置 Page 节点的背景：

在 Node Tree 中选择 Page 节点 Car。
在 Properties 中，单击，紧挨着 Background Brush，以将该属性添加到 Car 节点。
将 Background Brush 属性设置为 DefaultBackground 画刷。

在 Pages 中，您可以看到您设置为 Background Brush 属性的画笔。
从 Properties 拖动 Car 节点的 Background Brush 属性到 Node Tree 窗口，并将其放到 Media 节点上。

当您从 Properties 拖动一个属性并将其放到 Node Tree 中的一个节点上时，Kanzi Studio 会将该属性及其值添加到该节点。

现在，当您在 Pages 窗口中查看 Car 和 Media 节点时，您可以看到它们具有您使用 Background Brush 属性设置的背景。

将内容添加到 Page 节点 Navigation 和 Car。¶

在本节中，您将内容添加到 Page 节点 Navigation 和 Car。

要向 Page 节点添加内容：

从 Assets 窗口中拖动 NavigationMockup.png 图像到 Pages 窗口，并将其放在 Navigation Page 节点上。

Kanzi Studio 自动创建一个使用您从 Assets 拖动的图像的 Image 节点，并将 Image 节点添加到您放置图像的 Page 节点。
小技巧

在 Assets 窗口中，您可以搜索和浏览项目中的内容：
- 在搜索框中输入您在查找的项名称中包含的单词。
- 点击按钮仅显示某一类型的内容。
在 Node Tree 按 Alt 并右键单击中，选择 Car 节点并选择 Viewport 2D。

Viewport 2D 节点可以渲染 2D 节点，例如 Image 或 Button 2D，以及作为 3D 节点的 Scene。

当您创建一个 Kanzi Studio 项目时，该项目包含一个 Viewport 2D 节点，其中包含一个 Scene，其中包含一个 Camera 和一个 Directional Light。

小技巧

在 Node Tree 窗口中按 Alt 并右键单击节点或在 Library 窗口中创建资源时，可以直接访问节点和资源创建菜单。如果只是右键点击节点或资源，请在上下文菜单中选择 Create 以访问创建菜单。
从 Prefabs 窗口中拖动 Car 预设到 Node Tree 窗口，并将其放在您刚刚在 Page 节点 Car 中创建的 Viewport 2D 节点上。

当您从 Prefabs 窗口中拖动一个预设时，Kanzi Studio 会在您放置预设的节点的节点树中创建该预设的一个实例。