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 cambie sus opciones cuando se seleccionen elementos de la lista. Puedes modificar el título y las acciones de la barra de la app superior 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
    )
}

Puntos clave sobre el código

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

Resultado

Una barra superior de la app 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 la 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 de la app superior 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
                            }
                        )
                )
            }
        }
    }
}

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 renderiza solo los elementos visibles en la pantalla.
  • ListItemSelectable representa un elemento de lista seleccionable.
    • combinedClickable permite controlar los clics y los clics largos para la selección de elementos. Un clic realiza una acción, mientras que un clic largo en un elemento activa o desactiva su estado de selección.

Resultado

Una barra superior de la app dinámica muestra el texto Se seleccionaron 3 elementos, seguido de un ícono para compartir. A continuación, se muestra una lista con varios elementos y 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