Укажите состояние фокуса

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

Указание на тематическую направленность материала

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

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