คอมโพสิเบิล 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
ดูการเลื่อน
สำหรับข้อมูลเพิ่มเติม