步骤 3 - 创建一个控件以在 Page 节点之间导航。

在此步骤中，您首先在 RootPage 节点中创建一个页眉和页脚，然后创建按钮以在本教程上一步中创建的 Page 节点之间导航。

您添加到 Page 节点的内容在其树中的所有 Page 节点中都是可见的。因此，当您将内容添加到 RootPage 节点时，该内容在该 Kanzi 应用程序的所有 Page 节点中都是可见的。

创建头文件和尾文件

在本节中，您可以创建应用程序头文件和尾文件。

要创建页眉和页脚：

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

   使用这些节点设置整个应用程序中头文件和尾文件的背景和结构。

   

2. 在 Node Tree 中选择 Header 节点，并在 Properties 中：

   • 单击 ，旁边的 Layout Height 属性并将其设置为 60。

     在 Properties 中，经常与某种节点类型一起使用的属性标记为 。 当您单击 时，Kanzi Studio 会将该属性添加到 Node Tree 中选定的节点。

     

   • 单击 ，旁边的 Background Brush 将属性添加到 Header 节点：

     1. 在 Background Brush 属性中选择 + Color Brush。

        

     2. 单击 ，旁边是 Background Brush 属性，并设置您想要用作应用程序中 Header 和 Footer 背景的颜色。

        

3. 从 Properties 窗口中拖动 Layout Height 和 Background Brush 属性到 Node Tree 窗口，并将它们放到 Footer 节点上，以便将相同的属性添加并应用到 Footer 节点。

   

4. 在 Node Tree 中选择 Footer 节点，在 Properties 中添加 Vertical Alignment 属性，并将其设置为 Bottom。

   Kanzi 使用属性的默认值，直到您将其设置为不同的值。Vertical Alignment 属性的默认值是 Top。这就是为什么 Header 和 Footer 节点都对齐到其父节点 RootPage 的顶部，直到您将 Footer 节点中的 Vertical Alignment 属性的值设置为 Bottom。

   

5. 在 Node Tree 按 Alt 并右键单击 中，选择 Header 节点，选择 Stack Layout 2D，并从 Assets 拖动所有 Icon 图像到 Stack Layout 2D 节点。

   您可以使用布局节点来相对于应用程序屏幕和其他节点定位节点。布局由属性对齐、边距和布局大小组成，可以定义为特定于某个节点，或者作为特定布局容器对子节点施加的一般规则。

   使用 Stack Layout 节点将项目彼此相邻放置。

   

6. 在 Node Tree 中，选择 Stack Layout 2D 节点中的所有 Icon Image 节点，在 Properties 的右下角单击 以打开 Add Properties 窗口。在 Add Properties 窗口的左侧列中，双击 Horizontal Margin 属性以将其添加到您在 Node Tree 中选择的节点。

   在打开的 Add Properties 窗口的左列中，您可以看到可以在 Node Tree 窗口中选择的节点添加哪些属性。

   要快速找到属性，在 Add Properties 窗口的搜索框中输入属性名称的几个字母。

   

7. 在仍然选择 Node Tree 中的所有 Icon 节点的情况下，将 Horizontal Margin 属性 Right 属性字段的值设置为 10。

   通过这种方式，可以在节点右侧创建 10 像素的边距。

   

8. 在 Node Tree 中选择 Stack Layout 2D 节点，在 Preview 中选择 Node tool ，并单击 Align tool 中的中心方块以将 Stack Layout 2D 对齐到 Header 节点的中心。

   小技巧

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

   

创建导航按钮的预设件

使用节点预设（预制模板）来构建您的应用程序并创建一致的界面。预设允许您创建应用程序的构建模块，并使应用程序更易于维护。

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

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

1. 在 Prefabs 窗口的右下角，点击 ，创建一个 Toggle Button 2D 预设，并在 Toggle Button 2D 中：

   1. 创建一个 Stack Layout 2D 节点。

   2. 将 Menu 图像从 Assets 拖动到 Stack Layout 2D 节点。

   3. 在 Stack Layout 2D 节点中创建一个 Text Block 2D 节点。

   

2. 在 Prefabs 中，双击 Toggle Button 2D 预设以在单独的选项卡中仅在 Preview 中打开该预设。

   当您在 Preview 中打开一个预设时，Kanzi Studio 会将其显示为主菜单下方的一个选项卡。当您希望查看和调整预设而不受使用该预设的上下文干扰时，请在 Preview 中打开预设。

   

3. 在 Prefabs 中，选择 Toggle Button 2D > Stack Layout 2D > Text Block 2D 节点，并在 Properties 中，点击 ，位于 Text 属性旁边。这使您能够为每个预设实例显示不同的文本。

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

   当您单击 时，Kanzi Studio 从该属性创建一个自定义属性，将其添加到该预设的根节点，并在该预设的根节点中创建一个到该属性的 ##Template 绑定。

   这样，您可以在预设件实例的根目录中设置要让 Text Block 2D 节点显示的文本。

   

4. 选择 Text Block 2D 后，在 Preview 中使用 Node tool ，并单击 Align tool 中的中心方块以将 Text Block 2D 对齐到 Stack Layout 2D 节点的中心。

   

5. 单击主菜单下的 Screen 选项卡以在 Preview 中显示整个应用程序。

   

6. 在 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. 选择每个 Toggle Button 2D 预设实例，按下 F2，并将它们命名为 Navigation、Car 和 Media。

      

   5. 选择每个 Toggle Button 2D 预设实例，并在 Properties 中添加并将 FirstApplication.ToggleButton2D.Text 属性的值设置为 Navigation、Car 和 Media。

      

7. 对于 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 并右键单击 中触发，并选择 Dispatch Message Action > Page > Navigate to Page。

      

   3. 在 Page: Navigate to Page 操作中，将 Target Item 属性设置为您希望此按钮导航应用程序的 Page 节点。

      例如：在 Navigation 切换按钮中，将操作设置为转到 Page 节点 Navigation。

      

   4. 在 Preview 中，单击 以进入 Interact 模式。

      在 Interact 模式下，您可以在 Preview 窗口中像在设备上一样与您的应用程序进行交互。

当您重新启动 Preview 并单击 Footer 节点中的每个按钮时，按钮中的触发器会启动一个动作，该动作转换到您在每个按钮中设置的 Page 节点。

Previous step Next step

另请参阅

要了解有关使用 Preview 工具的更多信息，请参阅 在 Preview 中编辑您的应用程序。。

要详细了解有关使用布局控制节点的信息，请参阅 布局控制节点。

要详细了解有关使用预设件的信息，请参阅 使用节点预设。

要详细了解有关切换按钮和切换按钮组的信息，请参阅 按钮。