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

Puntos clave sobre el código

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

Resultado

Una barra superior de la app dinámica muestra el texto Seleccionó 3 elementos con un ícono de 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 de compartir que solo aparecen cuando se seleccionan elementos.

Cómo integrar una lista seleccionable en la barra superior dinámica de la app

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(
        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 se seleccionan.
  • selectedItems contiene el conjunto de índices de elementos seleccionados.
  • AppBarMultiSelectionExample usa un Scaffold para estructurar la pantalla.
    • topBar = { AppBarSelectionActions(selectedItems) } establece el elemento componible AppBarSelectionActions como la barra superior de la app. AppBarSelectionActions recibe el estado selectedItems.
  • LazyColumn muestra los elementos en una lista vertical y solo renderiza los elementos visibles en la pantalla.
  • ListItemSelectable representa un elemento de lista que se puede seleccionar.
    • combinedClickable permite el manejo de clics y de clics sostenidos para la selección de elementos. Un clic realiza una acción, mientras que mantener presionado un elemento activa o desactiva su estado de selección.

Resultado

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

Recursos adicionales