เป้าหมายที่เน้น

เป้าหมายโฟกัสคือองค์ประกอบ UI ที่โฟกัสของแป้นพิมพ์สามารถย้ายไปได้ ผู้ใช้สามารถย้ายโฟกัสของแป้นพิมพ์ด้วยแป้น Tab หรือแป้นลูกศรได้โดยทำดังนี้

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

องค์ประกอบ UI แบบอินเทอร์แอกทีฟเป็นเป้าหมายโฟกัสโดยค่าเริ่มต้น

คอมโพเนนต์แบบอินเทอร์แอกทีฟเป็นเป้าหมายโฟกัสโดยค่าเริ่มต้น กล่าวคือ องค์ประกอบ UI จะเป็นเป้าหมายโฟกัสหากผู้ใช้แตะหรือคลิกได้

เช่น ลองพิจารณาคอมโพเนนต์ Card 3 รายการ หากการ์ดแรกและสามมีการโต้ตอบ (กำหนดonClickการเรียกกลับ) แต่การ์ดที่สองเป็นเพียง การให้ข้อมูล (ไม่มีการจัดการการคลิก) การกดปุ่มTab บนการ์ดแรก จะข้ามการ์ดที่สองและไปยังการ์ดที่สามโดยตรง

Card(onClick = { /* First card action */ }) {
    Text("Card 1 (Interactive)")
}
Card {
    Text("Card 2 (Informational - not focusable)")
}
Card(onClick = { /* Third card action */ }) {
    Text("Card 3 (Interactive)")
}
FocusTarget.kt

คุณทำให้การ์ดที่ 2 เป็นเป้าหมายโฟกัสได้โดยระบุพารามิเตอร์ onClick

Card(onClick = { /* Second card action */ }) {
    Text("Card 2 (Now interactive and focusable)")
}
FocusTarget.kt

ตัวแก้ไข clickable ยังเปลี่ยนองค์ประกอบ UI มาตรฐานหรือที่กำหนดเองให้เป็น เป้าหมายโฟกัสด้วย ดูรายละเอียดได้ที่แตะค้าง

Box(
    modifier = Modifier
        .clickable { /* Handle click */ }
) {
    Text("Custom interactive element")
}
FocusTarget.kt

ทำให้ Composable เป็นเป้าหมายโฟกัสที่คลิกไม่ได้

ตัวแก้ไข focusable จะทำให้ Composable เป็นเป้าหมายโฟกัสโดยไม่จำเป็นต้องมี ความหมายของการคลิก ผู้ใช้สามารถย้ายโฟกัสของแป้นพิมพ์ไปยัง Composable ที่แก้ไขแล้ว (เช่น เพื่อตรวจสอบเนื้อหาด้วยเครื่องมือเพื่อการช่วยเหลือพิเศษหรือเลื่อนวิวพอร์ต) ได้ แต่การกดแป้น Enter หรือ Space จะไม่ทริกเกอร์การคลิก

Box(
    modifier = Modifier
        .focusable()
) {
    Text("Non-clickable focus target")
}
FocusTarget.kt

สร้าง Composable ที่ไม่สามารถโฟกัสได้

ในบางสถานการณ์ คุณอาจต้องการยกเว้นองค์ประกอบแบบอินเทอร์แอกทีฟจากการไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ โดยไม่ต้องปิดใช้เหตุการณ์ของเคอร์เซอร์หรือการคลิก คุณป้องกันไม่ให้คอมโพเนนต์รับโฟกัสได้โดยตั้งค่า canFocus = false ภายในตัวแก้ไข focusProperties ดังนี้

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    // Prevent component from being focused
    modifier = Modifier
        .focusProperties { canFocus = false }
)
FocusSnippets.kt