Card

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

  • ผลิตภัณฑ์ในแอป Shopping
  • ข่าวในแอปข่าว
  • ข้อความในแอปการสื่อสาร

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

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

การใช้งานพื้นฐาน

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

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

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

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

พารามิเตอร์สำคัญบางรายการที่ควรทราบมีดังนี้

  • elevation: เพิ่มเงาให้กับคอมโพเนนต์เพื่อให้ดูสูงขึ้นจากพื้นหลัง
  • colors: ใช้ประเภท CardColors เพื่อกำหนดสีเริ่มต้นของทั้งคอนเทนเนอร์และองค์ประกอบย่อย
  • 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

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

การ์ดจะเต็มไปด้วยสีของตัวแปรพื้นผิวจากธีม Material
รูปที่ 2 ตัวอย่างการ์ดแบบเติมสี

การ์ดแบบยกสูง

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

คุณสามารถใช้พร็อพเพอร์ตี้ 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 ตัวอย่างการ์ดแบบยกสูง

การ์ดแบบมีเส้นขอบ

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

@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 ที่มีฟีเจอร์เหล่านี้ได้ ตัวอย่างเช่น หากต้องการใช้งานการปัดเพื่อปิด ในการ์ด ให้ผสานรวมการ์ดเข้ากับ Composable SwipeToDismiss หากต้องการผสานรวมกับ การเลื่อน ให้ใช้ตัวปรับแต่งการเลื่อน เช่น verticalScroll ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบเกี่ยวกับการเลื่อน

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