Scaffold

En Material Design, un andamiaje es una estructura fundamental que proporciona una plataforma estandarizada para interfaces de usuario complejas. Mantiene unidas diferentes partes de la IU, como las barras de la app y los botones de acción flotantes, lo que les da a las apps un aspecto coherente.

Ejemplo

El elemento componible Scaffold proporciona una API sencilla que puedes usar para ensamblar rápidamente la estructura de tu app según los lineamientos de Material Design. Scaffold acepta varios elementos componibles como parámetros. Por ejemplo:

• topBar: Es la barra de la app en la parte superior de la pantalla.
• bottomBar: Es la barra de la app que se muestra en la parte inferior de la pantalla.
• floatingActionButton: Es un botón que se desplaza sobre la esquina inferior derecha de la pantalla que puedes usar para exponer acciones clave.

Para obtener ejemplos más detallados sobre cómo implementar las barras inferior y superior de la app, consulta la página de las barras de la app.

También puedes pasar contenido Scaffold como lo harías a otros contenedores. Pasa un valor de innerPadding a la expresión lambda content que puedes usar en los elementos componibles secundarios.

En el siguiente ejemplo, se proporciona un ejemplo completo de cómo podrías implementar Scaffold. Contiene una barra superior de la app, una barra inferior de la app y un botón de acción flotante que interactúa con el estado interno de Scaffold.

@Composable
fun ScaffoldExample() {
    var presses by remember { mutableIntStateOf(0) }

    Scaffold(
        topBar = {
            TopAppBar(
                colors = topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Top app bar")
                }
            )
        },
        bottomBar = {
            BottomAppBar(
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                contentColor = MaterialTheme.colorScheme.primary,
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = "Bottom app bar",
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { presses++ }) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            Text(
                modifier = Modifier.padding(8.dp),
                text =
                """
                    This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.

                    It also contains some basic inner content, such as this text.

                    You have pressed the floating action button $presses times.
                """.trimIndent(),
            )
        }
    }
}
Scaffold.kt

Esta implementación se muestra de la siguiente manera:

Figura 1: Una implementación de andamiaje.

Recursos adicionales

• Barras de la app