เส้นแบ่ง คือเส้นบางๆ ที่แยกรายการต่างๆ ในรายการหรือช่องอื่นๆ
คอนเทนเนอร์ คุณใช้ตัวแบ่งในแอปได้โดยใช้ HorizontalDivider
และ Composable จำนวน VerticalDivider
รายการ
HorizontalDivider
: แยกรายการในคอลัมน์VerticalDivider
: แยกรายการในแถว
แพลตฟอร์ม API
คอมโพเนนต์ทั้งสองมีพารามิเตอร์สำหรับการแก้ไขลักษณะที่ปรากฏ ดังนี้
thickness
: ใช้พารามิเตอร์นี้เพื่อระบุความหนาของตัวแบ่ง บรรทัดcolor
: ใช้พารามิเตอร์นี้เพื่อระบุสีของเส้นแบ่ง
ตัวอย่างเส้นแบ่งแนวนอน
ตัวอย่างต่อไปนี้แสดงการใช้งาน
คอมโพเนนต์ HorizontalDivider
โดยใช้พารามิเตอร์ thickness
เพื่อควบคุมพารามิเตอร์
ความสูงของเส้น:
@Composable fun HorizontalDividerExample() { Column( verticalArrangement = Arrangement.spacedBy(8.dp), ) { Text("First item in list") HorizontalDivider(thickness = 2.dp) Text("Second item in list") } }
การใช้งานนี้จะแสดงเส้นแนวนอนบางๆ ระหว่างองค์ประกอบข้อความ 2 รายการ ดังนี้
![หน้าจอแอป Android แสดงรายการข้อความ 2 รายการ "รายการแรกในรายการ" และ "รายการที่ 2 ในรายการ" คั่นด้วยเส้นแนวนอนบาง](https://developer.android.google.cn/static/develop/ui/compose/images/components/divider-horizontal.png?hl=th)
ตัวอย่างเส้นแบ่งแนวตั้ง
ตัวอย่างต่อไปนี้แสดงการใช้งาน
คอมโพเนนต์ VerticalDivider
ใช้พารามิเตอร์ color
เพื่อระบุ
สีของเส้น:
@Composable fun VerticalDividerExample() { Row( modifier = Modifier .fillMaxWidth() .height(IntrinsicSize.Min), horizontalArrangement = Arrangement.SpaceEvenly ) { Text("First item in row") VerticalDivider(color = MaterialTheme.colorScheme.secondary) Text("Second item in row") } }
การใช้งานนี้จะแสดงเส้นแนวตั้งบางๆ ระหว่างองค์ประกอบข้อความ 2 รายการ ดังนี้
![หน้าจอแอป Android แสดงรายการข้อความ 2 รายการ "รายการแรกในแถว" และ "รายการที่ 2 ในแถว" คั่นด้วยเส้นแนวตั้งบาง](https://developer.android.google.cn/static/develop/ui/compose/images/components/divider-vertical.png?hl=th)