Указывать состояние фокуса

Состояние фокуса обеспечивает четкую визуальную подсказку, помогающую пользователям понять, какой элемент пользовательского интерфейса в данный момент находится в фокусе ввода. Все интерактивные компоненты Material 3 по умолчанию имеют встроенные индикаторы фокуса.

Примечание. В этом руководстве рассказывается, как рисовать визуальные индикаторы фокуса. Чтобы программно отслеживать переходы фокуса, запрашивать флаги фокуса (isFocused, hasFocus, isCaptured) или запускать изменения пользовательского интерфейса, управляемые состоянием, ознакомьтесь с разделом Реакция на фокус.

Индикация фокуса в тематическом оформлении Material Design

Компоненты Material используют функцию ripple и LocalIndication, чтобы отображать изменения визуального состояния. Чтобы прикрепить стандартный отзыв о фокусе Material к пользовательскому компоненту:

1. Создайте MutableInteractionSource с помощью remember { MutableInteractionSource() }.
2. Передайте источник взаимодействия в модификатор indication вместе с ripple().

val interactionSource = remember { MutableInteractionSource() }

Box(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = null
        ) { /* onClick */ }
        .indication(
            interactionSource = interactionSource,
            indication = ripple()
        )
) {
    Text("Custom component with Material ripple")
}
FocusedState.kt

Как реализовать собственные индикаторы фокуса

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

1. Создайте IndicationNodeFactory.
2. Отслеживайте взаимодействия с фокусом, которые генерирует InteractionSource элемента.
3. Примените специальное обозначение с помощью модификатора indication.

var interactionSource = remember { MutableInteractionSource() }

Card(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = MyHighlightIndication,
            enabled = true,
            onClick = { }
        )
) {
    Text("hello")
}
FocusSnippets.kt