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" ) } } }, ) }
Points clés concernant le code
AppBarSelectionActions
accepte unSet
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".
- Lorsque des éléments sont sélectionnés, un texte décrivant le nombre d'éléments sélectionnés s'affiche dans
- Le bloc
actions
définit les actions affichées dans la barre d'application supérieure. SihasSelection
est défini sur "true", une icône de partage s'affiche après le texte. - Le lambda
onClick
deIconButton
gère l'action de partage lorsque l'utilisateur clique sur l'icône.
Résultat
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 } ) ) } } } }
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 unScaffold
pour structurer l'écran.topBar = { AppBarSelectionActions(selectedItems)
} définit le composableAppBarSelectionActions
comme barre d'application supérieure.AppBarSelectionActions
reçoit l'étatselectedItems
.
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.