คอมโพสิเบิล Card
จะทําหน้าที่เป็นคอนเทนเนอร์ Material Design สําหรับ UI
โดยทั่วไปแล้ว การ์ดจะนำเสนอเนื้อหาเดียวที่สัมพันธ์กัน รายการต่อไปนี้คือ
ตัวอย่างบางส่วนของตำแหน่งที่อาจใช้การ์ดได้
- ผลิตภัณฑ์ในแอปช็อปปิ้ง
- เนื้อหาข่าวในแอปข่าว
- ข้อความในแอปการสื่อสาร
แต่มุ่งเน้นไปที่การนำเสนอเนื้อหาชิ้นเดียวที่โดดเด่น
Card
จากคอนเทนเนอร์อื่นๆ เช่น Scaffold
ให้โครงสร้างทั่วไปสำหรับทั้งหน้าจอ โดยทั่วไปการ์ดคือองค์ประกอบ UI ที่เล็กกว่าภายใน
ขณะที่คอมโพเนนต์การออกแบบ เช่น Column
หรือ Row
จะมีลักษณะเรียบง่าย
และ API ทั่วไปมากขึ้น
การติดตั้งใช้งานขั้นพื้นฐาน
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, ) } }
การใช้งานนี้จะปรากฏดังนี้
การ์ดแบบยกระดับ
ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้งานการ์ดที่มีการยกระดับ ใช้เมนู
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, ) } }
การติดตั้งใช้งานนี้จะปรากฏดังนี้
การ์ดแบบเติมขอบ
ต่อไปนี้คือตัวอย่างของการ์ดเติมขอบ ใช้คอมโพสิเบิล 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, ) } }
การติดตั้งใช้งานนี้จะปรากฏดังนี้
ข้อจำกัด
การ์ดจะไม่ได้มาพร้อมกับการเลื่อนหรือปิดการทำงานที่แฝงมา แต่สามารถรวมเข้ากับ
Composable ที่นำเสนอคุณลักษณะเหล่านี้ เช่น หากต้องการใช้การปัดเพื่อปิด
บนการ์ด ให้ผสานรวมกับ SwipeToDismiss
Composable หากต้องการผสานรวมกับการเลื่อน ให้ใช้ตัวปรับการเลื่อน เช่น verticalScroll
ดูการเลื่อน
สำหรับข้อมูลเพิ่มเติม