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

ผู้ใช้สามารถย้ายโฟกัสของแป้นพิมพ์ไปยังองค์ประกอบ 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. ปุ่มแรก (ด้านบนซ้าย)
2. ปุ่มที่ 2 (ด้านบนสุด)
3. ปุ่มที่ 3 (ด้านล่างซ้าย)
4. ปุ่มที่ 4 (ด้านล่างสุด)

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

การไปยังส่วนต่างๆ โดยใช้โฟกัสแบบ 2 มิติ

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

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

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

รีเซ็ตการไปยังส่วนต่างๆ ด้วยโฟกัสด้วยการคลิกด้วยเคอร์เซอร์

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

• ล้างโฟกัสเมื่อแตะหรือคลิก: การคลิกหรือแตะพื้นที่ที่ไม่มีการโต้ตอบ ด้วยเมาส์หรือทัชแพดจะปล่อยโฟกัสจากองค์ประกอบที่ใช้งานอยู่
• เริ่มการไปยังส่วนต่างๆ อีกครั้ง: หลังจากล้างโฟกัสแล้ว การกดปุ่ม Tab ครั้งถัดไปจะเริ่มการไปยังส่วนต่างๆ แบบ 1 มิติอีกครั้ง ที่เป้าหมายโฟกัสแรกตามลำดับการแสดงผล แทนที่จะกลับมาทำงานต่อจากองค์ประกอบที่ใช้งานอยู่ก่อนหน้านี้ ซึ่งจะเหมือนกับการย้ายโฟกัสแบบ 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