Créer une barre d'application supérieure dynamique

Ce guide explique comment créer une barre d'application supérieure dynamique dans Compose qui modifie ses options lorsque des éléments sont sélectionnés dans la liste. Vous pouvez modifier le titre et les actions de la barre d'application supérieure en fonction de l'état de sélection.

Implémenter un comportement dynamique de la barre d'application supérieure

Ce code définit une fonction composable pour la barre d'application supérieure qui change en fonction de la sélection d'éléments:

@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

Points clés concernant le code

• AppBarSelectionActions accepte un Set d'indices d'éléments sélectionnés.
• L'topBarText change selon que des éléments sont sélectionnés.
  • Lorsque des éléments sont sélectionnés, un texte décrivant le nombre d'éléments sélectionnés s'affiche dans TopAppBar.
  • Si aucun élément n'est sélectionné, topBarText est "Liste d'éléments".
• Le bloc actions définit les actions affichées dans la barre d'application supérieure. Si hasSelection est défini sur "true", une icône de partage s'affiche après le texte.
• Le lambda onClick de IconButton gère l'action de partage lorsque l'utilisateur clique sur l'icône.

Résultat

Figure 1. Barre d'application supérieure dynamique avec du texte et une icône de partage qui ne s'affichent que lorsque des éléments sont sélectionnés.

Intégrer une liste sélectionnable dans la barre d'application supérieure dynamique

Cet exemple montre comment ajouter une liste sélectionnable à une barre d'application supérieure dynamique:

@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

Points clés concernant le code

• La barre supérieure est mise à jour en fonction du nombre d'éléments de liste sélectionnés.
• selectedItems contient l'ensemble des indices d'articles sélectionnés.
• AppBarMultiSelectionExample utilise un Scaffold pour structurer l'écran.
  • topBar = { AppBarSelectionActions(selectedItems) } définit le composable AppBarSelectionActions comme barre d'application supérieure. AppBarSelectionActions reçoit l'état selectedItems.
• LazyColumn affiche les éléments dans une liste verticale, n'affichant que les éléments visibles à l'écran.
• ListItemSelectable représente un élément de liste sélectionnable.
  • combinedClickable permet de gérer à la fois le clic et le clic prolongé pour la sélection d'éléments. Un clic effectue une action, tandis qu'un clic prolongé sur un élément active ou désactive son état de sélection.

Résultat

Figure 2. Liste intégrée à une barre d'application supérieure dynamique avec des éléments spécifiques sélectionnés.

Ressources supplémentaires

• TopAppBar
• LazyColumn
• Scaffold