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

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

  • ปุ่มเลือกรายการเดียว: ให้ผู้ใช้เลือก 1 ตัวเลือก
  • ปุ่มเลือกหลายรายการ: ให้ผู้ใช้เลือกได้ 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) }
            )
        }
    }
}

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

  • เริ่มต้นตัวแปร 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"
                        )
                    }
                }
            )
        }
    }
}

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

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

ผลลัพธ์

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

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