Цели фокусировки

Цель фокуса – это элемент интерфейса, на который можно переместить фокус клавиатуры. Пользователи могут перемещать фокус клавиатуры с помощью клавиши Tab или клавиш со стрелками.

  • Tab или Shift + Tab – перемещение фокуса вперед или назад в одномерном порядке появления.
  • Клавиши со стрелками – перемещение фокуса в двух измерениях (вверх, вниз, влево и вправо).

Интерактивные элементы интерфейса по умолчанию являются целями фокусировки

Интерактивный компонент по умолчанию является целью фокуса. Другими словами, элемент пользовательского интерфейса является целью фокуса, если пользователи могут нажать на него.

Например, у вас есть три компонента Карточка. Если первая и третья карточки интерактивные (для них определен обратный вызов 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")
}

Как сделать composable-функцию некликабельной целью фокуса

Модификатор focusable делает composable-функцию целью фокуса без необходимости семантики клика. Пользователи могут переместить фокус клавиатуры на измененную composable-функцию (например, чтобы проверить контент с помощью инструментов специальных возможностей или прокрутить область просмотра), но нажатие клавиши Ввод или Пробел не запускает действие клика.

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

Как сделать composable-функцию нефокусируемой

В некоторых случаях может потребоваться исключить интерактивный элемент из навигации с помощью клавиатуры, не отключая события указателя или клика. Вы можете запретить компоненту получать фокус, установив canFocus = false внутри модификатора focusProperties:

var checked by remember { mutableStateOf(false) }

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

Назад
Обзор
Далее
Порядок перехода фокуса