教程：创建一个切换按钮¶

在本教程中，您将学习如何在 Kanzi Studio 中创建一个切换按钮。

视频显示教程的结果。

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

获取教程¶

要获取本教程，请在 Kanzi Studio Quick Start 窗口中点击 Examples。在 Toggle button 教程旁边，点击。

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

位于 <KanziWorkspace>/Tutorials/Toggle button/Start 目录中的教程起点工程。
位于 <KanziWorkspace>/Tutorials/Toggle button/Completed 目录中的已完成教程。

起始项目的内容¶

起点工程包含用于创建切换按钮的图像。您可以在 Assets 窗口中查看这些图像。

创建一个 Toggle Button 2D 节点。¶

在本节中，您将创建并定位一个 Toggle Button 2D 节点。

要创建一个 Toggle Button 2D 节点：

在 Kanzi Studio Quick Start 窗口中，点击 Examples。在 Toggle button 教程旁边，点击 Open 并选择 Start project。
在 Node Tree 中，按 Alt 并右键单击 RootPage 节点，并选择 Toggle Button 2D。

当您创建一个 Toggle Button 2D 节点时，该节点没有视觉外观。在本教程中，您将设置切换按钮的外观。
从 Assets 窗口中，将 ToggleButtonBackground 图像拖到 Node Tree 上，并将其放在 Toggle Button 2D 节点上。
在 Node Tree 中，选择 Toggle Button 2D 节点，在 Preview 中选择 Node tool ，并单击中心方块。

通过这种方式，您将 Horizontal Alignment 和 Vertical Alignment 属性设置为 Center，从而将 Toggle Button 2D 节点放置在 RootPage 的中心。

创建切换按钮状态¶

在本节中，您使用状态管理器设置切换按钮在开启和关闭时的外观。

要创建切换按钮状态：

在 Node Tree 中，选择 Toggle Button 2D 节点。在 State Tools 中，点击 Create State Manager。

Kanzi Studio 创建一个状态管理器并将其分配给 Toggle Button 2D 节点。
在 State Tools 中，双击 Create State 以创建两个状态。双击每个状态的名称并重命名这些状态。

例如，命名状态：
- On
- Off
On 状态定义了当切换按钮被打开时应用程序的状态，Off 状态定义了当切换按钮被关闭时的状态。
添加并定位切换按钮指示灯：
1. 在 Node Tree 中，按 Alt 并右键单击 Toggle Button 2D 节点，选择 Image 并将其命名为 Lock。在 Properties 中，将 Image 属性设置为 Lock 图像。
2. 在 Preview 中，在 Node tool 中，点击并选择 Render Transformation 作为目标转换。
  
  您可以通过以下方式应用变换：
  - 布局变换是在应用布局通道前对项进行变换。
  - 渲染变换是在应用布局通道后、渲染前对项进行变换。
  始终使用 Render Transformation，除非您知道必须重新计算布局。
3. 在 Preview 中选择 Node tool ，然后单击以禁用对节点和指南的捕捉。
  
  当您禁用捕捉功能时，您可以使用 Node tool 在 Preview 中移动节点，以便它不会捕捉到节点或参考线。
4. 使用 Node tool 将 Lock 节点放置在切换按钮的左侧。
  
  小技巧
  
  您可以在 Preview 的右上角调整 Preview 缩放级别。
5. 在 State Tools 中，在 On 状态下，点击以将切换按钮指示器的当前位置保存到该状态。
6. 在 Preview 中，使用 Node tool 将切换按钮指示器放置在切换按钮的右侧。
  
  小技巧
  
  当您拖动具有 Node tool 的节点时，按住 Shift 键以沿真正的水平或垂直线移动节点。
7. 在 Node Tree 中，选择 Lock 节点。在 Properties 中，将 Image 属性设置为 Unlock 图像。
  
  通过这种方式，您可以设置切换按钮指示器在切换按钮处于 Unlock 状态时的外观。
8. 在 State Tools 中，在 Off 状态下，单击以将切换按钮指示器的当前位置保存到该状态。
在 State Tools 中，点击 <No Controller Property> 下拉菜单并选择 Toggle Button > Toggle State 属性。

在状态管理器中，您选择为 Controller Property 的属性值定义了状态组中每个状态何时处于活动状态的条件。
在 State Tools 中，为每个状态设置控制器属性的值。
- 对于 On 状态，将值设置为 1。
- 对于 Off 状态，将值保持为 0。
在 State Tools 中，单击 Edit State Manager 以停用 State Tools。
在 Preview 中，单击以进入 Interact 模式。

在 Preview 中，当您单击切换按钮时，您将在 On 和 Off 状态之间切换，这些状态是在 Toggle Button 2D 节点的状态管理器中定义的。

微调切换按钮¶

在本节中，您将微调切换按钮以：

添加一个指示切换按钮状态的标签。
调整切换按钮状态之间的过渡。

要微调切换按钮：

添加一个标签以指示切换按钮的状态：
1. 在 Node Tree 中，按 Alt 并右键单击 Toggle Button 2D 节点，并选择 Text Block 2D。将 Text Block 2D 节点拖到 Lock 节点上方。
2. 在 Properties 中，添加并设置：
  - Font Size 到 30
  - Text 到 Unlock
3. 在 Node Tree 中，选择 Toggle Button 2D 节点。在 State Tools 中，点击 Edit State Manager。
4. 在 State Tools 中，单击 On 状态并定位切换按钮标签：
  1. 在 Preview 中，选择 Node tool ，右键单击 Text Block 2D 节点，然后选择 Select > Text Block 2D。
  2. 使用 Node tool 将 Text Block 2D 节点放置在切换按钮的右侧。
  3. 在 State Tools 中，在 On 状态下，点击。
5. 在 State Tools 中，单击 Off 状态并调整切换按钮标签：
  1. 在 Properties 中，将 Text 属性设置为 Lock。
  2. 在 Preview 中，将 Text Block 2D 放置在切换按钮的左侧。
  3. 在 State Tools 中，在 Off 状态下，点击。
在 State Tools 中，点击 Any -> Any 转换，并在 State Transition Settings 中设置：
- Duration 到 350
- Direction 到 Bidirectional
  
  通过这种方式，您可以在从任一状态过渡时应用过渡。
- Easing Function 到 Exponential
- Easing Mode 到 Easing out
单击 Save。

通过这种方式，您可以修改切换按钮在其状态之间过渡所需的时间以及过渡的外观。
在 State Tools 中，单击 Edit State Manager 以停用 State Tools。
在 Preview 中，单击以进入 Interact 模式。