Card

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

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

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

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

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

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

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

หมายเหตุ: โดยค่าเริ่มต้น Card จะรวมเนื้อหาไว้ใน Composable Column และวางแต่ละรายการไว้ในการ์ดด้านล่างรายการก่อนหน้า

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

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

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

• elevation: เพิ่มเงาให้กับคอมโพเนนต์ที่ทำให้ดูเหมือนลอยอยู่เหนือพื้นหลัง
• colors: ใช้ประเภท CardColors เพื่อตั้งค่าสีเริ่มต้นของทั้งคอนเทนเนอร์และองค์ประกอบย่อย
• enabled: หากคุณส่ง false สำหรับพารามิเตอร์นี้ การ์ดจะปรากฏเป็นปิดใช้และไม่ตอบสนองต่อการป้อนข้อมูลของผู้ใช้
• onClick: โดยปกติแล้ว Card จะไม่ยอมรับกิจกรรมการคลิก ดังนั้น Overload หลักที่คุณควรทราบคือ Overload ที่กำหนดพารามิเตอร์ 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 ตัวอย่างการ์ดที่กรอกข้อมูลแล้ว

การ์ดที่ยกระดับ

ข้อมูลโค้ดต่อไปนี้แสดงวิธีติดตั้งใช้งานการ์ดที่ยกระดับ ใช้ 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 ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบของ Scroll

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

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