ตัวแบ่ง

ตัวแบ่งคือเส้นบางๆ ที่แยกรายการในรายการหรือ คอนเทนเนอร์อื่นๆ คุณสามารถใช้ตัวแบ่งในแอปได้โดยใช้ Composable HorizontalDivider และ VerticalDivider

แพลตฟอร์ม API

คอมโพเนนต์ทั้ง 2 รายการมีพารามิเตอร์สำหรับแก้ไขลักษณะที่ปรากฏ ดังนี้

  • 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 รายการ

หน้าจอแอป Android แสดงรายการข้อความ 2 รายการ ได้แก่ "รายการแรกในรายการ" และ "รายการที่ 2 ในรายการ" โดยคั่นด้วยเส้นแนวนอนบางๆ
รูปที่ 1 ตัวแบ่งแนวนอนที่แยกคอมโพเนนต์ข้อความ 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 รายการ

หน้าจอแอป Android แสดงรายการข้อความ 2 รายการ ได้แก่ "รายการแรกในแถว" และ "รายการที่สองในแถว" โดยคั่นด้วยเส้นแนวตั้งบางๆ
รูปที่ 2 ตัวแบ่งแนวตั้งที่แยกคอมโพเนนต์ข้อความ 2 รายการ

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