Card

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

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

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

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

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

Card ทำงานคล้ายกับคอนเทนเนอร์อื่นๆ ใน Compose คุณประกาศเนื้อหาของคอมโพสิเบิลได้โดยเรียกใช้คอมโพสิเบิลอื่นๆ ภายใน ตัวอย่างเช่น ลองพิจารณาวิธีที่ 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

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

การ์ดจะเต็มไปด้วยสีของตัวแปรพื้นผิวจากธีมวัสดุ
รูปที่ 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 ตัวอย่างการ์ดที่ยกระดับ

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

ต่อไปนี้เป็นตัวอย่างการ์ดที่มีเส้นขอบ ใช้ 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 ตัวอย่างการ์ดที่มีเส้นขอบ

ข้อจำกัด

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

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