แสดงความรู้สึกเพื่อให้โฟกัส

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

สังเกตสถานะโฟกัสด้วย onFocusChanged

ตัวแก้ไข onFocusChanged จะให้ออบเจ็กต์ FocusState ทุกครั้งที่องค์ประกอบ ได้รับหรือสูญเสียโฟกัส

เช่น คุณสามารถสังเกตการเปลี่ยนแปลงโฟกัสเพื่ออัปเดตสถานะคอมโพเนนต์ที่กำหนดเอง (เช่น เปลี่ยนสีเส้นขอบขององค์ประกอบหรือทริกเกอร์ภาพเคลื่อนไหว) ได้ดังนี้

var color by remember { mutableStateOf(Color.White) }
Card(
    modifier = Modifier
        .onFocusChanged {
            color = if (it.isFocused) Red else White
        }
        .border(5.dp, color)
) {}
FocusSnippets.kt

ในตัวอย่างนี้ remember จะจัดเก็บสีเส้นขอบในการจัดองค์ประกอบใหม่ และ สีเส้นขอบจะอัปเดตทุกครั้งที่สถานะโฟกัสขององค์ประกอบเปลี่ยน

คุณสมบัติ FocusState

ออบเจ็กต์ FocusState ที่ส่งไปยัง onFocusChanged มีพร็อพเพอร์ตี้หลัก 3 รายการ ดังนี้

• isFocused: แสดงผล true หาก Composable ที่เฉพาะเจาะจงซึ่งแนบตัวแก้ไขนี้อยู่มีโฟกัสอินพุตที่ใช้งานอยู่ในปัจจุบัน
• hasFocus: แสดงผล true หาก Composable นี้หรือ Composable ลูกใดๆ มีโฟกัสอยู่ในขณะนี้ ซึ่งมีประโยชน์สำหรับคอนเทนเนอร์หลัก (เช่น การ์ดหรือแถบเครื่องมือ) ที่ต้องทราบว่าองค์ประกอบย่อยใดที่ใช้งานอยู่
• isCaptured: แสดงผล true หากโฟกัสล็อกอยู่ที่องค์ประกอบ ในขณะนี้ (เช่น ระหว่างการโต้ตอบย่อยแบบโมดอลโดยใช้ captureFocus()) ขณะที่จับภาพอยู่ การพยายามย้ายโฟกัสไปยังองค์ประกอบอื่นๆ จะไม่ล้าง โฟกัส

Modifier.onFocusChanged { focusState ->
    val isFocused = focusState.isFocused
    val hasFocus = focusState.hasFocus
    val isCaptured = focusState.isCaptured
}