使用焦点

关键焦点将硬件按键信息转发到应用程序中正确的用户界面元素。例如,用户可以按键盘上的箭头键来移动滑块,或按 Enter 键来点击按钮。

您可以设置应用程序中哪些用户界面元素可以接收焦点,并使用 Kanzi 用于导航焦点的默认键,或设置特定键。

Kanzi 在焦点链中包括所有焦点范围节点以及您启用 Focusable 属性的节点。

您在 Kanzi Studio 中创建的 List Box 节点和 List Box Item Container 预设件默认情况下是焦点范围。请参阅 在 List Box 节点中处理键焦点。。

对于这些节点,Focusable 属性默认情况下已启用:

  • Button

  • Toggle Button

  • Slider

  • Text Box

  • 您在 Kanzi Studio 中创建的 Scroll View 节点。

要在您的 Kanzi 应用程序中处理焦点,您可以:

通过完成教程学习如何使用焦点。请参阅 教程:为应用程序创建 UI 导航。

../../_images/ui-navigation-complete.gif

默认键盘导航键

这些是可用于在您的应用程序中移动焦点的默认键盘键:

  • 按下 Tab 键向前导航,按下 BackTab 键或 Shift Tab 键向后导航。

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

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

  • Slider 节点启用了 Focusable 属性,并且默认情况下可以接收焦点。当 Slider 节点具有焦点时,要移动该滑块的旋钮,您可以使用这些默认键盘键:

    • Home 将滑块旋钮移动到轨道的起始位置。

    • End 将滑块旋钮移动到轨道的末端。

    • ← 和 → 用于移动水平滑块的旋钮。

    • ↑ 和 ↓ 用于移动垂直滑块的旋钮。

    要使用箭头键盘键移动滑块旋钮,请在该 Slider 节点中使用 Step Value 属性设置每次按键时旋钮移动的量。

  • 您在 Kanzi Studio 中创建的 Scroll View 节点默认启用 Focusable 属性,并且可以接收焦点。当 Scroll View 节点具有焦点时,要滚动该节点,您可以使用默认的键盘键 ←、→、↑ 和 ↓。

  • 当 List Box 节点具有焦点时,您可以使用以下默认键盘按键在可聚焦的列表项之间导航:

    • 在沿 y 轴滚动的列表框中,使用 ↑ 和 ↓ 在可聚焦项之间移动焦点。

    • 在沿 x 轴滚动的列表框中,使用 → 和 ← 在可聚焦项之间移动焦点。

    • 使用 Home 将焦点移到第一个可聚焦项。

    • 使用 End 将焦点移到最后一个可聚焦项。

    • 在网格列表框节点中,使用 Page Up 和 Page Down 将焦点向后或向前移动一页。一页对应于网格列表框节点可见区域的大小。

    请参阅 在 List Box 节点中处理键焦点。。

  • Text Box 节点默认启用了 Focusable 属性,并且可以接收焦点。默认情况下,当 Text Box 节点获得焦点时,该 Text Box 节点处于编辑状态。

    当 Text Box 节点处于编辑状态时,您可以使用键盘键移动光标并修改文本选择。请参阅 使用 Text Box 节点。

要了解如何为焦点导航设置自定义键,请参阅 设置特定键以移动焦点。

设置焦点

当您希望用户使用按键与该节点所代表的用户界面元素进行交互时,将焦点设置到一个节点。

使用 Try Set Focus 操作设置焦点

要使用 Try Set Focus 操作设置焦点:

  1. 选择您要设置焦点的节点,并在 Properties 中添加并启用 Focus > Focusable 属性。

    这些节点启用了 Focusable 属性,并且默认情况下可以接收焦点:

    • 您使用 Kanzi Engine API 或 Kanzi Studio 创建的 Button、Toggle Button、Slider 和 Text Box 节点。

    • 使用 Kanzi Studio 创建的 Scroll View 节点。

    ../../_images/focusable-enabled.png
  2. 选择要用于设置焦点的节点,并在 Node Components 中创建一个触发器,用于触发设置焦点的操作。

    例如:在 Button 节点中使用 Button: Click 触发器。

    ../../_images/button-instance.png ../../_images/button-click-trigger1.png
  3. 在触发器中创建一个 Try Set Focus 操作。

    例如,通过在 Button: Click 触发器中创建一个 Try Set Focus 操作,您可以将应用程序设置为在用户单击 Button 节点时将焦点设置到某个节点。

    ../../_images/create-try-set-focus.png
  4. 在 Try Set Focus 操作中,将 Target Item 设置为您想要设置焦点的节点。

    小技巧

    别名提供了一种方便的方法来设置您想要聚焦的节点。请参阅 使用别名。

    ../../_images/try-set-focus-action.png

将焦点设置到用户按下的节点上。

要将焦点设置到用户按下的节点:

  1. 确保将您要设置焦点的节点能够接收焦点和按压。

    选择节点,并在 Properties 中添加并启用:

    • Focus > Focusable

      这些节点启用了 Focusable 属性,并且默认情况下可以接收焦点:

      • 您使用 Kanzi Engine API 或 Kanzi Studio 创建的 Button、Toggle Button、Slider 和 Text Box 节点。

      • 使用 Kanzi Studio 创建的 Scroll View 节点。

    • Input > Hit Testable

      通过为节点启用命中测试,您可以使节点接收按压。

      默认情况下,Button、Toggle Button、List Box Item Container、Scroll View、Slider 和 Text Box 节点启用了命中测试。

    ../../_images/album-in-prefabs.png ../../_images/focusable-and-hit-testable.png
  2. 在 Properties 中添加 Focus On Press 属性并将其设置为:

    • Node 尝试将焦点设置到节点,如果失败,则不执行任何操作。

    • Node or ancestor 尝试将焦点设置到节点上,如果失败,则将焦点设置到该节点最近的可聚焦祖先。

    • Node or overlay 尝试将焦点设置到节点上,如果失败,则将焦点设置到包含该节点的覆盖范围。然后,覆盖范围节点根据其设置转发焦点。

      每个 Kanzi 应用程序至少包含一个覆盖范围,即 Screen 节点。

    小技巧

    一个节点从其父节点继承 Focus On Press 属性的值。例如,要将应用程序屏幕中的所有交互节点设置为在按下时接收焦点,只需在该应用程序屏幕的根节点中设置 Focus On Press 属性。

    ../../_images/focus-on-press-property.png

在 Preview 中,单击您设置 Focus On Press 属性的节点。例如,如果您在预设中设置了该属性,请多次实例化该预设并单击这些实例。

小技巧

使用状态管理器或绑定在用户界面元素获得焦点时更改其外观。请参阅 表明用户界面元素何时具有焦点。

../../_images/focus-on-press.gif

在焦点链中移动焦点

焦点链是定义 Kanzi 将焦点设置到这些节点的顺序的节点序列。Kanzi 在焦点链中包含项目中启用了 Focusable 属性的所有节点。

这些节点启用了 Focusable 属性,并且默认情况下可以接收焦点:

  • 您使用 Kanzi Engine API 或 Kanzi Studio 创建的 Button、Toggle Button、Slider 和 Text Box 节点。

  • 使用 Kanzi Studio 创建的 Scroll View 节点。

默认情况下,焦点链根据节点在节点树中的顺序从每个节点移动焦点:

  • 当用户按下 Tab 键以向前导航时,到焦点范围内的下一个可聚焦节点。

  • 当用户通过按下 BackTab 键或 Shift Tab 键以向后导航时,到焦点范围中的上一个可聚焦节点。

备注

在默认焦点链顺序中,在 Viewport 2D 节点中,第一个子节点始终是 Scene 节点。

要控制焦点链如何移动焦点,您可以为每个可聚焦节点设置其在焦点链中的位置。请参阅 设置节点在焦点链中的顺序。

设置焦点链中节点的顺序

要手动设置节点在焦点链中的顺序,请在 Node Tree 中选择要设置其焦点链位置的每个可聚焦节点,然后在 Properties 中添加并设置 Focus Order 属性。

您根据它们的 Focus Order 属性值设置焦点在节点之间移动:

  • 在用户向前导航时按升序排列。

    例如,当 Focus Order 属性设置为 1 的节点获得焦点且用户按下 Tab 键时,焦点将移动到 Focus Order 属性设置为 2 的节点。

  • 在用户向后导航时按降序排列。

../../_images/add-focus-order-property.png ../../_images/focus-order-property.png

在一组节点中移动焦点

使用焦点组处理在构成用户界面元素的节点之间的导航。

您可以将一个节点设置为焦点组,以便将焦点从该节点转发到子节点。当您将焦点设置到一个焦点组时,Kanzi 会将焦点转发到该组中具有最小 Focus Order 属性值或在节点树中最先定位的可聚焦子节点。当您从焦点组节点移动焦点时,该焦点组会记住其最后聚焦的节点。这样,当该焦点组再次接收到焦点时,Kanzi 会将焦点设置到最后聚焦的节点。

要设置焦点组:

  1. 在 Node Tree 中选择您要设置为焦点组的节点,在 Properties 中添加 Focus Scope > Focus Scope Type 属性,并将其设置为 Group。

    当您将焦点设置到焦点组节点时,该焦点组会将焦点转发到第一个可聚焦的子节点。例如,如果您将一个 Toggle Button Group 节点设置为焦点组,默认情况下,该 Toggle Button Group 中的第一个 Toggle Button 节点会接收焦点。您可以使用 Tab 和 BackTab 或 Shift Tab 键盘键在 Toggle Button 节点之间移动焦点。

    您在 Kanzi Studio 中创建的 List Box 节点是焦点范围,默认情况下处理键焦点和键输入。请参阅 在 List Box 节点中处理键焦点。。

    这些节点启用了 Focusable 属性,并且默认情况下可以接收焦点:

    • 您使用 Kanzi Engine API 或 Kanzi Studio 创建的 Button、Toggle Button、Slider 和 Text Box 节点。

    • 使用 Kanzi Studio 创建的 Scroll View 节点。

    小技巧

    使用状态管理器或绑定在用户界面元素获得焦点时更改其外观。请参阅 表明用户界面元素何时具有焦点。

    ../../_images/select-toggle-button-group.png ../../_images/focus-scope-enabled.png ../../_images/focus-group-tab.gif
  2. (可选) To make the focus move in the focus group cyclically, in the Properties add and enable the Focus Scope > Cyclic Focus Navigation property.

    当您启用 Cyclic Focus Navigation 属性时:

    • 当用户通过按下 Tab 键向前导航,并且焦点到达焦点组的最后一个可聚焦节点时,焦点将移回到第一个可聚焦节点。

    • 当用户通过按下 BackTab 或 Shift Tab 键向后导航,并且焦点到达焦点组的第一个可聚焦节点时,焦点将移回到最后一个可聚焦节点。

    ../../_images/add-cyclic-focus-navigation.png ../../_images/cyclic-focus-navigation-enabled.png ../../_images/focus-group-cyclic-navigation.gif
  3. (可选) 要手动设置焦点组中哪个节点首先获得焦点,在 Node Tree 中选择您想要设置焦点的焦点范围节点的子节点,在 Properties 中添加 Focus > Focus Order 属性,并将其设置为 1。

    当焦点首次移动到焦点组节点时,具有最小 Focus Order 属性值的子节点将获得焦点。如果焦点组节点有多个子节点具有相同的最小 Focus Order 属性值,Kanzi 将焦点设置到焦点范围的节点树中的第一个子节点。

    当焦点从焦点组移开时,焦点组会记住其最后聚焦的节点。当该焦点组再次获得焦点时,Kanzi 将焦点设置到最后聚焦的节点,而不是具有最小 Focus Order 属性值的节点。

    ../../_images/lights-node-selected.png ../../_images/focus-order-property.png ../../_images/lights-button-focused.png

创建叠加层

您可以创建一个覆盖层,该覆盖层会在应用程序的其他部分之上打开。例如,您可以创建对话框、通知和菜单作为覆盖层。

使用 Activity 创建一个覆盖层

在 Kanzi 中创建叠加层的最方便方法是使用 Activity。Kanzi 会根据 Activity 的活动状态自动处理叠加层的按键和触摸输入。

  • 当您激活活动时,覆盖层会打开并获得焦点。

  • 当您停用该 Activity 时,覆盖层会关闭并失去焦点。

请参阅 活动。

使用 Activity 创建覆盖:

  1. 在 Parallel Activity Host 中创建您想要显示为叠加层的 Activity。

    例如,创建一个显示设置项子菜单的 Activity。

    小技巧

    使用状态管理器或绑定在用户界面元素获得焦点时更改其外观。请参阅 表明用户界面元素何时具有焦点。

    ../../_images/overlay-submenu-initial.gif
  2. 在 Prefabs 中选择您想要显示为叠加层的 Activity 预设,在 Properties 中添加 Focus Scope > Focus Scope Type 属性,并将其设置为:

    • Modal 用于创建一个覆盖层,以阻止来自覆盖层外部的输入。

      例如,使用此覆盖类型创建一个对话框,用户必须与之交互后才能返回到主应用程序屏幕。

    • Modeless 用于创建一个覆盖层,该覆盖层传播来自覆盖层外部的输入。

      例如,使用此覆盖类型创建一个弹出窗口,使用户在弹出窗口可见时可以与应用程序的其他部分进行交互。

    • Auto-Closing Modal 创建一个在触摸输入到覆盖层外部时关闭的覆盖层。

      例如,使用此覆盖类型创建一个通知,当用户点击该通知之外的应用程序屏幕时关闭。

    • Auto-Closing Modeless 用于创建覆盖层,该覆盖层在触摸输入位于覆盖层外部时关闭并传播输入。

      例如,使用此覆盖类型创建一个菜单,当用户在其外部点击时关闭。如果用户通过触摸交互元素关闭菜单,则该元素接收触摸。

    ../../_images/submenu-in-prefabs.png ../../_images/set-focus-scope-type.png
  3. 要打开叠加层,请激活 Activity。请参阅 激活活动。

    当您激活设置为覆盖的活动时,Kanzi 会将焦点设置到该活动。

    例如:要在用户按下按钮时打开覆盖层,在 Prefabs 中选择一个 Button 节点,在 Button: Click 触发器中创建一个 Activity Host: Activate Activity 动作,并在该动作中设置:

    • 将 Target Item 到包含您要激活的 Activity 的 Activity Host。

    • Activation Path 到您要激活的 Activity 的 Activity Host 的路径。

      如果您将 Activity 节点嵌套在其他类型的节点中,请在路径中仅包含祖先 Activity 节点。

    ../../_images/settings-in-prefabs.png ../../_images/add-activate-activity-action.png ../../_images/activate-activity-submenu.png
  4. 要关闭覆盖层,请停用 Activity。

    当您停用设置为覆盖的活动时,Kanzi 会从该活动中移除焦点,并将焦点恢复到您停用的覆盖下方的覆盖焦点范围。

    如果将 Focus Scope Type 属性设置为 Auto-Closing Modal 或 Auto-Closing Modeless,用户也可以通过点击覆盖层外部来关闭覆盖层。

    例如,要在用户按下特定键时关闭覆盖层:

    1. 在 Prefabs 中,选择您设置为覆盖的 Activity,在 Node Components > Input Manipulators 中创建一个 Key Manipulator,并将 Logical Key 属性设置为您想要用来关闭覆盖的键盘按键。

      例如,要在用户按下 Escape 键时关闭覆盖层,请将 Logical Key 属性设置为 Escape。

      小技巧

      要设置用户可以用来在您的应用程序中导航到不同方向的键,请使用 Navigation Manipulator。请参阅 使用 Navigation Manipulator。

      ../../_images/submenu-in-prefabs.png ../../_images/select-key-manipulator.png ../../_images/key-manipulator-escape.png
    2. 在 Node Components > Triggers 中创建一个带有 Activity Host: Deactivate Activity 操作的 Key Input: Key Pressed 触发器,并在该操作中设置:

      • 将 Target Item 到包含您要停用的 Activity 的 Activity Host。

      • Activation Path 到您要停用的 Activity Host 到 Activity 的路径。

      ../../_images/create-deactivate-activity-action.png ../../_images/deactivate-activity-submenu.png
  5. (可选) 如果将 Activity 的 Focus Scope Type 属性设置为 Auto-Closing Modal 或 Auto-Closing Modeless,确保将命中测试启用为 Activity 或其内容。这样,您可以启用 Kanzi 来检测触摸输入是来自覆盖 Activity 区域还是来自覆盖之外,并在输入来自覆盖之外时关闭覆盖。

    要为叠加层启用命中测试,在 Prefabs 中选择您设置为叠加层的 Activity,并在 Properties 中添加并启用 Input > Hit Testable 属性。

    ../../_images/submenu-in-prefabs.png ../../_images/overlay-activity-hit-testable-enabled.png
  6. (可选) 要在覆盖再次打开时将焦点设置到覆盖中的第一个可聚焦节点,在 Prefabs 中选择您设置为覆盖的 Activity,并在 Properties 中禁用 Activity > Save Last Focused Node 属性。

    默认情况下,Kanzi 会记住活动中最后聚焦的节点,并在您再次激活该活动时将焦点设置到该节点。

    ../../_images/submenu-in-prefabs.png ../../_images/save-last-focused-node-disabled.png

    在 Preview 中,您现在可以:

    • 当您将其设置为打开该覆盖层的控件的按钮获得焦点并在键盘上按下 Enter 键时,打开覆盖层。

    • 按下键盘上的 Escape 键关闭覆盖层。

      如果将 Focus Scope Type 属性设置为 Auto-Closing Modal 或 Auto-Closing Modeless,您还可以通过单击覆盖层外的任意位置来关闭覆盖层。当您通过单击该覆盖层外的交互式用户界面元素来关闭自动关闭的无模式覆盖层时,Kanzi 会将该单击传播到您单击的元素。

    ../../_images/overlay.gif

使用任何节点创建一个覆盖层

在 Kanzi 中创建叠加层的最方便方法是使用 Activity。请参阅 使用 Activity 创建一个覆盖层。

本节介绍如何使用不是 Activity 的节点创建一个覆盖层,这需要您创建触发器和动作来显示和隐藏覆盖层。

要使用任何节点创建覆盖:

  1. 在 Node Tree 中创建您想要显示为叠加层的节点,并向其添加内容。

    例如,创建一个显示设置项子菜单的节点。

    小技巧

    使用状态管理器或绑定在用户界面元素获得焦点时更改其外观。请参阅 表明用户界面元素何时具有焦点。

    ../../_images/select-overlay.png ../../_images/submenu-initial-preview.png
  2. 在 Node Tree 中选择您想要显示为叠加层的节点,在 Properties 中添加 Focus Scope > Focus Scope Type 属性,并将其设置为:

    • Modal 用于创建一个覆盖层,以阻止来自覆盖层外部的输入。

      例如,使用此覆盖类型创建一个对话框,用户必须与之交互后才能返回到主应用程序屏幕。

    • Modeless 用于创建一个覆盖层,该覆盖层传播来自覆盖层外部的输入。

      例如,使用此覆盖类型创建一个弹出窗口,使用户在弹出窗口可见时可以与应用程序的其他部分进行交互。

    • Auto-Closing Modal 创建一个在触摸输入到覆盖层外部时关闭的覆盖层。

      例如,使用此覆盖类型创建一个通知,当用户点击该通知之外的应用程序屏幕时关闭。

    • Auto-Closing Modeless 用于创建覆盖层,该覆盖层在触摸输入位于覆盖层外部时关闭并传播输入。

      例如,使用此覆盖类型创建一个菜单,当用户在其外部点击时关闭。如果用户通过触摸交互元素关闭菜单,则该元素接收触摸。

    ../../_images/select-overlay.png ../../_images/set-focus-scope-type.png
  3. 在 Properties 中添加并禁用 Node > Visible 属性。

    您可以这样在应用程序启动时隐藏覆盖层。

    当您将节点设置为覆盖焦点范围且该节点不可见时,焦点和输入处理将忽略该节点。

    ../../_images/node-visible-disabled.png
  4. 创建一个控件以打开覆盖层。

    在 Node Tree 中,选择您要用作打开叠加层控件的节点,并在 Node Components 中使用带有 Set Property 操作的触发器,使叠加层可见。

    当您使叠加层可见时,Kanzi 会触发 Overlay Brought To Front 触发器,并将焦点设置到该叠加层。

    例如:选择一个 Button 节点,在 Button: Click 触发器中创建一个 Set Property 动作,并在该动作中设置:

    • 将 Target Item 到叠加节点。

    • Target Property 到 Visible (Node.Visible)

    • Value From 到 Fixed value

    • 将 Fixed Value 设置为 enabled。

    ../../_images/select-settings-node.png ../../_images/set-property-overlay-visible-true.png
  5. 创建一个控件以关闭覆盖层。

    在 Node Tree 中,选择您想用作关闭覆盖层控件的节点,并在 Node Components 中使用带有 Set Property 动作的触发器,使覆盖层不可见。

    当您隐藏一个覆盖层时,Kanzi 会触发 Overlay Sent To Back 触发器,并将焦点设置到您使覆盖层可见之前具有焦点的节点。

    例如:

    1. 选择叠加节点,在 Node Components > Input Manipulators 中创建一个 Key Manipulator,并将 Logical Key 属性设置为您想要用于关闭叠加的键盘按键。

      例如,要在用户按下 Escape 键时关闭覆盖层,请将 Logical Key 属性设置为 Escape。

      ../../_images/select-overlay-hidden.png ../../_images/select-key-manipulator.png ../../_images/key-manipulator-escape.png
    2. 在 Node Components > Triggers 中创建一个带有 Set Property 动作的 Key Input: Key Pressed 触发器,并在该动作中设置:

      • 将 Target Item 到叠加节点。

      • Target Property 到 Visible (Node.Visible)

      • Value From 到 Fixed value

      • Fixed Value 禁用

      ../../_images/select-overlay-hidden.png ../../_images/set-property-overlay-visible-false.png
  6. (可选) 在覆盖层打开时,将焦点设置到覆盖层中的特定节点。

    默认情况下,Kanzi 会记住覆盖中的最后一个聚焦节点,并在覆盖再次打开时将焦点设置到该节点。

    要始终将焦点设置到叠加层中的特定节点:

    1. 在 Node Tree 中选择叠加节点,并在 Node Components 中创建一个 Focus: Overlay Brought To Front 触发器。

      ../../_images/select-overlay-hidden.png ../../_images/create-overlay-brought-to-front.png
    2. 在 Focus: Overlay Brought To Front 触发器中创建一个 Try Set Focus 动作,并将 Target Item 设置为覆盖中您希望在覆盖打开时设置焦点的节点。

      例如,将 Target Item 设置为覆盖中的第一个可聚焦节点。

      ../../_images/create-overlay-try-set-focus.png ../../_images/try-set-focus-target-item.png
  7. (可选) 如果将覆盖节点的 Focus Scope Type 属性设置为 Auto-Closing Modal 或 Auto-Closing Modeless,请设置覆盖以在覆盖外部使用触摸输入关闭:

    1. 在 Node Tree 中选择叠加节点,并在 Properties 中添加并启用 Input > Hit Testable 属性。

      通过这种方式,您可以使 Kanzi 检测触摸输入是来自覆盖节点区域还是来自覆盖外部。

      ../../_images/select-overlay-hidden.png ../../_images/overlay-hit-testable.png
    2. 在 Node Components > Triggers 中创建一个 Focus: Input Outside Overlay 触发器。

      Kanzi 在用户点击覆盖节点外的应用程序区域时触发 Focus: Input Outside Overlay。

      ../../_images/create-input-outside-overlay.png
    3. 在 Focus: Input Outside Overlay 触发器中创建一个 Set Property 操作并设置:

      • Target Property 到 Visible (Node.Visible)

      • Value From 到 Fixed value

      • Fixed Value 禁用

      这样,当用户在其外部点击时,您可以隐藏覆盖节点。

      ../../_images/input-outside-overlay-set-property.png

    在 Preview 中,您现在可以:

    • 当您将其设置为打开该覆盖层的控件的按钮获得焦点并在键盘上按下 Enter 键时,打开覆盖层。

    • 按下键盘上的 Escape 键关闭覆盖层。

      如果将 Focus Scope Type 属性设置为 Auto-Closing Modal 或 Auto-Closing Modeless,您还可以通过单击覆盖层外的任意位置来关闭覆盖层。当您通过单击该覆盖层外的交互式用户界面元素来关闭自动关闭的无模式覆盖层时,Kanzi 会将该单击传播到您单击的元素。

    ../../_images/overlay.gif

表明用户界面元素何时具有焦点

您可以设置用户界面元素,以便当该元素或其任何子元素获得焦点时更改外观。例如,您可以在滑块获得焦点时更改滑块控件的颜色,或者在其中一个控件获得焦点时突出显示一组 UI 控件。

您可以使用这些 Focus 属性来观察用户界面元素是否具有焦点:

  • Focused 布尔属性报告节点是否为关键焦点节点并接收键输入。

  • Focus State 枚举属性报告焦点范围内一个或多个节点的焦点状态,并可以具有以下值:

    枚举值

    枚举键

    可聚焦节点的含义

    焦点范围的含义

    No Focus

    0

    该节点没有焦点。

    焦点范围内的节点都没有获得焦点。

    Logical Focus

    1

    该节点是覆盖类型焦点范围的逻辑焦点节点。逻辑焦点节点是在覆盖失去焦点之前的关键焦点节点。当覆盖重新获得焦点时,逻辑焦点节点成为关键焦点节点。

    焦点范围中的节点是该范围所属叠加层的逻辑焦点节点。

    Key Focus

    2

    该节点是应用程序的键焦点节点。

    焦点范围中的节点是应用程序的键焦点节点。

要直观地向用户指示用户界面元素是否具有焦点,可以:

使用状态管理器显示用户界面元素何时具有焦点

使用状态管理器在用户界面元素获得焦点时显示是很方便的,当您想更改多个属性的值以在视觉上指示焦点时。使用状态管理器,您还可以为外观的变化添加动画效果。

在此示例中,使用 Focus > Focus State 属性作为状态管理器中的控制器属性,以在滑块具有键焦点时更改滑块及其标签的外观。

要使用状态机显示用户界面元素何时具有焦点:

  1. 选择您要为其创建焦点可视化的用户界面元素。

    例如,创建一个包含 Slider 和 Text Block 节点的预设,以显示滑块标签。

    小技巧

    Kanzi Factory Content 包含一个您可以使用的2D滑块。请参阅 使用来自 Factory Content 的滑块。。

    ../../_images/asset-packages-fc-slider.png
    ../../_images/slider-control-in-prefabs.png
  2. 在 Properties 中,添加 Focus Scope > Focus Scope Type 属性并将其设置为 Group。

    通过这种方式,您可以将节点设为焦点范围。您可以使用 Focus State 属性来检查焦点范围内节点的焦点状态。

    ../../_images/slider-control-focus-group.png
  3. 在 State Tools 中,创建一个状态管理器,包含两个状态:一个定义当其节点都没有焦点时用户界面元素的外观,另一个定义当其某个节点是关键焦点节点时用户界面元素的外观。

    例如,将状态命名为 NoFocus 和 KeyFocus。

    ../../_images/slider-control-focus-states.png
  4. 在您为其创建焦点可视化的用户界面元素中,选择每个您想要更改外观的节点,并设置当用户界面元素中的节点具有键焦点时您想要更改的属性值。

    例如,当滑块具有焦点时,更改滑块标签和滑块的颜色。

    ../../_images/label-focus-state-properties.png ../../_images/slider-focus-state-properties.png
  5. 在 State Tools 中,单击状态下方的 set-state,该状态定义了当用户界面元素中的节点具有键盘焦点时用户界面元素的外观。这样,您可以将当前属性值保存到该状态。

    例如,单击 set-state 在 KeyFocus 状态下。

    ../../_images/set-focus-state.png
  6. 在 State Tools 中,将 Controller Property 设置为 Focus > Focus State。

    Focus State 属性报告焦点范围的焦点状态。当焦点范围中的节点具有键焦点时,该属性的值为 Key Focus。

    ../../_images/set-focus-state-controller-property.png
  7. 在 State Tools 中,将 KeyFocus 状态下控制器属性的值设置为 Key Focus。保持 NoFocus 状态下控制器属性的值为 No Focus。

    通过这种方式,您可以将应用程序设置为使用:

    • 当用户界面元素中的所有节点都没有焦点时的 NoFocus 状态。

    • 当用户界面元素中的节点具有键盘焦点时的 KeyFocus 状态。

    ../../_images/controller-property-keyboard-focus.png
  8. 在 State Tools 中,单击 Edit State Manager 以停用 State Tools。

    ../../_images/deactivate-state-tools1.png

当您将焦点设置为您创建的滑块控件预设中的滑块时,滑块和滑块标签的外观会发生变化。

../../_images/contains-focus-state-manager.gif

使用绑定来显示当用户界面元素具有焦点时

使用绑定来显示用户界面元素具有焦点是很方便的,当您只想更改一个属性的值以在视觉上指示焦点时。

当您使用绑定来显示用户界面元素获得焦点时,更改会立即发生,而没有过渡动画。

要使用绑定来显示当用户界面元素具有焦点时:

  1. 选择您要为其创建焦点可视化的节点。

    例如,选择一个节点,该节点是一个焦点范围,并且当该焦点范围中的节点具有键焦点时,您希望更改其背景颜色。

    ../../_images/mirrors-in-prefabs.png ../../_images/mirrors-focus-group.png
  2. 在 Properties 中,点击 + Add Binding,并在 Binding Editor 中设置:

    • 当节点或其子孙节点具有焦点时,Property 到您想要更改其值的属性。

      例如,将其设为 Background Brush。

    • Expression 根据焦点状态将 Property 设置为不同的值。

      您可以使用:

      • Focused (Node::FocusedProperty) 布尔属性用于确定节点是否具有键焦点。

      • Focus State (Node::FocusStateProperty) 枚举属性用于查找节点或焦点范围内节点的焦点状态。

        Focus State 属性可以具有以下值:

        枚举值

        枚举键

        可聚焦节点的含义

        焦点范围的含义

        No Focus

        0

        该节点没有焦点。

        焦点范围内的节点都没有获得焦点。

        Logical Focus

        1

        该节点是覆盖类型焦点范围的逻辑焦点节点。逻辑焦点节点是在覆盖失去焦点之前的关键焦点节点。当覆盖重新获得焦点时,逻辑焦点节点成为关键焦点节点。

        焦点范围中的节点是该范围所属叠加层的逻辑焦点节点。

        Key Focus

        2

        该节点是应用程序的键焦点节点。

        焦点范围中的节点是应用程序的键焦点节点。

      例如,要在焦点范围节点中设置画笔,当该焦点范围中的一个节点具有键焦点时:

      ({@./Node.FocusState} == 2) ? acquire("Medium Gray Color Brush") : acquire("NullBrush")
      

      请参阅 ?(条件) 和 获取。

    单击 Save。

    ../../_images/focus-state-binding.png

例如,当您将绑定添加到包含 UI 控件的焦点组节点时,当任何这些 UI 控件具有键焦点时,该节点的背景画刷会发生变化。

../../_images/contains-focus-binding.gif

控制是否将焦点设置到激活的 Activity。

您可以控制在活动激活时是否将键焦点设置到该活动。

默认情况下,Kanzi 仅在该活动的活动主机具有焦点时,尝试将焦点设置到激活的活动。这意味着当没有应用程序焦点时,Kanzi 默认情况下不会将焦点设置到激活的活动。

使用这些属性来控制是否将焦点设置到激活的 Activity:

  • 在 Exclusive Activity Host 中的 Focus On Activating Activity 属性。

    此属性的值适用于您在其中设置此属性的独占活动主机中的所有活动。

  • 在 Parallel Activity Host 中的 Activity 中 Focus On Activation 属性。

    此属性的值适用于您在其中设置此属性的 Activity。

可用的选项有:

  • When Host Has Focus 尝试将键焦点设置为激活的 Activity,如果 Activity Host 拥有焦点。

    这是默认值。

  • Always 尝试将键焦点设置为激活的 Activity。

    例如,使用此选项确保将 Kanzi 在应用程序启动时设置为一个 Activity。

    此选项不保证焦点移动到激活的 Activity。例如,如果在激活的 Activity 前有一个模态覆盖,Kanzi 无法将焦点设置到该 Activity。模态覆盖会阻止来自其边界外的键输入。请参阅 使用 Activity 创建一个覆盖层。

  • Never 不会尝试将键焦点设置到激活的 Activity。

    例如,使用此方法进行非紧急通知,该通知不需要用户交互,确保将通知不会在用户与应用程序中其他元素交互时打断用户。

../../_images/focus-on-activating-activity.png ../../_images/focus-on-activation.png

设置特定键以移动焦点

当为您的应用程序创建键导航时,您可以使用:

  • Key Manipulator 用于设置用户可以用来导航应用程序的按键。您可以覆盖默认的焦点导航按键,并使用特定按键来设置焦点到某个节点、打开或关闭覆盖层,或在焦点链中移动焦点。请参阅 使用 Key Manipulator。

  • Navigation Manipulator 设置用户可以用来在您的应用程序中导航到不同方向的按键。请参阅 使用 Navigation Manipulator。

在 API 中使用焦点

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

另请参阅

焦点

教程:为应用程序创建 UI 导航

使用 Key Manipulator

使用 Navigation Manipulator

活动

使用状态机

触发器参考

操作和消息参考