คอมโพเนนต์ Chip
เป็นองค์ประกอบ UI แบบอินเทอร์แอกทีฟขนาดกะทัดรัด แสดงถึงความซับซ้อน
เช่น รายชื่อติดต่อหรือแท็ก มักมีไอคอนและป้ายกำกับ สามารถทำได้
ตรวจสอบได้ ปิดได้ หรือคลิกได้
ชิปทั้ง 4 ประเภทและตำแหน่งที่คุณสามารถใช้ได้มีดังนี้
- ช่วยเหลือ: แนะนำผู้ใช้ในระหว่างทำงาน มักปรากฏเป็น UI ชั่วคราว เพื่อตอบสนองต่อข้อมูลจากผู้ใช้ได้
- กรอง: อนุญาตให้ผู้ใช้ปรับแต่งเนื้อหาจากชุดตัวเลือก สิ่งที่ทำได้ ถูกเลือกหรือยกเลิกการเลือกไว้ และอาจแสดงไอคอนเครื่องหมายถูกเมื่อเลือก
- อินพุต: แสดงข้อมูลที่ได้จากผู้ใช้ เช่น รายการที่เลือกใน เมนู โดยสามารถมีไอคอนและข้อความ รวมทั้งมีเครื่องหมาย "X" เพื่อนำออก
- การแนะนำ: ให้คำแนะนำแก่ผู้ใช้ตามข้อมูลล่าสุด กิจกรรมหรืออินพุต โดยปกติแล้วจะปรากฏใต้ช่องป้อนข้อมูลเพื่อแสดงข้อความแจ้งผู้ใช้ การดำเนินการ
แพลตฟอร์ม API
Composable มี 4 รายการที่สอดคล้องกับชิปทั้ง 4 ประเภท ส่วนต่อไปนี้จะสรุป Composable เหล่านี้และความแตกต่างของรายละเอียด แต่มีพารามิเตอร์ต่อไปนี้เหมือนกัน
label
: สตริงที่ปรากฏในชิปicon
: ไอคอนที่แสดงที่จุดเริ่มต้นของชิป บางส่วนของ Composable ที่เจาะจงจะมีleadingIcon
และtrailingIcon
แยกกัน พารามิเตอร์onClick
: lambda ที่ชิปเรียกใช้เมื่อผู้ใช้กด
ชิปการสนับสนุน
Composable ของ AssistChip
เป็นวิธีที่ไม่ซับซ้อนในการสร้าง
ชิปผู้ช่วยที่สะกิดผู้ใช้ไปในทิศทางที่กำหนด ความแตกต่าง 1 รายการ
คือพารามิเตอร์ leadingIcon
ที่ให้คุณแสดงไอคอนทางด้านซ้าย
ของชิป ตัวอย่างต่อไปนี้แสดงวิธีใช้งาน
@Composable fun AssistChipExample() { AssistChip( onClick = { Log.d("Assist chip", "hello world") }, label = { Text("Assist chip") }, leadingIcon = { Icon( Icons.Filled.Settings, contentDescription = "Localized description", Modifier.size(AssistChipDefaults.IconSize) ) } ) }
การติดตั้งใช้งานนี้จะปรากฏดังนี้
ชิปตัวกรอง
Composable ของ FilterChip
กำหนดให้คุณต้องติดตามว่าชิปหรือไม่
ไว้ ตัวอย่างต่อไปนี้จะแสดงให้เห็นวิธีที่คุณสามารถแสดงโอกาส
ไอคอนที่ทำเครื่องหมายไว้เฉพาะเมื่อผู้ใช้เลือกชิป
@Composable fun FilterChipExample() { var selected by remember { mutableStateOf(false) } FilterChip( onClick = { selected = !selected }, label = { Text("Filter chip") }, selected = selected, leadingIcon = if (selected) { { Icon( imageVector = Icons.Filled.Done, contentDescription = "Done icon", modifier = Modifier.size(FilterChipDefaults.IconSize) ) } } else { null }, ) }
การติดตั้งใช้งานนี้จะปรากฏดังนี้เมื่อยกเลิกการเลือก
และจะปรากฏดังนี้เมื่อเลือกแล้ว
ชิปอินพุต
คุณสามารถใช้ InputChip
Composable เพื่อสร้างชิปที่มาจาก
การโต้ตอบของผู้ใช้ ตัวอย่างเช่น ในโปรแกรมรับส่งอีเมล เมื่อผู้ใช้กำลังเขียน
อีเมล ชิปอินพุตอาจแสดงถึงตัวบุคคลซึ่งมีที่อยู่ที่ผู้ใช้ได้ป้อนไว้
เป็น "to:" ด้วย
การใช้งานต่อไปนี้แสดงให้เห็นถึงชิปอินพุตที่มีอยู่แล้วใน รัฐที่เลือก ผู้ใช้ปิดชิปเมื่อกดชิป
@Composable fun InputChipExample( text: String, onDismiss: () -> Unit, ) { var enabled by remember { mutableStateOf(true) } if (!enabled) return InputChip( onClick = { onDismiss() enabled = !enabled }, label = { Text(text) }, selected = enabled, avatar = { Icon( Icons.Filled.Person, contentDescription = "Localized description", Modifier.size(InputChipDefaults.AvatarSize) ) }, trailingIcon = { Icon( Icons.Default.Close, contentDescription = "Localized description", Modifier.size(InputChipDefaults.AvatarSize) ) }, ) }
การติดตั้งใช้งานนี้จะปรากฏดังนี้
ชิปคำแนะนำ
SuggestionChip
Composable เป็นพื้นฐานที่สุดของ Composable ที่แสดงอยู่
ในหน้านี้ ทั้งในคำจำกัดความของ API และกรณีการใช้งานที่พบบ่อย คำแนะนำ
ชิปจะแสดงคำแนะนำที่สร้างขึ้นแบบไดนามิก ตัวอย่างเช่น ในแอปแชท AI คุณจะ
อาจใช้ชิปคำแนะนำเพื่อแสดงคำตอบที่เป็นไปได้สำหรับ
พิจารณาการใช้ SuggestionChip
นี้:
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
การติดตั้งใช้งานนี้จะปรากฏดังนี้
ชิปแบบยกขึ้น
ตัวอย่างทั้งหมดในเอกสารนี้ใช้ Composable ที่เป็นฐานที่คงที่ ลักษณะนี้ หากต้องการชิปที่มีลักษณะสูงขึ้น ให้ใช้ Composable จำนวน 3 รายการดังต่อไปนี้