Audiocurso Jetpack Compose 11 Scaffold

Audiocurso Jetpack Compose 11 Scaffold

El esqueleto con los elementos típicos de una app se consigue a través del Scaffold en Jetpack Compose. Aquí te explico como utilizarlo.

De hecho, scaffold significa andamio.

Quizá te suene a un concepto de testing, que son los tests de scaffolding o de andamiaje.

En ese caso son un tipo de tests que nos sirven para asegurarnos de que la app no se rompa en situaciones determinadas (por ejemplo al hacer un refactoring).

Y aquí aunque es sobre otra cosa, si que guarda cierta relación, ya que es para crear la estructura de la app.

Dentro del composable Scaffold, podemos pasarle otros composables como parámetros.

Son los siguientes:

• topBar: es la barra superior de navegación. Lo más normal es que usemos una TopAppBar
• bottomBar: es la barra de navegación de la parte de abajo. Aquí podremos usar por ejemplo una BottomAppBar o un BottomNavigation
• snackbarHost: es el host que usamos para mostrar Snackbars de un modo sencillo
• floatingActionButton: es para mostrar el clásico botón de acción principal
• drawerContent: nos sirve para gestionar el menú lateral
• content: es el parámetro que tienen todos los composables. Poco más que añadir en este caso.

De hecho, la pinta que tiene el Scaffold por dentro es la siguiente:

@Composable fun Scaffold(     modifier: Modifier = Modifier,     scaffoldState: ScaffoldState = rememberScaffoldState(),     topBar: @Composable () -> Unit = {},     bottomBar: @Composable () -> Unit = {},     snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },     floatingActionButton: @Composable () -> Unit = {},     floatingActionButtonPosition: FabPosition = FabPosition.End,     isFloatingActionButtonDocked: Boolean = false,     drawerContent: @Composable (ColumnScope.() -> Unit)? = null,     drawerGesturesEnabled: Boolean = true,     drawerShape: Shape = MaterialTheme.shapes.large,     drawerElevation: Dp = DrawerDefaults.Elevation,     drawerBackgroundColor: Color = MaterialTheme.colors.surface,     drawerContentColor: Color = contentColorFor(drawerBackgroundColor),     drawerScrimColor: Color = DrawerDefaults.scrimColor,     backgroundColor: Color = MaterialTheme.colors.background,     contentColor: Color = contentColorFor(backgroundColor),     content: @Composable (PaddingValues) -> Unit )

Aprovecho para recordarte que la gente que está suscrita a la membresía, escucha este contenido en audio. Lo cual es una auténtica maravilla como complemento para una buena formación en Android.

En las siguientes lecciones del audiocurso, te iré explicando más a fondo elemento a elemento.

Empezaremos por la TopAppBar.