포커스에 반응

포커스 시각화를 위한 시각적 단서 제공

Material 테마의 포커스 가능 요소에는 이미 포커스 스타일이 있지만 배경화면이 테마와 일치하는 경우 시각적 요소를 추가하여 더 쉽게 찾을 수 있습니다. 좋은 해결책은 배경과 대비가 좋은 색상으로 요소를 추가하세요.

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를 사용하면 더 정교하고 고급스러운 시각적 요소도 만들 수 있습니다. UI와 더 잘 어울리는 큐를 제공합니다.

1. 먼저 UI에서 원하는 큐를 시각적으로 그리는 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() 수정자를 통해 Indication와 InteractionSource를 모두 UI에 추가합니다.

   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
}