使用 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 节点的外观。
Kanzi Factory Content 资源包包含一个可自定义的2D按钮。请参阅 Button。
要学习如何创建按钮,请完成 教程:创建一个按钮。
创建按钮¶
要创建按钮:
在 Prefabs 或 Node Tree 按 Alt 并右键单击 中,选择您要创建按钮的节点,并选择 Button 3D 或 Button 2D。
您只能在 3D 节点中创建 3D 节点,例如 Scene 节点,并且只能在 2D 节点中创建 2D 节点。
定义按钮的内容和外观。
例如,如果您创建了一个 Button 2D 节点,请在其中添加一个显示按钮标签的 Text Block 2D 节点,并在 Button 2D 节点中设置 Layout Width、Layout Height 和 Background Brush 属性。请参阅 调整 2D 节点的外观。
在 Prefabs 或 Node Tree 中选择 Button 节点,在 Node Components > Triggers 部分的 Button: Click 消息触发器 按 Alt 并右键单击 Actions 中,选择一个您希望在用户按下按钮时触发的操作。
例如,选择 Write Log 操作并将其 Log Text 属性设置为 <Name>。在 Preview 中,当您单击按钮的可视化表示时,Write Log 操作将该节点的名称写入 Log 窗口。
要了解有关 Write Log 操作的更多信息,请参阅 使用 Write Log 操作。
(可选) 使用 Kanzi 附带的 Button 触发器来定义 Button 节点的行为。请参阅 使用触发器 和 Button 节点触发器。
控制 Button 节点的行为¶
在 Kanzi 中,要控制 Button 节点的行为,您可以:
使用状态管理器定义 Button 节点如何响应用户输入。请参阅 使用状态机设置按钮的状态 和 控制 Button 节点是否在使用中。
使用 Kanzi 附带的 Button 触发器来定义 Button 节点的行为。请参阅 使用 Button 触发器。
启用用户双击或双击 Button 节点。请参阅 为 Button 节点启用双击手势。
使用状态机设置按钮的状态¶
使用状态管理器来定义 Button 节点如何响应用户输入。例如,您可以设置按钮在用户按下或释放该按钮时的外观。您可以在 使用状态机 中查看如何使用状态管理器。要了解更多关于使用状态管理器创建按钮的信息,请参阅 教程:创建一个按钮。
要使用状态机设置按钮的状态:
在 Node Tree 中,选择您要为其创建状态的 Button 节点,并在 State Tools 中为该节点创建一个状态管理器。
创建两个状态,一个用于定义按钮处于默认状态时的状态,另一个用于定义按下按钮时的状态。
例如,将状态命名为 Default 和 Pressed。
对于每种状态,设置用于设置 Button 节点外观的属性值。
例如,要设置用户按下 Button 2D 节点时的外观,请在该 Button 2D 节点的 Pressed 状态中设置:
将 Background Brush 应用于您希望在按钮被按下时使用的画笔。
将 Transform 2D > Render Transformation 属性 Translation 属性字段设置为比默认状态稍大的值。
在控制 Button 状态的状态管理器的 State Tools 中,将 Controller Property 设置为 Is Down。
在状态管理器中,您选择为 Controller Property 的属性值定义了状态组中每个状态何时处于活动状态的条件。
在这里,您使用 Is Down 属性根据该属性的值过渡到某个状态。
Is Down 属性控制 Button 节点是处于按下状态还是未按下状态。
在 State Tools 中,将 Pressed 状态下 Controller Property 的值设置为 True。
通过这种方式,您可以在按钮被按下时将应用程序设置为使用 Pressed 状态,在按钮未被按下时使用 Default 状态。
在 State Tools 中,单击 Edit State Manager 以停用 State Tools。
(可选) 要将 Kanzi 设置为在按钮状态之间立即过渡,请在 State Tools 中单击 Any -> Any 过渡,在 State Transition Settings 中将 Duration 属性设置为 0,然后单击 Save。
在 Preview 中,当您点击按钮时,按钮进入 Pressed 状态,其外观发生变化。只要您按住鼠标按钮,按钮就会保持在 Pressed 状态。当您释放鼠标按钮时,按钮返回到 Default 状态。
控制 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 节点启用双击手势:
在 Node Tree 或 Prefabs 中,选择您要为其启用双击手势的 Button 节点,并在 Properties 中添加并启用 Input > Double-Click Enabled 属性。
当您启用 Double-Click Enabled 属性时,Kanzi 在 Button 节点中安装一个可生成双击消息的多击操纵器。
在 Node Components 按 Alt 并右键单击 Triggers 中,选择 Message Trigger > Multi-Click > Multi-Click。
在 Node Components > Triggers 按 Alt 并右键单击 的 Multi-Click 触发器中,选择一个操作,并配置该操作。请参阅 使用触发器 和 操作和消息参考。
设置 Button 2D 节点的外观¶
要设置 2D 节点的外观:
您可以使用单色、纹理或材质填充 2D 节点。请参阅 调整 2D 节点的外观。
您可以将后期处理效果应用于2D节点。请参阅 2D 节点的效果。
您可以围绕所有三个轴旋转 2D 节点,以创建 3D 透视效果。请参阅 为2D节点创建3D透视效果。
您可以应用自定义渲染到 2D 节点,以创建后处理效果。请参阅 应用自定义渲染到 2D 节点。
您可以将2D节点渲染为像素完美。请参阅 渲染像素完美的2D节点。
在 API 中使用 Button 3D 节点¶
有关详细信息,请参阅 Button3D 类。
使用 API 中的 Button 2D 节点。¶
有关详细信息,请参阅 Button2D 类。