Tombol tersegmentasi

Gunakan tombol tersegmentasi untuk memungkinkan pengguna memilih dari serangkaian opsi secara berdampingan. Ada dua jenis tombol tersegmentasi:

• Tombol pilihan tunggal: Memungkinkan pengguna memilih satu opsi.
• Tombol multi-pilihan: Memungkinkan pengguna memilih antara dua hingga lima item. Untuk pilihan yang lebih kompleks, atau lebih dari lima item, gunakan chip.

Platform API

Gunakan tata letak SingleChoiceSegmentedButtonRow dan MultiChoiceSegmentedButtonRow untuk membuat tombol tersegmentasi. Tata letak ini memastikan bahwa SegmentedButton diposisikan dan diukur dengan benar, dan berbagi parameter utama berikut:

• space: Menyesuaikan tumpang-tindih antartombol.
• content: Berisi konten baris tombol yang tersegmentasi, yang biasanya merupakan urutan SegmentedButton.

Membuat tombol bersegmen pilihan tunggal

Contoh ini menunjukkan cara membuat tombol tersegmentasi pilihan tunggal:

@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

Poin penting tentang kode

• Melakukan inisialisasi variabel selectedIndex menggunakan remember dan mutableIntStateOf untuk melacak indeks tombol yang saat ini dipilih.
• Menentukan daftar options yang mewakili label tombol.
• SingleChoiceSegmentedButtonRow memastikan hanya satu tombol yang dapat dipilih.
• Membuat SegmentedButton untuk setiap opsi, di dalam loop forEachIndexed:
  • shape menentukan bentuk tombol berdasarkan indeksnya dan jumlah total opsi menggunakan SegmentedButtonDefaults.itemShape.
  • onClick memperbarui selectedIndex dengan indeks tombol yang diklik.
  • selected menetapkan status pilihan tombol berdasarkan selectedIndex.
  • label menampilkan label tombol menggunakan composable Text.

Hasil

Membuat tombol bersegmen multi-pilihan

Contoh ini menunjukkan cara membuat tombol tersegmentasi multi-pilihan dengan ikon yang memungkinkan pengguna memilih beberapa opsi:

@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

Poin penting tentang kode

• Kode ini melakukan inisialisasi variabel selectedOptions menggunakan remember dan mutableStateListOf. Tindakan ini melacak status yang dipilih dari setiap tombol.
• Kode menggunakan MultiChoiceSegmentedButtonRow untuk memuat tombol.
• Di dalam loop forEachIndexed, kode membuat SegmentedButton untuk setiap opsi:
  • shape menentukan bentuk tombol berdasarkan indeksnya dan jumlah total opsi.
  • checked menetapkan status dicentang tombol berdasarkan nilai yang sesuai di selectedOptions.
  • onCheckedChange mengalihkan status yang dipilih dari item yang sesuai di selectedOptions saat tombol diklik.
  • icon menampilkan ikon berdasarkan SegmentedButtonDefaults.Icon dan status dicentang tombol.
  • label menampilkan ikon yang sesuai dengan label, menggunakan composable Icon dengan vektor gambar dan deskripsi konten yang sesuai.

Hasil

Referensi lainnya

• Materi 3: Tombol tersegmentasi