ระบุสถานะโฟกัส

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

การระบุโฟกัสของธีม Material

คอมโพเนนต์ Material ใช้ฟังก์ชัน ripple และ LocalIndication เพื่อวาดการเปลี่ยนแปลงสถานะภาพ วิธีแนบความคิดเห็นเกี่ยวกับโฟกัสของ Material มาตรฐานกับคอมโพเนนต์ที่กำหนดเอง

  1. สร้าง MutableInteractionSource โดยใช้ remember { MutableInteractionSource() }
  2. ส่งแหล่งที่มาของการโต้ตอบไปยังตัวแก้ไข indication พร้อมกับ ripple()

val interactionSource = remember { MutableInteractionSource() }

Box(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = null
        ) { /* onClick */ }
        .indication(
            interactionSource = interactionSource,
            indication = ripple()
        )
) {
    Text("Custom component with Material ripple")
}

ใช้ตัวบ่งชี้โฟกัสที่กำหนดเอง

สำหรับคิวภาพที่กำหนดเอง (เช่น การปรับขนาด ขอบ หรือเอฟเฟกต์เรืองแสง) ให้ทำดังนี้

  1. สร้าง IndicationNodeFactory
  2. สังเกตการโต้ตอบโฟกัสที่องค์ประกอบ InteractionSource ปล่อยออกมา
  3. ใช้การระบุที่กำหนดเองโดยใช้ตัวแก้ไข indication

var interactionSource = remember { MutableInteractionSource() }

Card(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = MyHighlightIndication,
            enabled = true,
            onClick = { }
        )
) {
    Text("hello")
}

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