Membuat panel aplikasi atas dinamis

Panduan ini menjelaskan cara membuat panel aplikasi atas dinamis di Compose yang mengubah opsinya saat item dipilih dari daftar. Anda dapat mengubah judul dan tindakan pada panel aplikasi atas berdasarkan status pilihan.

Menerapkan perilaku panel aplikasi atas dinamis

Kode ini menentukan fungsi composable untuk panel aplikasi atas yang berubah berdasarkan pemilihan item:

@Composable
fun AppBarSelectionActions(
    selectedItems: Set<Int>,
    modifier: Modifier = Modifier,
) {
    val hasSelection = selectedItems.isNotEmpty()
    val topBarText = if (hasSelection) {
        "Selected ${selectedItems.size} items"
    } else {
        "List of items"
    }

    TopAppBar(
        title = {
            Text(topBarText)
        },
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer,
            titleContentColor = MaterialTheme.colorScheme.primary,
        ),
        actions = {
            if (hasSelection) {
                IconButton(onClick = {
                    /* click action */
                }) {
                    Icon(
                        imageVector = Icons.Filled.Share,
                        contentDescription = "Share items"
                    )
                }
            }
        },
        modifier = modifier
    )
}
AppBar.kt

Poin penting tentang kode

  • AppBarSelectionActions menerima Set indeks item yang dipilih.
  • topBarText berubah bergantung pada apakah Anda memilih item.
    • Saat Anda memilih item, teks yang menjelaskan jumlah item yang dipilih akan muncul di TopAppBar.
    • Jika Anda tidak memilih item apa pun, topBarText adalah "Daftar item".
  • Blok actions menentukan tindakan yang Anda tampilkan di panel aplikasi atas. Jika hasSelection bernilai benar (true), ikon bagikan akan muncul setelah teks.
  • Lambda onClick dari IconButton menangani tindakan berbagi saat Anda mengklik ikon.

Hasil

Panel aplikasi atas dinamis menampilkan teks 3 item dipilih dengan ikon bagikan. Teks dan ikon ini hanya muncul saat item dipilih
Gambar 1. Panel aplikasi atas dinamis dengan teks dan ikon bagikan yang hanya muncul saat item dipilih.

Mengintegrasikan daftar yang dapat dipilih ke dalam panel aplikasi atas dinamis

Contoh ini menunjukkan cara menambahkan daftar yang dapat dipilih ke panel aplikasi atas dinamis:

@Composable
private fun AppBarMultiSelectionExample(
    modifier: Modifier = Modifier,
) {
    val listItems by remember { mutableStateOf(listOf(1, 2, 3, 4, 5, 6)) }
    var selectedItems by rememberSaveable { mutableStateOf(setOf<Int>()) }

    Scaffold(
        modifier = modifier,
        topBar = { AppBarSelectionActions(selectedItems) }
    ) { innerPadding ->
        LazyColumn(contentPadding = innerPadding) {
            itemsIndexed(listItems) { _, index ->
                val isItemSelected = selectedItems.contains(index)
                ListItemSelectable(
                    selected = isItemSelected,
                    Modifier
                        .combinedClickable(
                            interactionSource = remember { MutableInteractionSource() },
                            indication = null,
                            onClick = {
                                /* click action */
                            },
                            onLongClick = {
                                if (isItemSelected) selectedItems -= index else selectedItems += index
                            }
                        )
                )
            }
        }
    }
}
AppBar.kt

Poin penting tentang kode

  • Panel atas diperbarui berdasarkan jumlah item daftar yang Anda pilih.
  • selectedItems menyimpan kumpulan indeks item yang dipilih.
  • AppBarMultiSelectionExample menggunakan Scaffold untuk menyusun layar.
    • topBar = { AppBarSelectionActions(selectedItems) } menetapkan composable AppBarSelectionActions sebagai panel aplikasi atas. AppBarSelectionActions menerima status selectedItems.
  • LazyColumn menampilkan item dalam daftar vertikal, hanya merender item yang terlihat di layar.
  • ListItemSelectable mewakili item daftar yang dapat dipilih.
    • combinedClickable memungkinkan penanganan klik dan klik lama untuk pemilihan item. Klik akan melakukan tindakan, sementara mengklik lama item akan mengubah status pemilihannya.

Hasil

Panel aplikasi atas dinamis menampilkan teks 3 item dipilih, diikuti dengan ikon bagikan. Di bawah, daftar menampilkan beberapa item, dengan tanda centang di samping tiga item yang dipilih
Gambar 2. Daftar yang diintegrasikan ke dalam panel aplikasi atas dinamis dengan item tertentu yang dipilih.

Referensi lainnya