기본 포커스 순회 순서 섹션에서는 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차원 순회 순서 재정의
화살표 키를 사용하여 2차원 탐색의 포커스 순회 순서를 세밀하게 제어할 수도 있습니다. 각 요소에 대해 focusProperties
수정자를 추가하고 위로 올라오는 방향, 아래 방향 또는 다른 방향으로 표시되는 항목을 지정하여 각 경로의 기본 탐색 대상을 재정의할 수 있습니다.
TextButton( onClick = {}, modifier = Modifier .focusRequester(fourth) .focusProperties { down = third right = second } ) {}
이 기법은 키보드 화살표를 효과적으로 사용할 뿐만 아니라 유선 및 무선 컨트롤러의 D패드 및 스틱에도 사용할 수 있습니다.
추천 서비스
- 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
- 포커스 동작 변경하기
- Compose에서 포커스