Crea una barra superior de la app dinámica

En esta guía, se explica cómo crear una barra superior de la app dinámica en Compose que cambia sus opciones cuando se seleccionan elementos de la lista. Puedes modificar el título y las acciones de la barra superior de la app según el estado de selección.

Implementa el comportamiento dinámico de la barra superior de la app

Este código define una función de componibilidad para la barra superior de la app que cambia según la selección de elementos:

@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

Puntos clave sobre el código

  • AppBarSelectionActions acepta un Set de índices de elementos seleccionados.
  • El topBarText cambia según si seleccionas algún elemento.
    • Cuando seleccionas elementos, aparece texto que describe la cantidad de elementos seleccionados en el TopAppBar.
    • Si no seleccionas ningún elemento, el topBarText es "Lista de elementos".
  • El bloque actions define las acciones que se muestran en la barra superior de la app. Si hasSelection es verdadero, aparece un ícono para compartir después del texto.
  • La expresión lambda onClick del IconButton controla la acción de compartir cuando haces clic en el ícono.

Resultado

Una barra superior de la aplicación dinámica muestra el texto Se seleccionaron 3 elementos con un ícono para compartir. Este texto y el ícono solo aparecen cuando se seleccionan elementos.
Figura 1. Una barra superior de la app dinámica con texto y un ícono para compartir que solo aparecen cuando se seleccionan elementos.

Integra una lista seleccionable en la barra superior de la app dinámica

En este ejemplo, se muestra cómo agregar una lista seleccionable a una barra superior de la app dinámica:

@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

Puntos clave sobre el código

  • La barra superior se actualiza según la cantidad de elementos de la lista que selecciones.
  • selectedItems contiene el conjunto de índices de elementos seleccionados.
  • AppBarMultiSelectionExample usa un Scaffold para estructurar la pantalla.
    • topBar = { AppBarSelectionActions(selectedItems) } establece el elemento de componibilidad AppBarSelectionActions como la barra superior de la app. AppBarSelectionActions recibe el estado selectedItems.
  • LazyColumn muestra los elementos en una lista vertical y procesa solo los elementos visibles en la pantalla.
  • ListItemSelectable representa un elemento de lista seleccionable.
    • combinedClickable permite el control de clics y clics largos para la selección de elementos. Un clic realiza una acción, mientras que un clic largo en un elemento alterna su estado de selección.

Resultado

Una barra superior dinámica de la app muestra el texto Se seleccionaron 3 elementos, seguido de un ícono para compartir. A continuación, se muestra una lista con varios elementos, con marcas de verificación junto a los tres que están seleccionados.
Figura 2: Una lista integrada en una barra superior de la app dinámica con elementos específicos seleccionados.

Recursos adicionales