หน้านี้ได้รับการแปลโดย Cloud Translation API

Card

Composable ของ Card ทำหน้าที่เป็นคอนเทนเนอร์ดีไซน์ Material สำหรับ UI ของคุณ โดยทั่วไปแล้ว การ์ดจะนำเสนอเนื้อหาเดียวที่สัมพันธ์กัน รายการต่อไปนี้คือ ตัวอย่างบางส่วนของตำแหน่งที่อาจใช้การ์ดได้

ผลิตภัณฑ์ในแอปช็อปปิ้ง
เนื้อหาข่าวในแอปข่าว
ข้อความในแอปการสื่อสาร

แต่มุ่งเน้นไปที่การนำเสนอเนื้อหาชิ้นเดียวที่โดดเด่น Card จากคอนเทนเนอร์อื่นๆ เช่น Scaffold ระบุโครงสร้างทั่วไป กับทั้งหน้าจอ โดยทั่วไปการ์ดคือองค์ประกอบ UI ที่เล็กกว่าภายใน ขณะที่คอมโพเนนต์การออกแบบ เช่น Column หรือ Row จะมีลักษณะเรียบง่าย และ API ทั่วไปมากขึ้น

การ์ดที่ยกสูงขึ้นที่มีข้อความและไอคอน — **รูปที่ 1** ตัวอย่างการ์ดที่มีข้อความและไอคอนปรากฏขึ้น

การติดตั้งใช้งานขั้นพื้นฐาน

Card มีลักษณะการทํางานคล้ายกับคอนเทนเนอร์อื่นๆ ใน Compose คุณประกาศเนื้อหาตาม โดยเรียก Composable อื่นภายในนั้น ตัวอย่างเช่น ลองพิจารณาว่า Card มีแอตทริบิวต์ การเรียก Text ในตัวอย่างขั้นต่ำต่อไปนี้:

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

การติดตั้งใช้งานขั้นสูง

ดูข้อมูลอ้างอิงสำหรับคำจำกัดความของ API ของ Card ซึ่งอธิบาย ที่ช่วยให้คุณปรับแต่งรูปลักษณ์และลักษณะการทำงานของ คอมโพเนนต์

พารามิเตอร์หลักที่ควรทราบมีดังต่อไปนี้

elevation: เพิ่มเงาลงในคอมโพเนนต์ที่ทำให้ปรากฏ ลอยอยู่เหนือพื้นหลัง
colors: ใช้ประเภท CardColors เพื่อตั้งค่าสีเริ่มต้นของทั้ง 2 รูปแบบ คอนเทนเนอร์และองค์ประกอบย่อยอื่นๆ
enabled: หากคุณส่ง false สำหรับพารามิเตอร์นี้ การ์ดจะปรากฏเป็น ปิดใช้งานและไม่ตอบสนองต่อข้อมูลจากผู้ใช้
onClick: โดยปกติแล้ว Card จะไม่ยอมรับกิจกรรมการคลิก ด้วยเหตุนี้ การทำงานหนักเกินไปที่ควรทราบคือ พารามิเตอร์ onClick คุณควรใช้งานโอเวอร์โหลดนี้ถ้าต้องการ การใช้ Card เพื่อตอบสนองต่อข่าวจากผู้ใช้

ตัวอย่างต่อไปนี้แสดงวิธีที่คุณอาจใช้พารามิเตอร์เหล่านี้ รวมถึง พารามิเตอร์ทั่วไปอื่นๆ เช่น shape และ modifier

บัตรที่กรอกข้อมูล

ต่อไปนี้คือตัวอย่างวิธีการใช้การ์ดที่มีการกรอกข้อมูล

คีย์ในที่นี้คือการใช้พร็อพเพอร์ตี้ colors เพื่อเปลี่ยนแปลง สี

@Composable
fun FilledCardExample() {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant,
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Filled",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}Card.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้

การ์ดจะเติมสีของรายละเอียดปลีกย่อยของพื้นผิวจากธีมวัสดุ — **รูปที่ 2** ตัวอย่างการ์ดที่กรอกข้อมูลไว้

การ์ดแบบยกระดับ

ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้งานการ์ดที่มีการยกระดับ ใช้เมนู ElevatedCard สำหรับ Composable โดยเฉพาะ

คุณสามารถใช้พร็อพเพอร์ตี้ elevation เพื่อควบคุมลักษณะที่ปรากฏของระดับความสูงและ เงาที่เกิดขึ้น

@Composable
fun ElevatedCardExample() {
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Elevated",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}Card.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้

การ์ดลอยอยู่เหนือพื้นหลังของแอปโดยมีเงา — **รูปที่ 3** ตัวอย่างการ์ดแบบยกระดับ

การ์ดแบบเติมขอบ

ต่อไปนี้คือตัวอย่างของการ์ดเติมขอบ ใช้คอลัมน์เฉพาะ OutlinedCard Composable

@Composable
fun OutlinedCardExample() {
    OutlinedCard(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface,
        ),
        border = BorderStroke(1.dp, Color.Black),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Outlined",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}Card.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้

การ์ดจะมีเส้นขอบสีดำ — **รูปที่ 4** ตัวอย่างการ์ดที่มีเส้นขอบ

ข้อจำกัด

การ์ดจะไม่ได้มาพร้อมกับการเลื่อนหรือปิดการทำงานที่แฝงมา แต่สามารถรวมเข้ากับ Composable ที่นำเสนอคุณลักษณะเหล่านี้ เช่น หากต้องการใช้การปัดเพื่อปิด บนการ์ด ให้ผสานรวมกับ SwipeToDismiss Composable วิธีผสานรวม เมื่อมีการเลื่อน ให้ใช้ตัวปรับแต่งการเลื่อน เช่น verticalScroll ดูการเลื่อน สำหรับข้อมูลเพิ่มเติม

แหล่งข้อมูลเพิ่มเติม

เอกสาร UI เนื้อหา