第 3 步 - 在屏幕之间导航¶

在此步骤中，首先在 RootNode 节点中创建页眉和页脚，然后创建用于在上一步中创建的 Activity 节点之间导航的按钮。

创建头文件和尾文件¶

在本节中，创建应用程序的页眉和页脚。

要创建页眉和页脚：

在 Node Tree 中，按 Alt 并右键单击 RootNode 节点，并创建两个 Empty Node 2D 节点。将这两个节点命名为 Header 和 Footer。

使用这些节点设置整个应用程序中头文件和尾文件的背景和结构。
在 Node Tree 中，选择 Header 节点。在 Properties 中：
- 单击 Layout Height 属性旁边的，并将其设置为 60。
  
  特定节点类型的常用属性在 Properties 中带有标记。点击时，Kanzi Studio 会将该属性添加到节点。
- 单击 Background Brush 旁边的，将该属性添加到 Header 节点：
  1. 在 Background Brush 属性中，选择 + Color Brush。
    
    笔刷可用于设置 2D 节点的背景。在 Kanzi 中，所有 2D 节点默认具有透明背景。
    
    在 Kanzi 中，提供了以下笔刷：
    - 使用 Color Brush 为 2D 节点填充单色。
    - 使用 Texture Brush 以纹理填充 2D 节点。
    - 使用 Material Brush 将 2D 节点填充为材质。
  2. 单击 Background Brush 属性旁边的，并设置要用于 Header 和 Footer 背景的颜色。
从 Properties 窗口中，将 Layout Height 和 Background Brush 属性拖到 Node Tree 窗口上，并将其放在 Footer 节点上。

这样即可为 Footer 节点添加并应用相同的属性。
在 Node Tree 中，选择 Footer 节点。在 Properties 中，添加 Vertical Alignment 属性，并将其设置为 Bottom。

在您将属性设置为其他值之前，Kanzi 使用该属性的默认值。Vertical Alignment 属性的默认值为 Top。因此，在您将 Footer 节点中 Vertical Alignment 属性的值设置为 Bottom 之前，Header 和 Footer 节点都与其父节点 RootNode 节点的顶部对齐。
在 Node Tree 中，按 Alt 并右键单击 Header 节点，并选择 Stack Layout 2D。从 Assets 中，将所有 Icon 图像拖到 Stack Layout 2D 节点。

您可以使用布局节点，相对于应用程序屏幕和其他节点来定位节点。布局包括对齐、边距和布局尺寸属性，您既可以针对某个节点专门定义这些属性，也可以将其定义为由特定布局容器施加于子节点的通用规则。

使用 Stack Layout 节点将项目彼此相邻放置。
在图标之间添加边距：
1. 在 Node Tree 中，选择 Stack Layout 2D 节点中的所有 Icon Image 节点。在 Properties 的右下角，点击打开 Add Properties 窗口。
2. 在 Add Properties 窗口的左列中，双击 Horizontal Margin 属性，将其添加到您在 Node Tree 中选定的节点。
  
  在打开的 Add Properties 窗口的左列中，您可以看到可以在 Node Tree 窗口中选择的节点添加哪些属性。
  
  要快速找到属性，在 Add Properties 窗口的搜索框中输入属性名称的几个字母。
3. 在 Node Tree 中的所有 Icon Image 节点仍处于选定状态时，将 Horizontal Margin 属性的 Right 属性字段的值设为 10。
  
  通过这种方式，可以在节点右侧创建 10 像素的边距。
在 Node Tree 中，选择 Stack Layout 2D 节点。在 Preview 中，选择 Node tool ，然后点击 Align tool 中的中心方块。

这样即可将 Stack Layout 2D 与 Header 节点的中心对齐。

小技巧

使用 Align tool 设置 Horizontal Alignment 和 Vertical Alignment 属性。

创建导航按钮的预设件¶

使用预设件（预制模板）来组织应用程序的结构并创建一致的界面。您可以使用预设件创建应用程序的构建块，并简化应用程序的维护。

在本节中，您将为切换按钮创建预设件，然后在 Footer 节点中将其用作控件，在应用程序中的 Activity 节点之间导航。

要创建导航按钮的预设件：

在 Prefabs 窗口的右下角点击，创建 Toggle Button 2D 预设件，并在 Toggle Button 2D 中：
1. 创建一个 Stack Layout 2D 节点。
2. 将 Menu 图像从 Assets 拖动到 Stack Layout 2D 节点。
3. 在 Stack Layout 2D 节点中，创建 Text Block 2D 节点。
在 Prefabs 中双击 Toggle Button 2D 预设件，在 Preview 中的单独选项卡中只打开该预设件。

当您在 Preview 中打开一个预设时，Kanzi Studio 会将其显示为主菜单下方的一个选项卡。当您希望查看和调整预设而不受使用该预设的上下文干扰时，请在 Preview 中打开预设。
在 Prefabs 中，选择 Toggle Button 2D > Stack Layout 2D > Text Block 2D 节点。在 Properties 中，点击 Text 属性旁边的。

这样即可为每个预设件实例设置文本。

一个节点预设可以包含一个节点树，每个节点都有其自己的属性。当您在项目中编辑预设或其任何实例中的节点时，您会更改该预设的所有实例中的那些节点。您可以通过覆盖预设的属性值来自定义预设的每个实例，使其具有自己的属性值。例如，当您为通讯录条目创建一个预设时，您希望为每个通讯录条目显示不同的姓名、号码和照片。

点击时，Kanzi Studio 会：
1. 从该属性创建一个自定义属性类型。
2. 将该自定义属性类型添加到预设件的根节点。
3. 创建到预设件根节点中该属性的 ##Template 绑定。
这样，您可以在预设件实例的根目录中设置要让 Text Block 2D 节点显示的文本。
在 Text Block 2D 处于选定状态时，在 Preview 中使用 Node tool ，然后点击 Align tool 中的中心方块，将 Text Block 2D 与 Stack Layout 2D 节点的中心对齐。
单击主菜单下的 Screen 选项卡以在 Preview 中显示整个应用程序。
在 Node Tree 中的 Footer 节点中：
1. 创建一个 Toggle Button Group 2D 节点。
  
  Toggle Button Group 节点可让用户只能从一组相互排斥的选项中选定一个选项。
  
  切换按钮组中切换按钮的行为与单选按钮相似，一次只能有一个切换按钮处于活动状态。
2. 在 Toggle Button Group 2D 节点中创建一个 Stack Layout 2D 节点。
3. 从 Prefabs 中，将 Toggle Button 2D 预设件三次拖到 Node Tree 上，并将其放在 Footer > Toggle Button Group 2D > Stack Layout 2D 节点上。
  
  当您将预设从 Prefabs 拖动到 Node Tree 中的任何节点时，Kanzi Studio 会在您放置预设的节点树中创建该预设的一个实例。
4. 在 Node Tree 中，选择每个 Toggle Button 2D 预设件实例，按下 F2，并将其分别命名为 Navigation、Car 和 Media。
5. 选择每个 Toggle Button 2D 预设实例，并在 Properties 中添加并将 FirstApplication.ToggleButton2D.Text 属性的值设置为 Navigation、Car 和 Media。
对于 Footer > Toggle Button Group 2D > Stack Layout 2D 节点中的每个 Toggle Button 2D 预设实例：
1. 在 Node Components 中，按 Alt 并右键单击 Triggers 并选择 Message Trigger > Toggle Button > Toggled On，以添加该触发器。
  
  使用触发器和动作来创建交互。使用触发器来触发动作，例如将属性设置为某个值或设置应用程序的状态。
2. 在 Node Components 中，在您创建的触发器中按 Alt 并右键单击 Actions，并选择 Dispatch Message Action > Activity Host > Activate Activity。
3. 在 Activity Host: Activate Activity 动作中设置：
  - 将 Target Item 设置为包含这些 Activity 的 Exclusive Activity Host 2D
  - 将 Activity Activation Path 设置为您希望按钮导航到的 Activity
  例如，在 Car 切换按钮中，将动作设置为转到 Car Settings Activity。
4. 在 Preview 中，单击以进入 Interact 模式。
  
  在 Interact 模式下，您可以在 Preview 窗口中像在设备上一样与应用程序交互。