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

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

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

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

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

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

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)")
}

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

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

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

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

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

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

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

ทำให้ 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 }
)

ก่อนหน้า
ภาพรวม
ถัดไป
ลำดับการไปยังโฟกัส