ตัวแบ่ง

เส้นแบ่ง คือเส้นบางๆ ที่แยกรายการต่างๆ ในรายการหรือช่องอื่นๆ คอนเทนเนอร์ คุณใช้ตัวแบ่งในแอปได้โดยใช้ 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")
    }
}
Divider.kt

การใช้งานนี้จะแสดงเส้นแนวนอนบางๆ ระหว่างองค์ประกอบข้อความ 2 รายการ ดังนี้

วันที่

ตัวอย่างเส้นแบ่งแนวตั้ง

ตัวอย่างต่อไปนี้แสดงการใช้งาน คอมโพเนนต์ 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")
    }
}
Divider.kt

การใช้งานนี้จะแสดงเส้นแนวตั้งบางๆ ระหว่างองค์ประกอบข้อความ 2 รายการ ดังนี้

วันที่

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

• HorizontalDivider
• VerticalDivider
• ดีไซน์ Material - ตัวแบ่ง