Scaffold
En Material Design, un andamiaje es una estructura fundamental que proporciona un plataforma estandarizada para interfaces de usuario complejas. Une diferentes partes de la IU, como barras de la aplicación y botones de acción flotantes, lo que les da a las apps un aspecto y una sensación coherentes.
Ejemplo
El elemento Scaffold
componible proporciona una API sencilla que puedes usar para lo siguiente:
ensamblar rápidamente la estructura de tu app según los lineamientos de Material Design.
Scaffold
acepta varios elementos componibles como parámetros. Entre ellas, se incluyen
lo siguiente:
topBar
: Es la barra de la app que se encuentra en la parte superior de la pantalla.bottomBar
: Es la barra de la aplicación que se encuentra en la parte inferior de la pantalla.floatingActionButton
: Un botón que se desplaza sobre la esquina inferior derecha de la pantalla que puedes usar para exponer las acciones clave.
Para obtener ejemplos más detallados sobre cómo implementar las opciones de la parte superior e inferior barras de la aplicación, consulta la página de barras de la aplicación.
También puedes pasar el contenido de Scaffold
como lo harías a otros contenedores. Pasa
un valor innerPadding
para la lambda content
que, luego, puedes usar en el elemento secundario
elementos componibles.
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 una acción flotante.
botón 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(), ) } } }
Esta implementación aparece de la siguiente manera: