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

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

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

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

รูปที่ 1 ตัวอย่างการ์ดสไตล์ต่างๆ ใน Jetpack Compose Glimmer

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

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

สล็อต คำอธิบาย

ส่วนหัว

ส่วนบนของการ์ดที่ออกแบบมาเพื่อเก็บรูปภาพ

ชื่อและคำบรรยาย

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

ไอคอนนำ

ไอคอนที่ไม่บังคับ (โดยปกติจะเป็น Icon) ที่ปรากฏที่จุดเริ่มต้นของพื้นที่เนื้อหาของการ์ด

ไอคอนต่อท้าย

ไอคอนที่ไม่บังคับที่ปรากฏที่จุดสิ้นสุดของพื้นที่เนื้อหาของการ์ด

การทำงาน

สล็อตสำหรับองค์ประกอบแบบอินเทอร์แอกทีฟหลัก เช่น Button

เนื้อหาหลัก

ส่วนเนื้อหาหลักของการ์ดสำหรับ Text หรือเนื้อหา

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

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

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

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

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

โค้ดต่อไปนี้จะสร้างการ์ดพื้นฐาน

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}

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

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

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}

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