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

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

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

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

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

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

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

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

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

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

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

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

@Composable
fun TitleChipWithIconSample() {
    TitleChip {
        Icon(FavoriteIcon, contentDescription = "Favorite")
        Text("Favorites")
    }
}
TitleChipSample.kt

ตัวอย่าง: สร้างชิปชื่อพร้อมการ์ด

หากต้องการใช้ชิปชื่อกับคอมโพเนนต์อื่น ให้วางชิปชื่อ TitleChipDefaults.associatedContentSpacingไว้เหนือคอมโพเนนต์อื่นใน คอมโพสได้ โค้ดต่อไปนี้จะสร้างชิปชื่อพร้อมการ์ด

@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")
        }
    }
}
TitleChipSample.kt

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

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