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 memosisikan dan mengukur SegmentedButtons dengan benar, serta berbagi parameter utama berikut:

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

Membuat tombol tersegmentasi 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

• Menginisialisasi variabel selectedIndex menggunakan remember dan mutableIntStateOf untuk melacak indeks tombol yang dipilih.
• Menentukan daftar options yang merepresentasikan label tombol.
• SingleChoiceSegmentedButtonRow memungkinkan Anda memilih hanya satu tombol.
• 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 tersegmentasi multi-pilihan

Contoh ini menunjukkan cara membuat tombol tersegmentasi pilihan ganda 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 menginisialisasi variabel selectedOptions menggunakan remember dan mutableStateListOf. Ini melacak status tombol yang dipilih.
• Kode menggunakan MultiChoiceSegmentedButtonRow untuk memuat tombol.
• Di dalam loop forEachIndexed, kode membuat SegmentedButton untuk setiap opsi:
  • shape menentukan bentuk tombol berdasarkan indeks dan jumlah total opsi.
  • checked menetapkan status tombol yang dicentang berdasarkan nilai yang sesuai di selectedOptions.
  • onCheckedChange mengalihkan status item yang dipilih yang sesuai di selectedOptions saat tombol diklik.
  • icon menampilkan ikon berdasarkan SegmentedButtonDefaults.Icon dan status tombol yang dicentang.
  • label menampilkan ikon yang sesuai dengan label, menggunakan composable Icon dengan vektor gambar dan deskripsi konten yang sesuai.

Hasil

Referensi lainnya

• Material 3: Tombol tersegmentasi