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

แพลตฟอร์ม 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
loop ดังนี้shape
กำหนดรูปร่างของปุ่มตามดัชนีและจํานวนตัวเลือกทั้งหมดโดยใช้SegmentedButtonDefaults.itemShape
onClick
จะอัปเดตselectedIndex
ด้วยดัชนีของปุ่มที่คลิกselected
ตั้งค่าสถานะการเลือกของปุ่มตามselectedIndex
label
แสดงป้ายกำกับปุ่มโดยใช้ ComposableText
ผลลัพธ์

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

แหล่งข้อมูลเพิ่มเติม
- วัสดุที่ 3: ปุ่มแบ่งกลุ่ม