ชิปชื่อใน Glimmer ของ Jetpack Compose

อุปกรณ์ XR ที่รองรับ

คำแนะนำนี้จะช่วยคุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทนี้

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ใน Jetpack Compose Glimmer คอมโพเนนต์ TitleChip เป็นคอมโพเนนต์แบบไม่โต้ตอบ ซึ่งให้บริบทหรือการติดป้ายกำกับสั้นๆ สำหรับเนื้อหาที่เกี่ยวข้อง เช่น Card หรือ VerticalList

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

ตัวอย่างพื้นฐาน: สร้างชิปชื่อย่อ

โค้ดต่อไปนี้จะสร้างชิปชื่อพื้นฐาน

@Composable
fun TitleChipSample() {
    TitleChip { Text("Messages") }
}
TitleChipSamples.kt

Example: Create a title chip with a card

To use a title chip with another component, place the title chip TitleChipDefaults.associatedContentSpacing above the other component in the composable. The following code creates a title chip with a card:

@Composable
fun TitleChipWithCardSample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.associatedContentSpacing))
        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}
TitleChipSamples.kt

ประเด็นสำคัญเกี่ยวกับโค้ด

• ชิปชื่อจะอยู่กึ่งกลางในแนวนอน ซึ่งเป็นการจัดแนวปกติสำหรับ ชิปชื่อที่วางไว้เหนือการ์ด
• Spacer มีความสูงคงที่เพื่อให้มีระยะห่างแนวตั้งที่เหมาะสมระหว่างคอมโพเนนต์ทั้ง 2 รายการ ซึ่งกำหนดโดยใช้ TitleChipDefaults.associatedContentSpacing
• ใช้ leadingIcon ที่ไม่บังคับเพื่อเพิ่มบริบทภาพเพิ่มเติมก่อนเนื้อหาข้อความ
• ชิปชื่อจะใช้รูปแบบ caption กับข้อความโดยอัตโนมัติ
• ชิปชื่อไม่สามารถโต้ตอบได้ หากต้องการป้ายกำกับที่คลิกได้ ให้ใช้ a Button หรือคอมโพเนนต์แบบอินเทอร์แอกทีฟอื่นๆ