Реагировать на фокусировку

Предоставляйте визуальные подсказки для облегчения визуализации фокуса.

Хотя все фокусируемые элементы из Material Theme уже имеют стиль фокуса, соответствующий теме, вам может потребоваться добавить некоторые визуальные элементы, чтобы элемент, находящийся в фокусе, было легче обнаружить. Хорошим решением было бы изменить границу вашего элемента на цвет, который хорошо контрастирует с фоном:

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

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

Внедряйте расширенные визуальные подсказки

С помощью Jetpack Compose вы также можете создавать более сложные и продвинутые визуальные подсказки, которые лучше соответствуют вашему пользовательскому интерфейсу.

1. Сначала создайте IndicationInstance , который визуально отображает нужный вам сигнал в вашем пользовательском интерфейсе:

   private class MyHighlightIndicationNode(private val interactionSource: InteractionSource) :
       Modifier.Node(), DrawModifierNode {
       private var isFocused = false
   
       override fun onAttach() {
           coroutineScope.launch {
               var focusCount = 0
               interactionSource.interactions.collect { interaction ->
                   when (interaction) {
                       is FocusInteraction.Focus -> focusCount++
                       is FocusInteraction.Unfocus -> focusCount--
                   }
                   val focused = focusCount > 0
                   if (isFocused != focused) {
                       isFocused = focused
                       invalidateDraw()
                   }
               }
           }
       }
   
       override fun ContentDrawScope.draw() {
           drawContent()
           if (isFocused) {
               drawRect(size = size, color = Color.White, alpha = 0.2f)
           }
       }
   }
   FocusSnippets.kt

2. Затем создайте Indication и запомните состояние фокусировки:

   object MyHighlightIndication : IndicationNodeFactory {
       override fun create(interactionSource: InteractionSource): DelegatableNode {
           return MyHighlightIndicationNode(interactionSource)
       }
   
       override fun hashCode(): Int = -1
   
       override fun equals(other: Any?) = other === this
   }
   FocusSnippets.kt

3. Добавьте в пользовательский интерфейс Indication и InteractionSource с помощью indication() :

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

Понять состояние фокуса

Как правило, каждый раз, когда состояние фокуса изменяется, FocusEvent запускается вверх по дереву, и родители модификатора focusable() могут прослушивать его с помощью модификатора onFocusChanged() .

Если вам нужно узнать состояние фокуса, вы можете использовать эти API в сочетании с модификатором onFocusChanged :

• isFocused возвращает true , если составной объект, к которому прикреплен модификатор, находится в фокусе.
• hasFocus работает аналогично isFocused , но с существенным отличием: вместо проверки только текущего элемента он проверяет, сфокусирован ли элемент или один из его дочерних элементов.
• isCaptured возвращает true всякий раз, когда фокус удерживается. Это происходит, например, когда TextField содержит неправильные данные, поэтому попытка сфокусировать другие элементы не приведет к очистке фокуса.

Эти поля показаны ниже:

Modifier.onFocusChanged {
    val isFocused = it.isFocused
    val hasFocus = it.hasFocus
    val isCaptured= it.isCaptured
}

{% дословно %} {% дословно %}