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 panel aplikasi atas berdasarkan status pilihan.

Mengimplementasikan 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"
                    )
                }
            }
        },
    )
}
AppBar.kt

Poin penting tentang kode

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

Hasil

Gambar 1. Panel aplikasi atas dinamis dengan teks dan ikon berbagi 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(
        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 dipilih.
• selectedItems menyimpan kumpulan indeks item yang dipilih.
• AppBarMultiSelectionExample menggunakan Scaffold untuk menyusun struktur layar.
  • topBar = { AppBarSelectionActions(selectedItems) } menetapkan composable AppBarSelectionActions sebagai panel aplikasi atas. AppBarSelectionActions menerima status selectedItems.
• LazyColumn menampilkan item dalam daftar vertikal, yang 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, sedangkan mengklik lama item akan mengalihkan status pilihannya.

Hasil

Gambar 2. Daftar yang terintegrasi ke dalam panel aplikasi atas dinamis dengan item tertentu yang dipilih.

Referensi lainnya

• TopAppBar
• LazyColumn
• Scaffold