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

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

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

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

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

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

การ์ดสร้างขึ้นจากระบบพื้นผิว Jetpack Compose Glimmer จึงรับช่วงคุณสมบัติทางกายภาพ เช่น เอฟเฟกต์ความลึก การตัด และการไฮไลต์เส้นขอบที่สอดคล้องกัน

โครงสร้างและสล็อต

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

ค่าเริ่มต้นของการ์ด

ค่าเริ่มต้นต่อไปนี้ใช้กับการ์ด

• ความกว้าง: การ์ดจะเติมความกว้างสูงสุดที่ใช้ได้ของจอแสดงผลเพื่อเพิ่ม ความชัดเจนในการอ่านบนแว่นตาที่มีจอแสดงผล
• ความสูงต่ำสุด: 80.dp
• ระยะห่างแนวตั้งของข้อความ: 3.dp
• รูปร่างส่วนหัว: ใช้ RoundedCornerShape ที่มีมุม 24.dp
• ระยะห่างจากขอบเนื้อหา: ค่าเริ่มต้นคือ GlimmerTheme.componentSpacingValues.medium ซึ่งจะส่งผลต่อระยะห่างจากขอบด้านนอกสุดรอบรูปภาพส่วนหัวและคอนเทนเนอร์เนื้อหา
• รูปร่าง: ค่าเริ่มต้นคือ GlimmerTheme.shapes.medium

• การแสดงข้อความ: ใช้ค่าเริ่มต้นจาก GlimmerTheme.typography สำหรับสล็อตต่อไปนี้

  • ชื่อ: bodyMedium
  • คำบรรยาย: caption
  • เนื้อหาหลัก: bodySmall

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

โค้ดต่อไปนี้แสดงโค้ดขั้นต่ำที่จำเป็นในการสร้างการ์ด

Card { Text("This is a card") }
CardSamples.kt

ตัวอย่าง: การ์ดที่มีหลายสล็อต

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

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}
CardSamples.kt

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

• แสดงวิธีใช้องค์ประกอบต่างๆ ของการ์ด เช่น title, subtitle และ leadingIcon เพื่อปรับแต่งเนื้อหาและ โครงสร้างของการ์ด
• ใช้การโอเวอร์โหลด Card กับ onClick เพื่อทำให้พื้นผิวการ์ดทั้งหมด โต้ตอบได้

การ์ดการดำเนินการ

หากต้องการรวมปุ่มการดำเนินการกับการ์ด ให้ใช้ ActionCard การ์ดการดำเนินการมีองค์ประกอบเดียวกับการ์ดมาตรฐาน และยังมีพารามิเตอร์ action เพิ่มเติมที่กำหนดปุ่มด้านล่าง

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

โค้ดนี้แสดงวิธีสร้าง ActionCard

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}
CardSamples.kt

ตัวอย่าง: การ์ดการดำเนินการที่มีไอคอน

โค้ดนี้แสดงวิธีสร้าง ActionCard ที่ซับซ้อนมากขึ้นด้วยไอคอน

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}
CardSamples.kt