포커스 순회 순서 변경

기본 포커스 순회 순서 섹션에서는 Compose가 1차원 (tab 키) 탐색과 2차원 (화살표 키) 탐색 모두에서 포커스 순회 동작을 요소에 자동으로 추가하는 방법을 설명했습니다. 경우에 따라 이 기본 동작을 재정의하고 필요한 순회 순서를 더 명시적으로 지정해야 할 수 있습니다.

1차원 순회 순서 재정의

1차원 탐색의 기본 포커스 순회 순서를 변경하려면 포커스 가능한 컴포저블마다 참조 집합을 하나씩 만듭니다.

val (first, second, third, fourth) = remember { FocusRequester.createRefs() }
FocusSnippets.kt

그런 다음 focusRequester 수정자를 사용하여 각각을 컴포저블과 연결합니다.

Column {
    Row {
        TextButton({}, Modifier.focusRequester(first)) { Text("First field") }
        TextButton({}, Modifier.focusRequester(third)) { Text("Third field") }
    }

    Row {
        TextButton({}, Modifier.focusRequester(second)) { Text("Second field") }
        TextButton({}, Modifier.focusRequester(fourth)) { Text("Fourth field") }
    }
}
FocusSnippets.kt

이제 focusProperties 수정자를 사용하여 맞춤 순회 순서를 지정할 수 있습니다.

Column {
    Row {
        TextButton(
            {},
            Modifier
                .focusRequester(first)
                .focusProperties { next = second }
        ) {
            Text("First field")
        }
        TextButton(
            {},
            Modifier
                .focusRequester(third)
                .focusProperties { next = fourth }
        ) {
            Text("Third field")
        }
    }

    Row {
        TextButton(
            {},
            Modifier
                .focusRequester(second)
                .focusProperties { next = third }
        ) {
            Text("Second field")
        }
        TextButton(
            {},
            Modifier
                .focusRequester(fourth)
                .focusProperties { next = first }
        ) {
            Text("Fourth field")
        }
    }
}
FocusSnippets.kt

2차원 순회 순서 재정의

화살표 키를 사용하여 2차원 탐색의 포커스 순회 순서를 세밀하게 제어할 수도 있습니다. 각 요소에 대해 focusProperties 수정자를 추가하고 위로 올라오는 방향, 아래 방향 또는 다른 방향으로 표시되는 항목을 지정하여 각 경로의 기본 탐색 대상을 재정의할 수 있습니다.

TextButton(
    onClick = {},
    modifier = Modifier
        .focusRequester(fourth)
        .focusProperties {
            down = third
            right = second
        }
) {}
FocusSnippets.kt

이 기법은 키보드 화살표를 효과적으로 사용할 뿐만 아니라 유선 및 무선 컨트롤러의 D패드 및 스틱에도 사용할 수 있습니다.