Scaffold en Jetpack Compose — qué es, propiedades y cómo funciona

Qué es Scaffold en Jetpack Compose

Scaffold es una función composable que implementa el esqueleto de pantalla según la especificación de Material Design. Scaffold no es un contenedor en el sentido tradicional — es un gestor de diseño que coordina la colocación de varios componentes estándar de Material en la pantalla.

Scaffold gestiona los márgenes para TopAppBar, BottomBar y FloatingActionButton, así como los elementos del sistema — la barra de estado y la barra de navegación. Esto garantiza que el contenido no se superponga con los elementos del sistema y cumpla con las pautas de Material Design.

Según Material Design Guidelines, 2025, Scaffold debe ser el elemento raíz de cada pantalla de la aplicación. Reemplaza el obsoleto CoordinatorLayout del sistema View y proporciona una API más simple y declarativa para construir diseños de pantalla.

Firma básica de Scaffold

Scaffold acepta los parámetros modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost y content. El parámetro content recibe PaddingValues — los márgenes que el contenido principal debe considerar.

@Composable
fun BasicScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Inicio") }
            )
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            Text("Contenido principal")
        }
    }
}

Espacios de Scaffold: topBar, bottomBar y floatingActionButton

topBar es el espacio para colocar la barra superior de la aplicación, generalmente TopAppBar o LargeTopAppBar. Scaffold añade automáticamente márgenes a innerPadding para que el contenido no se superponga con topBar. TopAppBar puede contener un título, un icono de navegación y acciones.

bottomBar es el espacio para la barra de navegación inferior. Soporta BottomNavigation, BottomAppBar o NavigationBar. Scaffold tiene en cuenta la altura de bottomBar al calcular innerPadding para el contenido. Según Material Design Guidelines, 2025, bottomBar debe utilizarse en pantallas con 3–5 puntos de navegación.

floatingActionButton es el espacio para el botón de acción flotante. Scaffold posiciona automáticamente el FAB según la especificación de Material Design — en la esquina inferior derecha con el margen correcto. floatingActionButtonPosition permite mover el FAB al centro del borde inferior de la pantalla.

Ejemplo con todos los espacios

En este ejemplo, Scaffold utiliza todos los espacios principales: TopAppBar con un título, BottomBar con tres elementos de navegación y FloatingActionButton para la acción principal.

@Composable
fun FullScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("App") },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Home, "Inicio") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Buscar") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Contenido de pantalla")
        }
    }
}

ScaffoldState: gestión de Drawer y Snackbar

ScaffoldState es el objeto de estado de Scaffold que combina DrawerState y SnackbarHostState. DrawerState gestiona la apertura y cierre del menú lateral, mientras que SnackbarHostState gestiona la visualización y ocultación del Snackbar. El estado se crea mediante rememberScaffoldState() y se pasa al parámetro scaffoldState.

DrawerState proporciona métodos open y close para el control programático del Drawer. El estado del Drawer puede ser abierto, cerrado o parcialmente abierto. drawerGesturesEnabled permite deshabilitar el gesto de deslizamiento para abrir el Drawer, dejando solo la apertura programática mediante un botón.

SnackbarHostState gestiona el Snackbar — notificaciones temporales en la parte inferior de la pantalla. El método showSnackbar muestra un Snackbar con un mensaje y una acción opcional. Según Material Design Guidelines, 2025, Snackbar debe usarse para mensajes breves sin información críticamente importante.

@Composable
fun ScaffoldWithDrawer() {
    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = { Text("Menú") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }
                    }) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        drawerContent = {
            Column(modifier = Modifier.padding(16.dp)) {
                Text("Elemento 1")
                Text("Elemento 2")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Contenido")
        }
    }
}

Ejemplo de construcción de pantalla con Scaffold

Un ejemplo completo de pantalla con Scaffold incluye TopAppBar, BottomNavigation, FloatingActionButton y Snackbar para mostrar notificaciones al presionar el FAB. ScaffoldState se pasa a todos los componentes para la coordinación del estado.

@Composable
fun MainScreen() {
    val state = rememberScaffoldState()
    val scope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = state,
        topBar = {
            TopAppBar(
                title = { Text("IT Sectr") },
                actions = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Notifications, "Notifications")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(icon = { Icon(Icons.Default.Home, "Inicio") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Configuración") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Hecho")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Bienvenido")
        }
    }
}

InnerPadding y diseño adaptativo con Scaffold

innerPadding son los PaddingValues que Scaffold pasa al bloque content. Contienen los márgenes necesarios para evitar que el contenido se superponga con statusBar, navigationBar, topBar y bottomBar. El uso de innerPadding es obligatorio para una visualización correcta en diferentes dispositivos.

Scaffold calcula automáticamente innerPadding basándose en los márgenes del sistema y la altura de los espacios instalados. En dispositivos con cámara tipo isla o recorte en la pantalla, Scaffold ajusta los márgenes para la barra de estado. En dispositivos antiguos con botones físicos, el margen inferior puede estar ausente.

Según Android Developers, 2024, innerPadding debe aplicarse al contenedor raíz del contenido mediante Modifier.padding(innerPadding). Si el contenido usa un contenedor desplazable, innerPadding se aplica mediante Modifier.consumeWindowInsets para el correcto funcionamiento del teclado y los gestos del sistema.

• Aplique innerPadding al contenedor raíz del contenido mediante Modifier.padding(innerPadding)
• Para contenedores desplazables use Modifier.consumeWindowInsets(innerPadding)
• No añada márgenes adicionales para la barra de estado — Scaffold lo maneja automáticamente
• Si topBar o bottomBar están ausentes, los márgenes correspondientes en innerPadding serán cero