Thay đổi thứ tự duyệt qua tiêu điểm
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Phần Thứ tự truyền tải tiêu điểm mặc định đã mô tả cách Compose
tự động thêm hành vi truyền tải tiêu điểm vào các phần tử của bạn, cho cả hai
điều hướng một chiều (phím tab
) và hai chiều (các phím mũi tên). Trong một số
trong các trường hợp khác, bạn có thể cần phải ghi đè hành vi mặc định này và
về thứ tự duyệt qua bắt buộc.
Ghi đè thứ tự truyền tải một chiều
Để thay đổi thứ tự truyền tải tiêu điểm mặc định cho điều hướng một chiều, bạn
tạo một tập hợp các tệp tham chiếu, mỗi tệp tham chiếu cho một thành phần kết hợp có thể làm tâm điểm:
val (first, second, third, fourth) = remember { FocusRequester.createRefs() }
Sau đó, hãy sử dụng đối tượng sửa đổi focusRequester
để liên kết từng đối tượng với một
thành phần kết hợp:
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") }
}
}
Giờ đây, bạn có thể sử dụng đối tượng sửa đổi focusProperties
để chỉ định thứ tự duyệt qua tuỳ chỉnh:
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")
}
}
}
Ghi đè thứ tự truyền tải hai chiều
Bạn cũng có thể thêm quyền kiểm soát chi tiết đối với thứ tự truyền tải tiêu điểm
để điều hướng hai chiều bằng các phím mũi tên. Đối với mỗi phần tử, bạn có thể
ghi đè đích điều hướng mặc định cho mỗi chỉ đường bằng cách thêm
đối tượng sửa đổi focusProperties
và chỉ định mục sẽ xuất hiện,
hoặc hướng bất kỳ nào khác:
TextButton(
onClick = {},
modifier = Modifier
.focusRequester(fourth)
.focusProperties {
down = third
right = second
}
) {}
Kỹ thuật này không chỉ sử dụng hiệu quả mũi tên trên bàn phím mà còn hoạt động với
Miếng đệm D-pad và gậy điều khiển trên bộ điều khiển có dây và không dây.
Đề xuất cho bạn
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-08-23 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-08-23 UTC."],[],[],null,["# Change focus traversal order\n\nThe [Default focus traversal order](/develop/ui/compose/touch-input/focus) section described how Compose\nautomatically adds focus traversal behavior to your elements, for both\none-dimensional (`tab` key) and two-dimensional (arrow keys) navigation. In some\ncases, you might need to override this default behavior and be more explicit\nabout the required traversal order.\n\nOverride one-dimensional traversal order\n----------------------------------------\n\nTo change the default focus traversal order for one-dimensional navigation, you\ncreate a set of references, one for each focusable composable:\n\n\n```kotlin\nval (first, second, third, fourth) = remember { FocusRequester.createRefs() }https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/touchinput/focus/FocusSnippets.kt#L119-L119\n```\n\n\u003cbr /\u003e\n\nThen, use the [`focusRequester`](/reference/kotlin/androidx/compose/ui/focus/package-summary#(androidx.compose.ui.Modifier).focusRequester(androidx.compose.ui.focus.FocusRequester)) modifier to associate each of them with a\ncomposable:\n\n\n```kotlin\nColumn {\n Row {\n TextButton({}, Modifier.focusRequester(first)) { Text(\"First field\") }\n TextButton({}, Modifier.focusRequester(third)) { Text(\"Third field\") }\n }\n\n Row {\n TextButton({}, Modifier.focusRequester(second)) { Text(\"Second field\") }\n TextButton({}, Modifier.focusRequester(fourth)) { Text(\"Fourth field\") }\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/touchinput/focus/FocusSnippets.kt#L122-L132\n```\n\n\u003cbr /\u003e\n\nYou can now use the [`focusProperties`](/reference/kotlin/androidx/compose/ui/focus/package-summary#(androidx.compose.ui.Modifier).focusProperties(kotlin.Function1)) modifier to specify a custom traversal order:\n\n\n```kotlin\nColumn {\n Row {\n TextButton(\n {},\n Modifier\n .focusRequester(first)\n .focusProperties { next = second }\n ) {\n Text(\"First field\")\n }\n TextButton(\n {},\n Modifier\n .focusRequester(third)\n .focusProperties { next = fourth }\n ) {\n Text(\"Third field\")\n }\n }\n\n Row {\n TextButton(\n {},\n Modifier\n .focusRequester(second)\n .focusProperties { next = third }\n ) {\n Text(\"Second field\")\n }\n TextButton(\n {},\n Modifier\n .focusRequester(fourth)\n .focusProperties { next = first }\n ) {\n Text(\"Fourth field\")\n }\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/touchinput/focus/FocusSnippets.kt#L136-L174\n```\n\n\u003cbr /\u003e\n\nOverride two-dimensional traversal order\n----------------------------------------\n\nIt is also possible to add fine-grained control over the focus traversal order\nfor two-dimensional navigation with the arrow keys. For each element, you can\noverride the default navigation destination for each of the directions by adding\nthe [`focusProperties`](/reference/kotlin/androidx/compose/ui/focus/package-summary#(androidx.compose.ui.Modifier).focusProperties(kotlin.Function1)) modifier and specifying the item that would come up,\ndown, or any other direction:\n\n\n```kotlin\nTextButton(\n onClick = {},\n modifier = Modifier\n .focusRequester(fourth)\n .focusProperties {\n down = third\n right = second\n }\n) {}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/touchinput/focus/FocusSnippets.kt#L185-L193\n```\n\n\u003cbr /\u003e\n\nThis technique not only effectively uses keyboard arrows, but would work with\nD-Pads and sticks on wired and wireless controllers.\n\nRecommended for you\n-------------------\n\n- Note: link text is displayed when JavaScript is off\n- [Change focus behavior](/develop/ui/compose/touch-input/focus/change-focus-behavior)\n- [Focus in Compose](/develop/ui/compose/touch-input/focus)"]]