Compose 中的焦点

用户与您的应用互动时，通常会触摸屏幕上的元素。不过，这并不是唯一的互动形式。其他形式的互动可能包括：

  • ChromeOS 用户可以使用实体键盘上的方向键来浏览屏幕。
  • 玩游戏的人可以使用所连接的游戏控制器在游戏菜单中导航。
  • 移动应用用户可以使用屏幕键盘循环浏览元素。

在这些情况下，务必要跟踪在任何给定时间点哪个组件处于活动状态，这就是我们所说的焦点。屏幕上的元素应按逻辑顺序聚焦。Jetpack Compose 具有默认的焦点处理方式，在大多数情况下都是正确的。不过，在某些情况下，您可能需要修改此默认行为。

以下页面介绍了如何在应用中使用焦点：

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

默认焦点遍历顺序

在深入了解焦点搜索的默认行为之前，我们有必要先了解层次结构中的级别概念：一般来说，当两个 Composables 是同级时，即它们具有相同的父级，我们就可以说它们处于同一级别。例如，Column 中的元素处于同一级别。向上移动一级是指从子级移动到其 Composable 父级，或者，沿用之前的示例，从某个商品返回到包含该商品的 Column。向下移动一个级别则相反，即从 Column 父级移动到所含项目。此概念可应用于可包含其他 Composables 的每个 Composable。

界面导航可通过多种方式进行，其中一些方式是大多数用户已经知道的：

  • 标签页：一维导航，可向前或向后移动。TAB 键导航会将焦点移至层次结构中的下一个或上一个元素。默认情况下，Compose 会遵循 Composables 的声明。单向导航可以通过键盘上的 tab 键或手表上的旋转表圈来实现，这种焦点搜索会访问屏幕上的每个元素。
  • 箭头键：二维导航，可向左、右、上或下移动。 二维导航可通过电视上的方向键或键盘上的箭头键实现，其遍历顺序仅访问给定级别的元素。您可以使用 D-Pad 中心按钮和返回按钮来向下和向上返回到其他级别。

以以下屏幕截图为例，其中有四个按钮，一个在另一个下方，您希望按显示顺序依次循环显示所有按钮。Jetpack Compose 可开箱即用地实现此行为：该工具包可让您使用 tab 键按垂直顺序从上到下循环浏览每个可组合项，或通过按向上或向下箭头移动焦点。

屏幕截图：以竖向方式排列的按钮列表，按钮一个接一个地位于下方，采用小巧的规格。
图 1. 以小尺寸规格显示的按钮列表

当您改用其他类型的布局时，情况会略有不同。如果您的布局包含多个列（如下面的布局所示），Jetpack Compose 可让您在这些列之间进行导航，而无需添加任何代码。如果您按 tab 键，Jetpack Compose 会自动按声明顺序（从 First 到 Fourth）突出显示相应项。使用键盘上的箭头键可使选择在 2D 空间中沿所需方向移动。

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

Composables 在两个 Rows 中声明，焦点元素按顺序（从第一个到第四个）声明。当您按 tab 键时，系统会按以下顺序设置焦点：

屏幕截图：在较大规格的设备上，并排显示在两列中的按钮列表。
图 2. 以两列并排方式放置在较大设备规格中的按钮列表

在下面的代码段中，您在 Columns 中声明了项，而不是在 Rows 中声明：

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

此布局会从屏幕的开头到结尾，从上到下垂直遍历各个项：

屏幕截图：在较大规格的设备上，并排显示在两列中的按钮列表。
图 3. 以两列并排方式放置在较大设备规格中的按钮列表

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

下一页
更改焦点遍历顺序