Реакция на фокус

Каждый раз, когда фокус переходит между элементами дерева композиции, Compose запускает событие focus, которое могут отслеживать родительские и дочерние модификаторы. Модификатор onFocusChanged позволяет отслеживать переходы состояния фокуса, запрашивать текущие свойства фокуса и запускать обновления интерфейса на основе состояния.

Как отслеживать состояние фокуса с помощью onFocusChanged

Модификатор onFocusChanged предоставляет объект FocusState, когда элемент получает или теряет фокус.

Например, вы можете отслеживать изменения фокуса, чтобы обновлять состояние специального компонента (например, менять цвет границы элемента или запускать анимацию):

var color by remember { mutableStateOf(Color.White) }
Card(
    modifier = Modifier
        .onFocusChanged {
            color = if (it.isFocused) Red else White
        }
        .border(5.dp, color)
) {}

В этом примере remember сохраняет цвет границы при повторной композиции, а цвет границы обновляется при переходе элемента в состояние фокуса.

Свойства FocusState

Объект FocusState, переданный в onFocusChanged, содержит три ключевых свойства:

  • isFocused: возвращает true, если определенный компонент, к которому прикреплен этот модификатор, в данный момент имеет активный фокус ввода.
  • hasFocus: возвращает значение true, если этот или любой из дочерних композируемых элементов в данный момент находится в фокусе. Это полезно для родительских контейнеров (например, карточек или панелей инструментов), которым нужно знать, когда активен любой из их дочерних элементов.
  • isCaptured: возвращает значение true, если фокус заблокирован на элементе (например, во время модальных взаимодействий с использованием captureFocus()). При попытке перевести фокус на другие элементы он не будет сброшен.
Modifier.onFocusChanged { focusState ->
    val isFocused = focusState.isFocused
    val hasFocus = focusState.hasFocus
    val isCaptured = focusState.isCaptured
}