Compose 中的焦点

当用户与您的应用程序交互时,他们通常通过触摸屏幕上的元素进行交互。但是,这不是唯一的交互形式。其他交互形式可能包括以下内容

  • ChromeOS 用户可能会使用物理键盘上的箭头键来导航屏幕。
  • 玩游戏的人可以使用连接的游戏控制器来浏览游戏的菜单。
  • 移动应用程序用户可以使用屏幕键盘循环浏览元素。

在这些情况下,跟踪哪个组件在任何给定时间处于活动状态非常重要,这就是我们所说的焦点。屏幕上的元素应该按照逻辑顺序获得焦点。Jetpack Compose 有一种默认的方式来处理焦点,这种方式在大多数情况下都是正确的。但是,在某些情况下,您可能需要修改这种默认行为。

以下页面介绍如何在您的应用程序中使用焦点。

  • 更改焦点遍历顺序:解释如何更改默认焦点顺序,添加焦点组,以及禁用可组合项的焦点。
  • 更改焦点行为:描述如何请求、捕获和释放焦点,以及如何在进入屏幕时重定向焦点。
  • 对焦点做出反应:解释如何对焦点更改做出反应,向元素添加视觉提示,以及了解元素的焦点状态。

默认焦点遍历顺序

在我们深入探讨焦点搜索的默认行为之前,了解层次结构中的级别概念很重要:一般来说,我们可以说两个Composables在同一级别,当它们是兄弟节点时,这意味着它们具有相同的父节点。例如,Column内的元素处于同一级别。向上提升一级意味着从子节点到其Composable父节点,或者,以相同的示例为例,从项目返回到包含它的Column。向下提升一级则是相反的方式,从Column父节点到包含的项目。这个概念可以应用于所有可以包含其他ComposablesComposable

UI 导航可以通过多种方式进行,其中一些方式大多数用户已经熟悉。

  • TAB 键:一维导航,前进后退。TAB 导航将焦点推进到层次结构中的下一个或上一个元素。默认情况下,Compose 遵循Composables的声明。可以通过键盘上的tab 键或手表上的旋转表圈来实现单向导航,这种焦点搜索将访问屏幕上的每个元素。
  • 箭头键:二维导航,左、右、上。二维导航可以通过电视上的方向键或键盘上的箭头键来实现,其遍历顺序只访问给定级别上的元素。您可以使用方向键中心键和后退键向下和向上回到不同的级别。

以下面的屏幕截图为例,您有四个按钮,一个在另一个下方,并且您想按出现的顺序循环遍历它们。Jetpack Compose 开箱即用地提供这种行为:该工具包允许您使用tab 键从上到下按垂直顺序循环遍历每个可组合项,或者通过按箭头移动焦点。

Screenshot of a list of buttons placed vertically one below the other in a small form factor.
图 1. 在小型外形尺寸中显示的按钮列表

当您切换到不同类型的布局时,事情会发生一些变化。如果您的布局有多于一列,如以下布局,Jetpack Compose 允许您在它们之间导航,而无需添加任何代码。如果您按下tab 键,Jetpack Compose 会自动按声明顺序突出显示项目,从第一项到第四项。使用键盘上的箭头键使选择在 2D 空间中按所需方向进行。

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}

这些Composables是在两个Rows中声明的,并且焦点元素按顺序声明,从第一项到第四项。当您按下tab 键时,这将产生以下焦点顺序。

Screenshot of a list of buttons placed in two columns side by side in a bigger form factor.
图 2. 在较大的外形尺寸中,按钮列表并排放置在两列中

在下面的代码片段中,您在Columns中声明项目,而不是在Rows中声明。

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}

此布局从屏幕的开始到结束,从上到下垂直遍历项目。

Screenshot of a list of buttons placed in two columns side by side in a bigger form factor.
图 3. 在较大的外形尺寸中,按钮列表并排放置在两列中

前两个示例虽然在单向导航方面有所不同,但在二维导航方面提供了相同的体验。这通常是因为屏幕上的项目在两个示例中都具有相同的地理位置。从第一Column向右导航将焦点移动到第二列,而从第一Row向下导航将焦点移动到其下方的列。