포커스 상태 표시

포커스 상태는 사용자가 현재 입력 포커스를 보유한 UI 요소를 이해하는 데 도움이 되는 명확한 시각적 신호를 제공합니다. 모든 대화형 Material 3 구성요소는 기본적으로 내장된 포커스 표시를 제공합니다.

참고: 이 가이드에서는 시각적 포커스 표시를 그리는 방법을 설명합니다. 포커스 전환을 프로그래매틱 방식으로 수신하거나 포커스 플래그 (isFocused, hasFocus, isCaptured)를 쿼리하거나 상태 기반 UI 변경을 트리거하려면 포커스에 반응을 참고하세요.

Material 테마 포커스 표시

Material 구성요소는 ripple 함수와 LocalIndication를 사용하여 시각적 상태 변경사항을 그립니다. 표준 Material 포커스 피드백을 맞춤 구성요소에 연결하려면 다음 단계를 따르세요.

1. remember { MutableInteractionSource() }를 사용하여 MutableInteractionSource를 만듭니다.
2. ripple()와 함께 상호작용 소스를 indication 수정자에 전달합니다.

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