ปุ่มแบ่งกลุ่ม

ใช้ปุ่มแบบแบ่งส่วนเพื่อให้ผู้ใช้เลือกจากชุดตัวเลือกที่แสดงคู่กัน ปุ่มแบ่งกลุ่มมี 2 ประเภท ได้แก่

  • ปุ่มเลือกรายการเดียว: อนุญาตให้ผู้ใช้เลือกตัวเลือกเดียว
  • ปุ่มเลือกหลายรายการ: ช่วยให้ผู้ใช้เลือกได้ 2-5 รายการ สำหรับตัวเลือกที่ซับซ้อนมากขึ้นหรือมีมากกว่า 5 รายการ ให้ใช้ชิป
คอมโพเนนต์ปุ่มแบบแบ่งส่วนจะปรากฏขึ้น ปุ่มแรกอนุญาตให้เลือกรายการเดียว ส่วนปุ่มที่ 2 อนุญาตให้เลือกหลายรายการ
รูปที่ 1 ปุ่มเลือกรายการเดียว (1) และปุ่มเลือกหลายรายการ (2)

แพลตฟอร์ม API

ใช้เลย์เอาต์ SingleChoiceSegmentedButtonRow และ MultiChoiceSegmentedButtonRow เพื่อสร้างปุ่มแบบแบ่งกลุ่ม เลย์เอาต์เหล่านี้ช่วยให้มั่นใจได้ว่า SegmentedButton จะอยู่ในตําแหน่งและมีขนาดถูกต้อง รวมถึงแชร์พารามิเตอร์หลักต่อไปนี้

  • space: ปรับการซ้อนทับระหว่างปุ่ม
  • content: มีเนื้อหาของแถวปุ่มที่แบ่งกลุ่ม ซึ่งโดยปกติจะเป็นลําดับของ SegmentedButton

สร้างปุ่มแบบแยกส่วนที่เลือกรายการเดียว

ตัวอย่างนี้แสดงวิธีสร้างปุ่มแบบเลือกรายการเดียวที่มีการแบ่งกลุ่ม

@Composable
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val options = listOf("Day", "Month", "Week")

    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex,
                label = { Text(label) }
            )
        }
    }
}
SegmentedButton.kt

ประเด็นสำคัญเกี่ยวกับรหัส

  • เริ่มต้นตัวแปร selectedIndex โดยใช้ remember และ mutableIntStateOf เพื่อติดตามดัชนีปุ่มที่เลือกอยู่ในปัจจุบัน
  • กำหนดรายการ options ที่แสดงป้ายกำกับปุ่ม
  • SingleChoiceSegmentedButtonRow ช่วยให้เลือกได้เพียงปุ่มเดียว
  • สร้าง SegmentedButton สำหรับแต่ละตัวเลือกภายในลูป forEachIndexed ดังนี้
    • shape กำหนดรูปร่างของปุ่มตามดัชนีและจํานวนตัวเลือกทั้งหมดโดยใช้ SegmentedButtonDefaults.itemShape
    • onClick จะอัปเดต selectedIndex ด้วยดัชนีของปุ่มที่คลิก
    • selected ตั้งค่าสถานะการเลือกของปุ่มตาม selectedIndex
    • label แสดงป้ายกำกับปุ่มโดยใช้ Composable Text

ผลลัพธ์

คอมโพเนนต์ปุ่มที่แบ่งกลุ่มพร้อมตัวเลือกวัน เดือน และสัปดาห์จะปรากฏขึ้น ขณะนี้ระบบเลือกตัวเลือกวันไว้
รูปที่ 2 ปุ่มเลือกรายการเดียวที่เลือก 1 ตัวเลือก

สร้างปุ่มที่มีการแบ่งกลุ่มแบบเลือกหลายรายการ

ตัวอย่างนี้แสดงวิธีสร้างปุ่มแบบแบ่งกลุ่มแบบหลายตัวเลือกที่มีไอคอนซึ่งช่วยให้ผู้ใช้เลือกตัวเลือกได้หลายรายการ

@Composable
fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {
    val selectedOptions = remember {
        mutableStateListOf(false, false, false)
    }
    val options = listOf("Walk", "Ride", "Drive")

    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                checked = selectedOptions[index],
                onCheckedChange = {
                    selectedOptions[index] = !selectedOptions[index]
                },
                icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) },
                label = {
                    when (label) {
                        "Walk" -> Icon(
                            imageVector =
                            Icons.AutoMirrored.Filled.DirectionsWalk,
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsBus,
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsCar,
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}
SegmentedButton.kt

ประเด็นสำคัญเกี่ยวกับรหัส

  • โค้ดจะเริ่มต้นตัวแปร selectedOptions โดยใช้ remember และ mutableStateListOf ซึ่งจะติดตามสถานะที่เลือกของแต่ละปุ่ม
  • โค้ดใช้ MultiChoiceSegmentedButtonRow เพื่อบรรจุปุ่ม
  • ภายในลูป forEachIndexed โค้ดจะสร้าง SegmentedButton สำหรับแต่ละตัวเลือก ดังนี้
    • shape กำหนดรูปร่างของปุ่มตามดัชนีและจำนวนตัวเลือกทั้งหมด
    • checked จะตั้งค่าสถานะการเลือกของปุ่มตามค่าที่เกี่ยวข้องใน selectedOptions
    • onCheckedChange สลับสถานะที่เลือกของรายการที่เกี่ยวข้องใน selectedOptions เมื่อมีการคลิกปุ่ม
    • icon แสดงไอคอนตาม SegmentedButtonDefaults.Icon และสถานะการเลือกของปุ่ม
    • label แสดงไอคอนที่สอดคล้องกับป้ายกำกับโดยใช้ Composable Icon ที่มีเวกเตอร์รูปภาพและคำอธิบายเนื้อหาที่เหมาะสม

ผลลัพธ์

คอมโพเนนต์ปุ่มแบบแบ่งกลุ่มที่มีตัวเลือกเดิน นั่งรถ และขับรถจะปรากฏขึ้น ขณะนี้ระบบเลือกตัวเลือกเดินและนั่งรถไว้
รูปที่ 2 ปุ่มแบบแบ่งส่วนแบบเลือกหลายรายการที่เลือก 2 ตัวเลือก

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