使用 Button 节点

使用 Button 节点可通过点击、轻敲或按下键盘上的键来创建互动。

使用 Button 3D 创建 3D 按钮,使用 Button 2D 创建 2D 按钮。

Kanzi 允许您使用以下内容创建按钮:

  • 状态机 (State Managers)

  • 触发器和动作

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

当使用触发器和动作创建按钮且用户点击了按钮的可视呈现时,动作会生成一条消息并将其发送给按钮节点,您可以在按钮节点中定义消息的行为。

当您创建一个 Button 节点时,Kanzi Studio 默认情况下会向该节点添加一个 Button: Click 触发器。

Button 节点默认启用 Focusable 属性,并且可以接收焦点。当 Button 节点获得焦点时,要按下该按钮,您可以使用数字键盘上的默认键 Space、Enter 和 Enter。

请参阅 使用焦点。

您也可以向 Button 节点添加其他触发器。例如,您可以添加在用户按下鼠标按钮或取消点击时触发的消息。请参阅 使用触发器。

当您创建一个按钮时,它没有可视的形状。要使按钮可见,请在按钮中添加一个带有内容的节点。您还可以通过用画刷填充背景来使 Button 2D 节点可见。请参阅 调整 2D 节点的外观。

../../_images/button1.gif

Kanzi Factory Content 资源包包含一个可自定义的2D按钮。请参阅 Button。

要学习如何创建按钮,请完成 教程:创建一个按钮。

创建按钮

要创建按钮:

  1. 在 Prefabs 或 Node Tree 按 Alt 并右键单击 中,选择您要创建按钮的节点,并选择 Button 3D 或 Button 2D。

    您只能在 3D 节点中创建 3D 节点,例如 Scene 节点,并且只能在 2D 节点中创建 2D 节点。

    ../../_images/create-button-2d1.png
  2. 定义按钮的内容和外观。

    例如,如果您创建了一个 Button 2D 节点,请在其中添加一个显示按钮标签的 Text Block 2D 节点,并在 Button 2D 节点中设置 Layout Width、Layout Height 和 Background Brush 属性。请参阅 调整 2D 节点的外观。

    ../../_images/select-button1.png ../../_images/button-in-preview.png

    小技巧

    使用 Content Layout 节点创建包含多个内容节点的按钮布局。请参阅 使用 Content Layout 节点。

    ../../_images/navigation-button-in-preview-5.png
  3. 在 Prefabs 或 Node Tree 中选择 Button 节点,在 Node Components > Triggers 部分的 Button: Click 消息触发器 按 Alt 并右键单击 Actions 中,选择一个您希望在用户按下按钮时触发的操作。

    例如,选择 Write Log 操作并将其 Log Text 属性设置为 <Name>。在 Preview 中,当您单击按钮的可视化表示时,Write Log 操作将该节点的名称写入 Log 窗口。

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

    ../../_images/create-write-log-action.png ../../_images/set-write-log-text.png
  4. (可选) 使用 Kanzi 附带的 Button 触发器来定义 Button 节点的行为。请参阅 使用触发器 和 Button 节点触发器。

控制 Button 节点的行为

在 Kanzi 中,要控制 Button 节点的行为,您可以:

使用状态机设置按钮的状态

使用状态管理器来定义 Button 节点如何响应用户输入。例如,您可以设置按钮在用户按下或释放该按钮时的外观。您可以在 使用状态机 中查看如何使用状态管理器。要了解更多关于使用状态管理器创建按钮的信息,请参阅 教程:创建一个按钮。

要使用状态机设置按钮的状态:

  1. 在 Node Tree 中,选择您要为其创建状态的 Button 节点,并在 State Tools 中为该节点创建一个状态管理器。

    ../../_images/select-button1.png ../../_images/create-state-manager-for-button.png
  2. 创建两个状态,一个用于定义按钮处于默认状态时的状态,另一个用于定义按下按钮时的状态。

    例如,将状态命名为 Default 和 Pressed。

    ../../_images/create-two-states.png
  3. 对于每种状态,设置用于设置 Button 节点外观的属性值。

    例如,要设置用户按下 Button 2D 节点时的外观,请在该 Button 2D 节点的 Pressed 状态中设置:

    • 将 Background Brush 应用于您希望在按钮被按下时使用的画笔。

    • 将 Transform 2D > Render Transformation 属性 Translation 属性字段设置为比默认状态稍大的值。

    ../../_images/button-pressed-state-properties.png ../../_images/set-state-property-values.png
  4. 在控制 Button 状态的状态管理器的 State Tools 中,将 Controller Property 设置为 Is Down。

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

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

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

    ../../_images/select-is-down-controller-property.png
  5. 在 State Tools 中,将 Pressed 状态下 Controller Property 的值设置为 True。

    通过这种方式,您可以在按钮被按下时将应用程序设置为使用 Pressed 状态,在按钮未被按下时使用 Default 状态。

    ../../_images/set-is-down-values.png
  6. 在 State Tools 中,单击 Edit State Manager 以停用 State Tools。

    ../../_images/exit-state-tools1.png
  7. (可选) 要将 Kanzi 设置为在按钮状态之间立即过渡,请在 State Tools 中单击 Any -> Any 过渡,在 State Transition Settings 中将 Duration 属性设置为 0,然后单击 Save。

    ../../_images/open-state-transition-settings.png ../../_images/state-transition-duration-0.png

在 Preview 中,当您点击按钮时,按钮进入 Pressed 状态,其外观发生变化。只要您按住鼠标按钮,按钮就会保持在 Pressed 状态。当您释放鼠标按钮时,按钮返回到 Default 状态。

../../_images/button-press.gif

控制 Button 节点是否在使用中

要控制 Button 节点是否在使用中,请使用 Input > Enabled 属性。禁用的 Button 节点不会产生用户事件,例如按钮按下。

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

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

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

使用 Button 触发器

使用 Kanzi 附带的 Button 触发器来定义 Button 节点的行为。要了解有关使用触发器的更多信息,请参阅 使用触发器。

  • Cancel 触发器已激活:

    • 用户先按下按钮,然后将指针移到按钮区域之外,然后松开指针。

    • 当用户触发 Long Press 触发器时。

  • 当用户按下并释放按钮时,如果指针仍在按钮区域内,则 Button: Click 触发器被激活。

  • 当用户按下按钮时,Down 触发器被激活。

  • Enter 触发器已触发:

    • 用户按下按钮时。

    • 用户按下按钮,将指针移动到按钮区域之外,然后在按住指针的同时将指针移回到按钮区域。

  • Leave 触发器已关闭:

    • 用户按下按钮,然后提起指针时。

    • 用户按下按钮,然后将指针移到按钮区域之外时。

    • 当用户触发 Long Press 触发器时。

  • 当用户按下按钮并按住按钮的时间达到该按钮的 Hold Interval 属性中定义的毫秒数时,Long Press 触发器被激活。

为 Button 节点启用双击手势

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

要为 Button 节点启用双击手势:

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

    当您启用 Double-Click Enabled 属性时,Kanzi 在 Button 节点中安装一个可生成双击消息的多击操纵器。

    ../../_images/select-button1.png ../../_images/double-click-enabled1.png
  2. 在 Node Components 按 Alt 并右键单击 Triggers 中,选择 Message Trigger > Multi-Click > Multi-Click。

    ../../_images/add-multi-click-trigger.png
  3. 在 Node Components > Triggers 按 Alt 并右键单击 的 Multi-Click 触发器中,选择一个操作,并配置该操作。请参阅 使用触发器 和 操作和消息参考。

设置 Button 2D 节点的外观

要设置 2D 节点的外观:

在 API 中使用 Button 3D 节点

有关详细信息,请参阅 Button3D 类。

使用 API 中的 Button 2D 节点。

有关详细信息,请参阅 Button2D 类。

Button 属性类型和消息。

有关 Button 节点的可用属性类型和消息的列表,请参阅 Button 2D 和 Button 3D。

另请参阅

教程:创建一个按钮

使用 Toggle Button 节点

使用 Toggle Button Group 节点

按钮

使用状态机

使用触发器

处理用户输入

使用 Multi-Click Manipulator