เปลี่ยนลำดับการส่งผ่านโฟกัส
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ส่วนลำดับการส่งผ่านโฟกัสเริ่มต้นอธิบายวิธีการเขียน
จะเพิ่มพฤติกรรมการส่งผ่านโฟกัสไปยังองค์ประกอบโดยอัตโนมัติสำหรับทั้ง
การไปยังส่วนต่างๆ แบบมิติเดียว (แป้น tab
) และแบบ 2 มิติ (แป้นลูกศร) ในบางส่วน
คุณอาจจำเป็นต้องลบล้างการทำงานเริ่มต้นนี้และระบุให้เจาะจงมากขึ้น
เกี่ยวกับลำดับการส่งผ่านที่จำเป็น
ลบล้างลำดับการส่งผ่านแบบหนึ่งมิติ
ในการเปลี่ยนลำดับการส่งผ่านโฟกัสเริ่มต้นสำหรับการนำทางแบบหนึ่งมิติ คุณสามารถ
สร้างชุดการอ้างอิง 1 ชุดสำหรับ Composable ที่โฟกัสได้แต่ละรายการ:
val (first, second, third, fourth) = remember { FocusRequester.createRefs() }
จากนั้นใช้ตัวแก้ไข focusRequester
เพื่อเชื่อมโยงแต่ละรายการกับ
Composable:
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-Pads และติดบนตัวควบคุมแบบใช้สายและไร้สาย
แนะนำสำหรับคุณ
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-28 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-08-28 UTC"],[],[],null,["The [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\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/7a0ebbee11495f628cf9d574f6b6069c2867232a/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/7a0ebbee11495f628cf9d574f6b6069c2867232a/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/7a0ebbee11495f628cf9d574f6b6069c2867232a/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\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/7a0ebbee11495f628cf9d574f6b6069c2867232a/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- 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)"]]