第 4 步 - 创建交互¶
在此步骤中，您将学习如何使用 Node Components 窗口，通过触发器和动作在您的应用程序中创建交互。
使用触发器和动作创建交互¶
使用触发器和动作来创建交互。使用触发器来触发动作，例如将属性设置为某个值或设置应用程序的状态。
在 Kanzi Studio 中，您可以在 Node Components 窗口中添加和设置触发器和操作。
您可以在与 Properties 窗口相同的组中找到 Node Components 窗口。
在本节中，您将学习创建按钮并使用触发器和动作将消息写到 Log 窗口。
要使用触发器和动作创建交互：
在 Node Tree 窗口 按 Alt 并右键单击 的 RootPage 节点中，选择 Button 2D，并将其命名为 Next。
大多数 Kanzi 节点仅设置节点布局和功能。这使您可以灵活地使节点看起来符合您的需求。
您放置在 RootPage 节点中的内容在整个应用程序中可见。 例如，如果您想让顶级导航在整个应用程序中可见，请在 RootPage 节点中创建它。
在 Preview 中，单击
以进入 Analyze 模式，右键单击 
，然后选择 Borders of 2D nodes。在 Preview 窗口中使用 Analyze 模式来检查应用程序的结构和性能。
Borders of 2D nodes 用条纹线勾勒出 2D 节点的边界。
例如，这使您可以看到没有视觉表示的2D节点。您在上一步中创建的 Button 2D 节点位于 Preview 窗口的左上角。
在 Node Tree 窗口中选择 Next 节点，在 Node Components 窗口中的 Button: Click 消息触发器 按 Alt 并右键单击 Actions，并选择 Write Log。
使用 Write Log 操作将消息打印到 Log 窗口。
在 Write Log 操作中，靠近 Log Text 属性，点击 Enter Operation 并选择 <Name>。
使用 <Name> 宏将包含此操作的节点类型打印到 Log 窗口。
在主菜单中选择 Window > Log 以打开 Log 窗口。
Kanzi 将消息、警告和错误打印到 Log 窗口。
在 Preview 窗口中，当您单击 Next Button 2D 节点的区域时，您触发了执行 Write Log 操作的 Button: Click 触发器，该操作会将节点的名称写入 Log 窗口。
使用 Preview 窗口工具创建导航按钮。¶
在本节中，您将学习定义在上一节创建的按钮外观并添加动作，从而将其用作应用程序中的导航按钮。
要使用 Preview 窗口工具创建导航按钮：
在 Node Tree 按 Alt 并右键单击 中，选择 Next 节点并选择 Image。
您使用此 Image 节点来定义按钮的外观和大小。
在 Properties 窗口中，将 Image 属性设置为 Arrow 图像。
当您将节点添加到 Button 2D 节点时，默认情况下，Button 2D 节点继承其子节点的大小。
在 Preview 窗口中定位 Next 按钮：
在 Preview 窗口中使用 Node tool
，右键单击箭头 Image 节点，并在上下文菜单中选择 Select > Next 以选择 Next 节点。Preview 窗口可以处于 Edit 或 Interact 模式：
在 Edit 模式下，您可以使用 Preview 窗口编辑项目中的内容。选择任意一个 Preview 窗口工具
进入 Edit 模式。在 Interact 模式下，您可以像在设备上一样在 Preview 窗口中与您的应用程序进行交互。当您使用 Preview 工具时，要切换到 Interact 模式，请在 Preview 窗口中单击
。
在 Node tool
对齐工具 
中，单击中右方的方块以将节点对齐到其父节点 RootPage 节点的右侧和中心。
在 Node Components 按 Alt 并右键单击 中触发 Button: Click，并选择 Dispatch Message Action > Page Host > Navigate to Next。
使用 Navigate to Next 操作转到您在此操作中设置的节点的下一个 Page 或 Page Host 节点。
在 Navigate to Next 操作中，将 Target Item 设置为 RootPage 节点。
当 Button: Click 触发器执行此操作时，该操作导航到 RootPage 节点的下一个 Page 节点。
在 Node Tree 窗口中，选择 Next 节点并按 Ctrl D 键以复制该节点。
您复制并修改 Next 节点以创建一个按钮，用于导航到 RootPage 节点的上一个 Page 节点。
在 Node Tree 窗口中按下 F2 键，并将节点重命名为 Previous。
在 Preview 窗口中，使用 Node tool
来定位 Previous 按钮：在 Node tool
对齐工具 中，单击中左方的方块以将节点对齐到 RootPage 节点（其父节点）的左侧和中心。
在 Preview 窗口中，将鼠标指针移动到节点控件的外侧，并将节点旋转 180 度，使其指向左侧。
小技巧
使用 Node tool
时，将鼠标指针移动到节点句柄的中心以调整节点 
的大小，并移动到句柄的外侧以旋转节点 
。旋转时按住 Shift 键以 45 度增量旋转节点。
在 Node Components 窗口中，右键单击 Navigate to Next 操作并选择 Delete。
在 Node Components 按 Alt 并右键单击 中，选择 Button: Click 触发器，选择 Dispatch Message Action > Page Host > Navigate to Previous，并在 Navigate to Previous 操作中将 Target Item 设置为 RootPage 节点。
在 Preview 窗口中，点击
和 以退出 Edit 和 Analyze 模式。
在 Preview 窗口中，当您点击 Next 和 Previous 按钮时，您会触发这些按钮中的 Button: Click 触发器，并使用 Navigate to Next 和 Navigate to Previous 操作来转到 RootPage 节点的下一个和上一个 Page 子节点。
另请参阅¶
要详细了解有关创建按钮的信息，请完成 教程：创建一个按钮。
要了解有关 Write Log 操作的更多信息，请参阅 使用 Write Log 操作。
要详细了解有关触发器和动作的信息，请参阅 触发器 (Triggers)。
要了解有关 Preview 窗口工具的更多信息，请参阅 在 Preview 中编辑您的应用程序。。