포커스 순회 순서 변경

기본 포커스 순회 순서 섹션에서 Compose가 어떻게 작동하는지 설명함 자동으로 요소에 포커스 순회 동작을 추가하며 1차원 (tab 키) 및 2차원 (화살표 키) 탐색 일부 이 기본 동작을 재정의하고 정보를 제공합니다.

1차원 순회 순서 재정의

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

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

그런 다음 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") }
    }
}

이제 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")
        }
    }
}

2차원 순회 순서 재정의

포커스 순회 순서를 세밀하게 제어할 수도 있습니다. 을 사용하도록 설정합니다. 각 요소에 대해 다음 작업을 수행할 수 있습니다. 를 추가하여 각 경로의 기본 탐색 대상을 재정의합니다. focusProperties 수정자를 재정의하고 표시될 항목을 지정합니다. 아래쪽 또는 다른 방향입니다.

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

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