Tombol tersegmentasi

Gunakan tombol tersegmentasi untuk memungkinkan pengguna memilih dari sekumpulan opsi, berdampingan. Ada dua jenis tombol tersegmentasi:

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

Permukaan API

Gunakan tata letak SingleChoiceSegmentedButtonRow dan MultiChoiceSegmentedButtonRow untuk membuat tombol tersegmentasi. Tata letak ini memposisikan dan mengubah ukuran SegmentedButtons dengan benar, serta berbagi parameter kunci berikut:

• space: Menyesuaikan tumpang tindih antara tombol.
• content: Berisi konten baris tombol tersegmentasi, yang biasanya merupakan 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-poin penting tentang kode

• Menginisialisasi variabel selectedIndex menggunakan remember dan mutableIntStateOf untuk melacak indeks tombol yang dipilih.
• Menentukan daftar options yang mewakili 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 pilihan ganda

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-poin penting tentang kode

• Kode ini menginisialisasi variabel selectedOptions menggunakan remember dan mutableStateListOf. Hal ini melacak status pilihan setiap tombol.
• Kode ini menggunakan MultiChoiceSegmentedButtonRow untuk memuat tombol.
• Di dalam loop forEachIndexed, kode ini membuat SegmentedButton untuk setiap opsi:
  • shape menentukan bentuk tombol berdasarkan indeksnya dan jumlah total opsi.
  • checked menetapkan status tombol yang dicentang berdasarkan nilai yang sesuai di selectedOptions.
  • onCheckedChange mengalihkan status pilihan item 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