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

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

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

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

แว่นตา AI

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

ใน Glimmer ของ Jetpack Compose คอมโพเนนต์ TitleChip ออกแบบมาเพื่อ แสดงป้ายกำกับแบบสั้นที่ไม่มีการโต้ตอบสำหรับเนื้อหาที่เชื่อมโยง เช่น การ์ด ใช้ชิปชื่อเพื่อแสดงข้อมูลแบบย่อ เช่น ชื่อย่อ ชื่อ หรือสถานะ เนื่องจากชิปชื่อไม่สามารถโฟกัสหรือโต้ตอบได้ จึงมีบทบาทเป็นเพียง ข้อมูลภายใน UI แบบกะพริบของ Jetpack Compose เช่น คุณอาจใส่ชิปชื่อที่มีป้ายกำกับว่า "ส่วนผสม" ข้างรายการส่วนผสมที่เลื่อนได้

รูปที่ 1 ตัวอย่างชิปชื่อที่มีสไตล์แตกต่างกันใน Glimmer ของ Jetpack Compose

ชิปชื่อเริ่มต้นและชิปชื่อแบบปักหมุดที่แสดง ชิปชื่อแบบคงที่จะแสดง พร้อมโครงร่าง

1. ป้ายกำกับชิปชื่อ
2. ไอคอนหรือเอนทิตีนำหน้าที่ไม่บังคับ

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

คุณสร้างชิปชื่อย่อได้โดยใช้โค้ดเพียงเล็กน้อย ดังนี้

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