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

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

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

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

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

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

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