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

ทุกครั้งที่โฟกัสเปลี่ยนไปในโครงสร้าง Composition นั้น Compose จะเริ่มเหตุการณ์โฟกัสที่ตัวแก้ไขระดับบนและระดับล่างสามารถสังเกตได้ คุณสามารถใช้ตัวแก้ไข 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)
) {}

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

พร็อพเพอร์ตี้ FocusState

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

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