포커스 타겟

포커스 타겟은 키보드 포커스가 이동할 수 있는 UI 요소입니다. 사용자는 Tab 키 또는 방향 (화살표) 키를 사용하여 키보드 포커스를 이동할 수 있습니다.

  • Tab 또는 Shift+Tab: 1차원 모양 순서로 포커스를 앞뒤로 이동합니다.
  • 방향 키: 포커스를 2차원적으로 이동합니다 (위, 아래, 왼쪽, 오른쪽).

상호작용이 가능한 UI 요소는 기본적으로 포커스 타겟입니다.

대화형 구성요소는 기본적으로 포커스 타겟입니다. 즉, 사용자가 탭하거나 클릭할 수 있는 경우 UI 요소는 포커스 타겟입니다.

예를 들어 카드 구성요소 3개를 생각해 보세요. 첫 번째 카드와 세 번째 카드는 상호작용이 가능하지만 (onClick 콜백을 정의함) 두 번째 카드는 순전히 정보 제공용 (클릭 처리가 없음)인 경우 첫 번째 카드에서 Tab 키를 누르면 두 번째 카드를 건너뛰고 세 번째 카드로 바로 이동합니다.

Card(onClick = { /* First card action */ }) {
    Text("Card 1 (Interactive)")
}
Card {
    Text("Card 2 (Informational - not focusable)")
}
Card(onClick = { /* Third card action */ }) {
    Text("Card 3 (Interactive)")
}

onClick 매개변수를 제공하여 두 번째 카드를 포커스 타겟으로 만들 수 있습니다.

Card(onClick = { /* Second card action */ }) {
    Text("Card 2 (Now interactive and focusable)")
}

clickable 수정자는 맞춤 또는 표준 UI 요소를 포커스 타겟으로도 변환합니다. 자세한 내용은 탭 및 누르기를 참고하세요.

Box(
    modifier = Modifier
        .clickable { /* Handle click */ }
) {
    Text("Custom interactive element")
}

컴포저블을 클릭할 수 없는 포커스 타겟으로 만들기

focusable 수정자는 클릭 시맨틱이 없어도 컴포저블을 포커스 타겟으로 만듭니다. 사용자는 수정된 컴포저블로 키보드 포커스를 이동할 수 있지만 (예: 접근성 도구로 콘텐츠를 검사하거나 뷰포트를 스크롤) Enter 또는 Space 키를 눌러도 클릭 작업이 트리거되지 않습니다.

Box(
    modifier = Modifier
        .focusable()
) {
    Text("Non-clickable focus target")
}

컴포저블에 포커스를 둘 수 없도록 만들기

일부 시나리오에서는 포인터 또는 클릭 이벤트를 사용 중지하지 않고 키보드 탐색에서 상호작용 요소를 제외할 수 있습니다. focusProperties 수정자 내에서 canFocus = false를 설정하여 구성요소가 포커스를 받지 못하도록 할 수 있습니다.

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    // Prevent component from being focused
    modifier = Modifier
        .focusProperties { canFocus = false }
)

이전
개요
다음
포커스 순회 순서