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

สถานะที่มีการโฟกัสจะแสดงสัญญาณภาพที่ชัดเจนเพื่อช่วยให้ผู้ใช้เข้าใจว่าองค์ประกอบ 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")
}

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