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

ใช้ปุ่มแบบแบ่งกลุ่มเพื่อให้ผู้ใช้เลือกจากชุดตัวเลือกที่อยู่เคียงข้างกัน ปุ่มแบบแบ่งกลุ่มมี 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 แสดงไอคอนที่สอดคล้องกับป้ายกำกับ โดยใช้ Composable Icon ที่มีเวกเตอร์รูปภาพและคำอธิบายเนื้อหาที่เหมาะสม

ผลลัพธ์

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

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