使用 Toggle Button 节点¶

使用 Toggle Button 节点可通过具有多个切换状态的按钮创建互动。

请参阅创建具有两个状态的切换按钮和创建具有两个以上状态的切换按钮。

使用 Toggle Button 3D 创建一个3D切换按钮，使用 Toggle Button 2D 创建一个2D切换按钮。在您创建 Toggle Button 节点后，向其添加节点以创建切换按钮的视觉表示。

当您创建一个 Toggle Button 时，Kanzi 默认情况下会将 Toggle Button: 触发器添加到该节点：

Toggle Button: Toggled On
Toggle Button: Toggled Off
Toggle Button: State Toggled

请参阅对切换更改做出反应。

Toggle Button 节点启用了 Focusable 属性，并且默认情况下可以接收焦点。当 Toggle Button 节点具有焦点时，要按下该按钮，您可以使用数字键盘上的默认键 Space、Enter 和 Enter。

请参阅使用焦点。

例如，要显示切换按钮打开和关闭状态之间的差异，您可以：

切换切换按钮可视呈现的材质或颜色。
附加切换按钮的两个不同的可视呈现，并切换它们的可见性。
附加切换按钮的两个不同的可视呈现，并通过动画化它们的 Blend Intensity 属性值在两者之间进行过渡。

要了解如何创建切换按钮，请完成切换按钮教程。请参阅教程：创建一个切换按钮。

创建具有两个状态的切换按钮¶

要创建具有两个状态的切换按钮：

在 Node Tree 按 Alt 并右键单击中，选择您要创建切换按钮的节点，并选择 Toggle Button 3D 或 Toggle Button 2D。

您只能在 3D 节点中创建 3D 节点，例如 Scene 节点，并且只能在 2D 节点中创建 2D 节点。
在 Node Tree 中选择 Toggle Button 节点，并在 State Tools 中单击 Create State Manager 以在 Toggle Button 节点中创建一个状态管理器。
在 State Tools 中，双击 Create State 以创建两个状态。双击每个状态的名称并重命名这些状态。

例如，将一个状态命名为 On，另一个命名为 Off。

On 状态定义了当切换按钮被打开时应用程序的状态，Off 状态定义了当切换按钮被关闭时的状态。
在 Node Tree 中为 Toggle Button 节点创建一个视觉形状，并设置其在 On 状态下的外观。

例如，如果您创建了一个 Toggle Button 2D 节点，请在该节点中添加一个 Image 节点，该节点表示切换按钮打开和关闭时显示的指示器。
将指示器放置在 Preview 中，并在 State Tools 中点击上方的 On 状态，以将当前外观保存到该状态。
重复上述两步，以便为切换按钮创建 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 中，当您单击切换按钮的可视化表示时，您可以在创建的状态之间切换，并且切换按钮的外观会发生变化。

创建具有两个以上状态的切换按钮¶

要创建具有两个以上状态的切换按钮：

在 Node Tree 按 Alt 并右键单击中，选择您要创建切换按钮的节点，并选择 Toggle Button 3D 或 Toggle Button 2D。

您只能在 3D 节点中创建 3D 节点，例如 Scene 节点，并且只能在 2D 节点中创建 2D 节点。
在 Node Tree 中选择 Toggle Button 节点，并在 Properties 中添加并设置 Toggle State Count 属性为您希望切换按钮具有的切换状态数量。

例如，要创建具有三个状态的切换按钮，请将 Toggle State Count 属性设置为 3。
在 Node Tree 中选择 Toggle Button 节点，并在 State Tools 中单击 Create State Manager 以在 Toggle Button 节点中创建一个状态管理器。
在 State Tools 中，单击任意次数以创建状态，双击每个状态的名称，并重命名这些状态。

例如，如果您正在创建一个具有三种状态的切换按钮，请将第一种状态命名为 First，第二种状态命名为 Second，第三种状态命名为 Third。每种状态定义了当切换按钮处于该状态时应用程序的状态。
在 Node Tree 中为 Toggle Button 节点创建一个视觉形状，并设置其在第一种状态下的外观。

例如，如果您创建了一个3D切换按钮，请添加一个 Text Block 3D 并将 Text 属性设置为 First。
在 State Tools 中，单击 First 状态上方的以将当前外观保存到该状态。
根据切换按钮中的状态数量重复前两个步骤。对于每个状态，为 Text 属性设置不同的值，并将该值保存到不同的状态。
在 State Tools 中，点击 <No Controller Property> 下拉菜单并选择 Toggle Button > Toggle State 属性。

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

例如，对于具有三个状态的切换按钮，将第一个状态的值设置为 0，第二个状态的值设置为 1，第三个状态的值设置为 2。
在 State Tools 中，单击 Edit State Manager 以停用 State Tools。
在 Preview 中，当您单击切换按钮的可视化表示时，您可以在创建的状态之间切换，并且切换按钮的外观会发生变化。

对切换更改做出反应¶

您可以使用 Toggle Button 触发器来响应用户切换切换按钮的操作。要了解有关使用触发器的更多信息，请参阅使用触发器。

当您创建一个 Toggle Button 节点时，Kanzi 默认情况下会将这些触发器添加到该节点：

名称 (Name)	描述 (Description)
State Toggled	当 Toggle Button 节点的切换状态发生变化时，State Toggled 触发器被激活。
Toggled Off	当具有两个状态的 Toggle Button 节点被关闭时，Toggled Off 触发器被触发。
Toggled On	当具有两个状态的 Toggle Button 节点被切换为开启时，Toggled On 触发器被触发。

要响应切换更改：

在 Prefabs 或 Node Tree 中选择您想要对其切换做出反应的 Toggle Button 节点。

例如，创建一个具有两种状态的切换按钮并选择该切换按钮。请参阅创建具有两个状态的切换按钮。
在 Node Components > Triggers 按 Alt 并右键单击的 Toggle Button 触发器中，选择您想要触发的操作，并配置该操作。

例如：在 Toggle Button: Toggled On 触发器中创建一个 Write Log 动作，并将 Log Text 设置为您希望在用户打开切换按钮时写入 Log 窗口的消息。

要了解有关 Write Log 操作的更多信息，请参阅使用 Write Log 操作。

使用绑定来更新切换状态¶

要使用绑定更新 Toggle Button 节点的切换状态，请使用到源或双向绑定。当您切换一个 Toggle Button 时，该 Toggle Button 会在内部覆盖任何以 Toggle State 属性为目标的单向绑定。请参阅绑定 (Bindings)。

例如，要使用到源绑定来更新切换状态：

创建一个 Toggle Button 节点，其切换状态您希望通过绑定进行更新。

例如：
1. 在 Node Tree 中，创建一个 Stack Layout 2D 节点。
2. 从 Asset Packages > Factory Content 中，将 Toggle Button 拖到 Node Tree 上，并将其放在 Stack Layout 2D 节点上。请参阅 Factory Content 资源。
创建一个控件，以绑定 Toggle Button 节点的切换状态。

例如：
1. 从 Asset Packages > Factory Content 中，将 Slider 拖到 Node Tree 上，并将其放在 Stack Layout 2D 节点上。在 Properties 中，添加并设置滑块的最低值和最高值。请参阅使用来自 Factory Content 的滑块。。
2. （可选） In the Stack Layout 2D node, create a Text Block 2D node that shows the slider value.
选择 Toggle Button 节点。在 Properties 中，点击 + Add Binding，并在 Binding Editor 中设置：
- Binding Mode 到 To source
- Push Target 到 .
- Property 到 Toggle Button > Toggle State
- Expression 到返回您要设置为切换状态的值的表达式。
  
  例如，设置为指向
```
{@../Slider/RangeConcept.Value} == 0 ? 0 : 1
```
  此绑定使用条件运算符来切换 Toggle Button：
  - 当 Slider 的值为零时关闭。
  - 当 Slider 的值不为零时开启。
  请参阅？（条件）。
小技巧

您可以右键单击某个属性并选择 Create Binding，开始为该属性创建绑定。

这样，您会自动将该属性添加到 Binding Editor 中。

现在，当在 Preview 中时，您：

将滑块调整为大于零的值，Kanzi 在切换按钮上切换。
将滑块调整为零，Kanzi 关闭切换按钮。
切换切换按钮，滑块会保持其值。

这使用户能够调整设置的值，并快速启用和禁用该设置。例如，您可以创建一个音量控制。

../../_images/preview-toggle-state-slider-control.gif

控制 Toggle Button 节点是否在使用中。¶

要控制 Toggle Button 节点是否在使用中，请使用 Input > Enabled 属性。禁用的 Toggle Button 节点不会产生用户事件，例如按钮按下。当您禁用 Toggle Button 节点时，Kanzi 会保留该 Toggle Button 节点的切换状态。

当您禁用节点的 Enabled 属性时，您实际上禁用了该节点及其在同一覆盖焦点范围内的子节点。

要观察节点是否有效启用，使用状态管理器或绑定中的 Input > Effectively Enabled 属性。例如，要向用户直观地指示节点是否正在使用，创建一个状态管理器并使用 Effectively Enabled 属性作为其控制器属性。

请参阅控制节点对输入的反应方式。

为 Toggle Button 节点启用双击手势¶

使用双击手势使用户能够在您的 Kanzi 应用程序中双击或双击切换按钮。使用 Multi-Click 触发器对双击手势做出反应。例如，当用户双击或双击该节点时，您可以更改 Toggle Button 节点的外观。

要为 Toggle Button 节点启用双击手势：

在 Node Tree 或 Prefabs 中，选择您要为其启用双击手势的 Toggle Button 节点，并在 Properties 中添加并启用 Input > Double-Click Enabled 属性。

当您启用 Double-Click Enabled 属性时，Kanzi 在 Toggle Button 节点中安装一个可生成双击消息的多击操纵器。
在 Node Components 按 Alt 并右键单击 Triggers 中，选择 Message Trigger > Multi-Click > Multi-Click。
在 Node Components > Triggers 按 Alt 并右键单击的 Multi-Click 触发器中，选择一个操作，并配置该操作。请参阅使用触发器和操作和消息参考。