포커스에 반응

컴포지션 트리에서 포커스가 변경될 때마다 Compose는 상위 및 하위 수정자가 관찰할 수 있는 포커스 이벤트를 발생시킵니다. onFocusChanged 수정자를 사용하여 포커스 상태 전환을 리슨하고, 현재 포커스 속성을 쿼리하고, 상태 기반 UI 업데이트를 트리거할 수 있습니다.

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)
) {}
FocusSnippets.kt

이 예에서 remember는 리컴포지션 전반에 걸쳐 테두리 색상을 저장하고 요소의 포커스 상태가 전환될 때마다 테두리 색상이 업데이트됩니다.

FocusState 속성

onFocusChanged에 전달된 FocusState 객체는 다음 세 가지 주요 속성을 제공합니다.

• isFocused: 이 수정자가 연결된 특정 컴포저블이 현재 활성 입력 포커스를 보유하는 경우 true를 반환합니다.
• hasFocus: 이 컴포저블 또는 하위 컴포저블에 현재 포커스가 있으면 true를 반환합니다. 이는 컨테이너 내의 하위 요소가 활성 상태일 때 이를 알아야 하는 상위 컨테이너 (예: 카드 또는 툴바)에 유용합니다.
• isCaptured: 포커스가 현재 요소에 고정되어 있는 경우 (예: captureFocus()를 사용하는 모달 하위 상호작용 중) true를 반환합니다. 캡처된 동안 포커스를 다른 요소로 이동하려고 해도 포커스가 지워지지 않습니다.

Modifier.onFocusChanged { focusState ->
    val isFocused = focusState.isFocused
    val hasFocus = focusState.hasFocus
    val isCaptured = focusState.isCaptured
}