教程:创建一个按钮

在本教程中,您将学习如何创建一个按钮。Kanzi 允许您仅使用触发器和动作来创建按钮。然而,要创建一个强大的按钮,请使用 Kanzi 状态管理器,并使用 Is Down 属性控制按钮的状态。

这两种方法之间的区别在于,使用状态管理器时,您始终知道按钮处于哪个状态。例如,当用户点击一个使用触发器和动作创建的按钮时,动作会发送消息,但您的应用程序并不知道按钮的状态。使用状态管理器时,您始终可以检查按钮处于哪个状态,甚至在需要时恢复状态。

视频显示教程的结果。

本教程假定您了解使用 Kanzi Studio 的基础知识。熟悉 Kanzi Studio 的最佳入门点是:

获取教程

要获取该教程,请在 Kanzi Studio Quick Start 窗口中点击 Projects,然后选择 Tutorials 选项卡。在 Button 教程旁边,点击 下载。

Kanzi Studio 会将教程下载到 <KanziWorkspace>/Tutorials 目录。您可以找到:

  • 教程起点工程位于 <KanziWorkspace>/Tutorials/Button/Start 目录中。

  • 完成的教程位于 <KanziWorkspace>/Tutorials/Button/Completed 目录中。

创建按钮

要创建按钮:

  1. 在 Kanzi Studio Quick Start 窗口中点击 Projects,然后选择 Tutorials 选项卡。在 Button 教程旁边,点击 Open 并选择 Start project。

  2. 在 Node Tree 按 Alt 并右键单击 中,选择 Frame 节点并选择 Button 2D。

    ../../_images/create-button-2d.png ../../_images/button-2d-in-project.png
  3. 从 Assets 窗口中拖动 Released 图像到 Node Tree,将其放在 Button 2D 节点上,按下 F2 键,并将节点重命名为 ButtonImage。

    使用 ButtonImage 节点设置按钮的外观。

    ../../_images/drag-buttonimage-to-button-2d.png ../../_images/buttonimage.png
  4. 在 Node Tree 中选择 Button 2D 节点,并在 Properties 中添加并设置:

    • Horizontal Alignment 到 Center

    • Vertical Alignment 到 Center

    ../../_images/project-button-2d.png ../../_images/button-2d-properties.png
../../_images/end-of-first-section.png

创建按钮状态

在本节中,您将学习使用状态机定义用户按下和松开按钮时按钮的外观。

要创建按钮状态:

  1. 在 Node Tree 中选择 Button 2D 节点,并在 State Tools 中单击 Create State Manager。

    您可以在 Preview 窗口下方找到 State Tools 窗口。

    Kanzi Studio 创建一个状态管理器并将其分配给 Button 2D 节点。

    ../../_images/project-button-2d.png ../../_images/create-state-manager-for-button.png
  2. 创建按钮状态:

    1. 在 State Tools 中,单击 Create State 以创建一个状态。

      双击状态名称,然后输入状态的新名称。

      例如,命名状态 Pressed。

      ../../_images/create-state.png ../../_images/state-named.png
    2. 在 Node Tree 中选择 ButtonImage 节点,并在 Properties 中将 Image 属性设置为 Pressed。

      ../../_images/buttonimage.png ../../_images/set-image-property-to-pressed.png
    3. 在 State Tools 中,单击 image0 以将当前值保存到该状态。

      您将 Image 属性的当前值保存到 Pressed 状态,以便在用户按下按钮时显示该图像。要查看哪些节点的属性已保存到某个状态,请将鼠标悬停在该状态的 image1 上。

      ../../_images/save-values-to-state.png ../../_images/show-saved-states.png
  3. 重复上一步骤可创建定义按钮未按下时的状态。

    例如,将状态命名为 Released,并将 ButtonImage 节点的 Image 属性设置为 Released。

    ../../_images/create-released-state.png ../../_images/save-values-to-released-state.png
  4. 在 State Tools 中,单击 <No Controller Property> 并选择 Button > Is Down。

    在状态管理器中,您选择为 Controller Property 的属性值定义了状态组中每个状态何时处于活动状态的条件。

    在这里,您使用 Is Down 属性根据该属性的值过渡到某个状态。

    Is Down 属性控制 Button 节点是处于按下状态还是未按下状态。

    ../../_images/set-is-down-controller-property.png
  5. 在 State Tools 中,将 Pressed 状态下的 Controller Property 的值设置为 True。通过这样做,您的 Kanzi 应用程序在按钮被按下时使用 Pressed 状态,而在按钮未被按下时使用 Released 状态。

    ../../_images/set-controller-property-values.png
  6. 在 State Tools 中,单击 Transition Editor 以打开 State Transition Editor。

    ../../_images/open-state-transition-editor.png
  7. State Transition Editor 显示了在该状态组中所有状态之间使用的过渡。将鼠标指针移动到 image2 上,并将 Duration 设置为 0 毫秒。

    您将迁移持续时间设为 0 毫秒,可在用户按下和松开按钮时立即改变按钮外观。

    关闭 State Transition Editor。

    ../../_images/state-transition-editor-set-duration-to-0-ms.png
  8. 在 State Tools 中,单击 Edit State Manager 以停用 State Tools。

    当您想在 Preview 中尝试了解状态管理器如何在您的应用程序中工作时,您需要退出 State Tools 中的编辑模式。

    在 Preview 中,当您单击按钮并按住鼠标按钮时,您将进入 Pressed 状态。当您释放鼠标按钮时,您将进入 Released 状态。

    ../../_images/disable-state-tools.png

接下来该做什么?

在本教程中,您学习了如何创建基于用户动作更改外观的按钮。现在您可以:

另请参阅

要了解有关 Kanzi 状态管理器的更多信息,请参阅 状态机 (State Manager)。

要详细了解不同类型的按钮节点及其用法,请参阅 按钮。

要详细了解有关创建 Kanzi 应用程序的信息,请参阅 教程。