焦点目标

焦点目标是键盘焦点可以移至的界面元素。用户可以按 Tab 键或方向(箭头)键移动键盘焦点:

  • Tab 或 Shift+Tab - 按一维外观顺序向前或向后移动焦点。
  • 方向键 - 在二维空间内移动焦点(上、下、左和右)。

默认情况下,互动式界面元素是焦点目标

默认情况下,互动式组件是焦点目标。换言之,如果用户可以点按或点击某个界面元素,则该界面元素就是焦点目标。

例如,假设有三个 Card 组件。如果第一张卡片和第三张卡片是互动式卡片(它们定义了 onClick 回调),但第二张卡片纯粹是信息性卡片(没有点击处理),那么在第一张卡片上按 Tab 键会跳过第二张卡片,直接前进到第三张卡片。

Card(onClick = { /* First card action */ }) {
    Text("Card 1 (Interactive)")
}
Card {
    Text("Card 2 (Informational - not focusable)")
}
Card(onClick = { /* Third card action */ }) {
    Text("Card 3 (Interactive)")
}

您可以通过提供 onClick 参数,使第二张卡片成为焦点目标:

Card(onClick = { /* Second card action */ }) {
    Text("Card 2 (Now interactive and focusable)")
}

clickable 修饰符还可以将自定义或标准界面元素转换为焦点目标。如需了解详情,请参阅点按和按压。

Box(
    modifier = Modifier
        .clickable { /* Handle click */ }
) {
    Text("Custom interactive element")
}

将可组合项设为不可点击的焦点目标

focusable 修饰符可使可组合项成为焦点目标,而无需点击语义。用户可以将键盘焦点移动到修改后的可组合项(例如,使用无障碍工具检查内容或滚动视口),但按 Enter 或空格键不会触发点击操作:

Box(
    modifier = Modifier
        .focusable()
) {
    Text("Non-clickable focus target")
}

使可组合项无法聚焦

在某些情况下,您可能希望从键盘导航中排除某个互动元素,但又不希望停用指针或点击事件。您可以通过在 focusProperties 修饰符内设置 canFocus = false 来防止组件接收焦点:

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    // Prevent component from being focused
    modifier = Modifier
        .focusProperties { canFocus = false }
)