หน้านี้ได้รับการแปลโดย Cloud Translation API

ชิป

คอมโพเนนต์ Chip เป็นองค์ประกอบ UI แบบอินเทอร์แอกทีฟขนาดกะทัดรัด แสดงถึงความซับซ้อน เช่น รายชื่อติดต่อหรือแท็ก มักมีไอคอนและป้ายกำกับ สามารถทำได้ ตรวจสอบได้ ปิดได้ หรือคลิกได้

ชิปทั้ง 4 ประเภทและตำแหน่งที่คุณสามารถใช้ได้มีดังนี้

ช่วยเหลือ: แนะนำผู้ใช้ในระหว่างทำงาน มักปรากฏเป็น UI ชั่วคราว เพื่อตอบสนองต่อข้อมูลจากผู้ใช้ได้
กรอง: อนุญาตให้ผู้ใช้ปรับแต่งเนื้อหาจากชุดตัวเลือก สิ่งที่ทำได้ ถูกเลือกหรือยกเลิกการเลือกไว้ และอาจแสดงไอคอนเครื่องหมายถูกเมื่อเลือก
อินพุต: แสดงข้อมูลที่ได้จากผู้ใช้ เช่น รายการที่เลือกใน เมนู โดยสามารถมีไอคอนและข้อความ รวมทั้งมีเครื่องหมาย "X" เพื่อนำออก
การแนะนำ: ให้คำแนะนำแก่ผู้ใช้ตามข้อมูลล่าสุด กิจกรรมหรืออินพุต โดยปกติแล้วจะปรากฏใต้ช่องป้อนข้อมูลเพื่อแสดงข้อความแจ้งผู้ใช้ การดำเนินการ

ตัวอย่างคอมโพเนนต์ชิป 4 อย่างโดยไฮไลต์ลักษณะเฉพาะตัว — **รูปที่ 1** องค์ประกอบทั้ง 4 ชิป

แพลตฟอร์ม 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)
            )
        }
    )
}Chip.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้

ชิปผู้ช่วยที่ใช้งานง่าย — **รูปที่ 2** ชิปผู้ช่วย

ชิปตัวกรอง

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
        },
    )
}Chip.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้เมื่อยกเลิกการเลือก

ชิปตัวกรองที่ไม่ได้เลือก ไม่มีการตรวจสอบและพื้นหลังของแผน — **รูปที่ 3** ชิปตัวกรองที่ไม่ได้เลือก

และจะปรากฏดังนี้เมื่อเลือกแล้ว

ชิปตัวกรองที่เลือก โดยมีเครื่องหมายถูกและพื้นหลังเป็นสี — **รูปที่ 4** ชิปตัวกรองที่เลือก

ชิปอินพุต

คุณสามารถใช้ 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)
            )
        },
    )
}Chip.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้

ชิปอินพุตที่มีรูปโปรไฟล์และไอคอนต่อท้าย — **รูปที่ 5** ชิปอินพุต

ชิปคำแนะนำ

SuggestionChip Composable เป็นพื้นฐานที่สุดของ Composable ที่แสดงอยู่ ในหน้านี้ ทั้งในคำจำกัดความของ API และกรณีการใช้งานที่พบบ่อย คำแนะนำ ชิปจะแสดงคำแนะนำที่สร้างขึ้นแบบไดนามิก ตัวอย่างเช่น ในแอปแชท AI คุณ อาจใช้ชิปคำแนะนำเพื่อแสดงคำตอบที่เป็นไปได้สำหรับ

พิจารณาการใช้ SuggestionChip นี้:

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}Chip.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้

ชิปแบบยกขึ้น

ตัวอย่างทั้งหมดในเอกสารนี้ใช้ Composable ที่เป็นฐานที่คงที่ ลักษณะนี้ หากต้องการชิปที่มีลักษณะสูงขึ้น ให้ใช้ Composable จำนวน 3 รายการดังต่อไปนี้

แหล่งข้อมูลเพิ่มเติม

เอกสาร UI เนื้อหา