ใน Jetpack Compose Glimmer คอมโพเนนต์ TitleChip ได้รับการออกแบบมาเพื่อ
แสดงป้ายกำกับแบบสั้นที่โต้ตอบไม่ได้สำหรับเนื้อหาที่เกี่ยวข้อง เช่น การ์ด ใช้ชิปชื่อเพื่อแสดงข้อมูลแบบย่อ เช่น ชื่อย่อ ชื่อ หรือสถานะ เนื่องจากชิปชื่อไม่สามารถโฟกัสหรือโต้ตอบได้ จึงมีบทบาทเป็นเพียง
ข้อมูลภายใน UI ของ Jetpack Compose Glimmer เช่น คุณอาจใส่ชิปชื่อที่มีป้ายกำกับว่า "ส่วนผสม" ไว้ข้างรายการส่วนผสมที่เลื่อนได้
ตัวอย่างพื้นฐาน: แสดงชิปชื่อย่อ
คุณสร้างชิปชื่อย่อได้โดยใช้โค้ดเพียงเล็กน้อย ดังนี้
TitleChip { Text("Messages") }
ตัวอย่างโดยละเอียด: แสดงชิปชื่อพร้อมการ์ด
หากต้องการใช้ชิปชื่อกับคอมโพเนนต์อื่น ให้วางชิปชื่อ
TitleChipDefaults.AssociatedContentSpacing เหนือคอมโพเนนต์อื่นใน
Composable โค้ดต่อไปนี้แสดงวิธีใช้ชิปชื่อกับการ์ด
@Composable
fun TitleChipExample() {
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")
}
}
}
ประเด็นสำคัญเกี่ยวกับโค้ด
Spacerมีความสูงคงที่เพื่อให้มีระยะห่างแนวตั้งที่ถูกต้อง ซึ่งกำหนดโดยTitleChipDefaults.AssociatedContentSpacingระหว่างคอมโพเนนต์ทั้ง 2