การ์ดใน Glimmer ของ Jetpack Compose

อุปกรณ์ XR ที่ใช้ได้

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

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

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

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

โครงสร้างและการ์ด

การ์ด Glimmer ของ Jetpack Compose สร้างขึ้นจากองค์ประกอบเฉพาะหลายอย่าง ซึ่งช่วยให้คุณปรับแต่งเนื้อหาและเลย์เอาต์ได้

• ส่วนหัว: ส่วนบนของการ์ดที่ออกแบบมาเพื่อใส่รูปภาพ

• ชื่อและคำบรรยาย: ช่องข้อความเหล่านี้มีป้ายกำกับหลักและรอง สำหรับการ์ด

• ไอคอนนำ: ไอคอนที่ไม่บังคับซึ่งจะปรากฏที่จุดเริ่มต้นของ พื้นที่เนื้อหาของการ์ด

• ไอคอนต่อท้าย: ไอคอนที่ไม่บังคับซึ่งจะปรากฏที่ส่วนท้ายของพื้นที่เนื้อหา ของการ์ด

• การดำเนินการ: ช่องสำหรับองค์ประกอบแบบอินเทอร์แอกทีฟหลัก เช่น ปุ่ม ซึ่งจะช่วยให้ผู้ใช้ดำเนินการจากบัตรได้โดยตรง โดยช่องนี้จะ พร้อมใช้งานในการโอเวอร์โหลดที่แยกต่างหากของ Card composable

• เนื้อหาหลัก: ส่วนเนื้อหาหลักของการ์ด ซึ่งเป็นที่ที่คุณวางข้อความหลักหรือเนื้อหาอื่นๆ

ตัวอย่างพื้นฐาน: สร้างการ์ดพื้นฐาน

คุณสร้างการ์ดพื้นฐานได้โดยใช้โค้ดเพียงเล็กน้อย

Card { Text("This is a card") }

ตัวอย่างโดยละเอียด: แสดงการ์ดที่ซับซ้อน

โค้ดต่อไปนี้แสดงวิธีใช้ช่องหลายช่องร่วมกันเพื่อสร้างการ์ด นอกจากนี้ยังแสดงวิธีจับคู่ Card กับ TitleChip ด้วย

@Composable
fun SampleGlimmerCard() {
    val myHeaderImage = painterResource(id = R.drawable.header_image)
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
        Card(
            action = {
                Button(onClick = {}) {
                    Text("Action Button")
                }
            },
            header = {
                Image(
                    painter = myHeaderImage,
                    contentDescription = "Header image for the card",
                    contentScale = ContentScale.FillWidth
                )
            },
            title = { Text("Card Title") },
            subtitle = { Text("Card Subtitle") },
            leadingIcon = { FavoriteIcon, "Localized description" },
            trailingIcon = { FavoriteIcon, "Localized description" }
        ) {
            Text("A Jetpack Compose Glimmer Card using all available slots")
        }
    }
}

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

• แสดงวิธีใช้ประโยชน์จากองค์ประกอบการ์ดต่างๆ เช่น header, title, subtitle, leadingIcon และ action เพื่อ ปรับแต่งเนื้อหาและโครงสร้างของการ์ด
• แสดงตัวอย่างวิธีวาง TitleChip และใช้ Spacer