ลำดับการไปยังโฟกัส

ผู้ใช้สามารถย้ายโฟกัสของแป้นพิมพ์ไปยังองค์ประกอบ UI ต่างๆ ได้โดยใช้ปุ่ม Tab หรือปุ่มทิศทาง (ลูกศร / D-pad) ดังนี้

• Tab / Shift+Tab: ย้ายโฟกัสไปข้างหน้าหรือข้างหลังตามลำดับการปรากฏแบบมิติเดียว
• แป้นบังคับทิศทาง: ย้ายโฟกัสแบบ 2 มิติ (ขึ้น ลง ซ้าย และขวา)

การข้ามโฟกัสแบบมิติเดียว

ในการไปยังส่วนต่างๆ โดยเน้นแบบมิติเดียว ปุ่ม Tab จะเลื่อนโฟกัสผ่าน UI ตามลำดับที่ปรากฏบนหน้าจอ

ตัวอย่างเช่น เมื่อจัดเรียงปุ่ม 4 ปุ่มเป็นแถว

Column {
    Row {
        Button(onClick = { /* ... */ }) { Text("1st") }
        Button(onClick = { /* ... */ }) { Text("2nd") }
    }
    Row {
        Button(onClick = { /* ... */ }) { Text("3rd") }
        Button(onClick = { /* ... */ }) { Text("4th") }
    }
}
FocusTraversal.kt

การกดปุ่ม Tab จะย้ายโฟกัสตามลำดับผ่านปุ่มต่างๆ ดังนี้

1. ปุ่มที่ 1 (บนซ้าย)
2. ปุ่มที่ 2 (ด้านบน)
3. ปุ่มที่ 3 (ด้านล่างซ้าย)
4. ปุ่มที่ 4 (ด้านล่างสุด)

การกด Tab บนองค์ประกอบสุดท้ายจะวนกลับไปยังเป้าหมายโฟกัสแรก การกด Shift+Tab จะย้ายโฟกัสในลำดับย้อนกลับ

การข้ามโฟกัสแบบ 2 มิติ

การกดปุ่มลูกศรบนแป้นพิมพ์หรือใช้ D-pad จะทริกเกอร์การไปยังส่วนต่างๆ ของโฟกัสแบบ 2 มิติ

ในการไปยังส่วนต่างๆ แบบ 2 มิติ ระบบจะตรวจสอบพิกัดทางเรขาคณิตและ ขอบเขตเชิงพื้นที่ขององค์ประกอบ UI เพื่อกำหนดเป้าหมายที่ใกล้ที่สุดในทิศทางที่ขอ

การข้ามโฟกัสแบบ 2 มิติจะไม่วนกลับ หากผู้ใช้กดปุ่มลูกศรลงขณะที่โฟกัสอยู่ที่องค์ประกอบด้านล่างสุด โฟกัสจะยังคงอยู่ที่องค์ประกอบนั้นแทนที่จะข้ามไปยังด้านบนของหน้าจอ

รีเซ็ตการข้ามโฟกัสด้วยการคลิกเคอร์เซอร์

เมื่อสลับไปมาระหว่างแป้นพิมพ์จริงกับเมาส์หรือทัชแพดบนเดสก์ท็อปหรืออุปกรณ์หน้าจอขนาดใหญ่ ให้ทำดังนี้

• ล้างโฟกัสเมื่อแตะหรือคลิก: การคลิกหรือแตะพื้นที่ที่ไม่มีการโต้ตอบด้วยเมาส์หรือทัชแพดจะยกเลิกโฟกัสจากองค์ประกอบที่ใช้งานอยู่
• เริ่มการข้ามใหม่: หลังจากล้างโฟกัสแล้ว การกดแป้น Tab ครั้งถัดไปจะเริ่มการข้ามแบบมิติเดียวใหม่ที่เป้าหมายโฟกัสแรกตามลำดับลักษณะที่ปรากฏ แทนที่จะกลับมาทำงานต่อจากองค์ประกอบที่ใช้งานอยู่ก่อนหน้านี้ ซึ่งเหมือนกับการข้ามโฟกัสแบบ 2 มิติ ปุ่มทิศทางจะย้ายโฟกัสของแป้นพิมพ์ไปยังเป้าหมายโฟกัสที่ใกล้ที่สุดในทิศทางที่ขอ

ดูรายละเอียดเกี่ยวกับการล้างโฟกัสแบบเป็นโปรแกรมได้ที่หัวข้อย้ายและล้างโฟกัส

ปรับแต่งลำดับการส่งผ่านโฟกัส

คุณปรับแต่งลักษณะการข้ามได้ด้วยตัวแก้ไข focusProperties

ปรับแต่งลำดับการส่งผ่านแบบมิติเดียว

หากต้องการลบล้างการไปยังส่วนต่างๆ แบบมิติเดียว ให้ระบุพร็อพเพอร์ตี้ next หรือ previous ด้วย FocusRequester ดังนี้

1. สร้างออบเจ็กต์ FocusRequester ด้วย remember { FocusRequester() }
2. แนบ FocusRequester กับ Composable เป้าหมายโดยใช้ตัวแก้ไข focusRequester
3. ใช้ตัวแก้ไข focusProperties กับ Composable ต้นทางและกำหนด FocusRequester ให้กับ next (สำหรับ Tab) หรือ previous (สำหรับ Shift+Tab)

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

Column {
    Button(
        onClick = { /* ... */ },
        modifier = Modifier
            .focusRequester(first)
            .focusProperties { next = third }
    ) {
        Text("First (Tab jumps to Third)")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(second)
    ) {
        Text("Second")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(third)
    ) {
        Text("Third")
    }
}
FocusTraversal.kt

ปรับแต่งลำดับการส่งผ่านแบบ 2 มิติ

ในทำนองเดียวกัน คุณสามารถลบล้างการข้ามโฟกัสแบบ 2 มิติได้โดยกำหนดอินสแตนซ์ FocusRequester ให้กับ up, down, start, end, left หรือ right ภายใน focusProperties ดังนี้

val (topButton, bottomButton) = remember { FocusRequester.createRefs() }

Button(
    onClick = { /* ... */ },
    modifier = Modifier
        .focusRequester(topButton)
        .focusProperties {
            down = bottomButton
            right = bottomButton
        }
) {
    Text("Top button")
}
Button(
    onClick = { /* ... */ },
    modifier = Modifier.focusRequester(bottomButton)
) {
    Text("Bottom button")
}
FocusTraversal.kt

หากต้องการบล็อกการไปยังส่วนต่างๆ ของโฟกัสในทิศทางที่เฉพาะเจาะจง (เช่น ที่ขอบเขตเลย์เอาต์) ให้กำหนด FocusRequester.Cancel ให้กับพร็อพเพอร์ตี้นั้น (เช่น down = FocusRequester.Cancel) หากต้องการคงอัลกอริทึมการข้ามผ่านเริ่มต้นของระบบไว้อย่างชัดเจนสำหรับทิศทางที่กำหนด ให้กำหนด FocusRequester.Default