สถานะที่มีการโฟกัสจะให้คิวภาพที่ชัดเจนเพื่อช่วยให้ผู้ใช้เข้าใจว่าองค์ประกอบ UI ใดที่กำลังมีโฟกัสอินพุต คอมโพเนนต์ Material 3 แบบอินเทอร์แอกทีฟทั้งหมด มีการระบุโฟกัสในตัวโดยค่าเริ่มต้น
การระบุโฟกัสของธีม Material
คอมโพเนนต์ Material ใช้ฟังก์ชัน ripple และ LocalIndication
เพื่อวาดการเปลี่ยนแปลงสถานะภาพ
วิธีแนบความคิดเห็นเกี่ยวกับโฟกัสของ Material มาตรฐานกับคอมโพเนนต์ที่กำหนดเอง
- สร้าง
MutableInteractionSourceโดยใช้remember { MutableInteractionSource() } - ส่งแหล่งที่มาของการโต้ตอบไปยังตัวแก้ไข
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") }
ใช้ตัวบ่งชี้โฟกัสที่กำหนดเอง
สำหรับคิวภาพที่กำหนดเอง (เช่น การปรับขนาด ขอบ หรือเอฟเฟกต์เรืองแสง) ให้ทำดังนี้
- สร้าง
IndicationNodeFactory - สังเกตการโต้ตอบโฟกัสที่องค์ประกอบ
InteractionSourceปล่อยออกมา - ใช้การระบุที่กำหนดเองโดยใช้ตัวแก้ไข
indication
var interactionSource = remember { MutableInteractionSource() } Card( modifier = Modifier .clickable( interactionSource = interactionSource, indication = MyHighlightIndication, enabled = true, onClick = { } ) ) { Text("hello") }
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- เป้าหมายโฟกัส
- ลำดับการส่งผ่านโฟกัส
- รีแอ็กเพื่อโฟกัส