Scaffold no Jetpack Compose — o que é, propriedades e como funciona

O que é Scaffold no Jetpack Compose

Scaffold é uma função composable que implementa a estrutura de tela de acordo com a especificação Material Design. Scaffold não é um contêiner no sentido tradicional — é um gerenciador de layout que coordena o posicionamento de vários componentes padrão do Material na tela.

Scaffold gerencia margens para TopAppBar, BottomBar e FloatingActionButton, bem como elementos do sistema — barra de status e barra de navegação. Isso garante que o conteúdo não se sobreponha aos elementos do sistema e esteja em conformidade com as diretrizes do Material Design.

De acordo com Material Design Guidelines, 2025, Scaffold deve ser o elemento raiz de cada tela do aplicativo. Ele substitui o obsoleto CoordinatorLayout do sistema View e fornece uma API mais simples e declarativa para construir layouts de tela.

Assinatura básica do Scaffold

Scaffold aceita os parâmetros modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost e content. O parâmetro content recebe PaddingValues — as margens que o conteúdo principal deve considerar.

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

Slots do Scaffold: topBar, bottomBar e floatingActionButton

topBar é o slot para colocar a barra superior do aplicativo, geralmente TopAppBar ou LargeTopAppBar. Scaffold adiciona automaticamente margens ao innerPadding para o conteúdo não se sobrepor ao topBar. TopAppBar pode conter um título, um ícone de navegação e ações.

bottomBar é o slot para a barra de navegação inferior. Suporta BottomNavigation, BottomAppBar ou NavigationBar. Scaffold leva em conta a altura do bottomBar ao calcular innerPadding para o conteúdo. De acordo com Material Design Guidelines, 2025, bottomBar deve ser usado em telas com 3–5 pontos de navegação.

floatingActionButton é o slot para o botão de ação flutuante. Scaffold posiciona automaticamente o FAB de acordo com a especificação Material Design — no canto inferior direito com margem correta. floatingActionButtonPosition permite mover o FAB para o centro da borda inferior da tela.

Exemplo com todos os slots

Neste exemplo, Scaffold usa todos os slots principais: TopAppBar com um título, BottomBar com três itens de navegação e FloatingActionButton para a ação 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, "Início") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Pesquisar") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Conteúdo da tela")
        }
    }
}

ScaffoldState: gerenciamento de Drawer e Snackbar

ScaffoldState é o objeto de estado do Scaffold que combina DrawerState e SnackbarHostState. DrawerState gerencia a abertura e fechamento do menu lateral, enquanto SnackbarHostState gerencia a exibição e ocultação do Snackbar. O estado é criado através de rememberScaffoldState() e passado para o parâmetro scaffoldState.

DrawerState fornece métodos open e close para controle programático do Drawer. O estado do Drawer pode ser aberto, fechado ou parcialmente aberto. drawerGesturesEnabled permite desabilitar o gesto de deslizar para abrir o Drawer, deixando apenas a abertura programática através de um botão.

SnackbarHostState gerencia o Snackbar — notificações temporárias na parte inferior da tela. O método showSnackbar exibe um Snackbar com uma mensagem e uma ação opcional. De acordo com Material Design Guidelines, 2025, Snackbar deve ser usado para mensagens breves sem informações criticamente importantes.

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

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

Exemplo de construção de tela com Scaffold

Um exemplo completo de tela com Scaffold inclui TopAppBar, BottomNavigation, FloatingActionButton e Snackbar para exibir notificações ao pressionar o FAB. ScaffoldState é passado para todos os componentes para coordenação de 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, "Início") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Configurações") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Concluído")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Bem-vindo")
        }
    }
}

InnerPadding e layout adaptativo com Scaffold

innerPadding são os PaddingValues que Scaffold passa para o bloco content. Eles contêm as margens necessárias para evitar que o conteúdo se sobreponha a statusBar, navigationBar, topBar e bottomBar. O uso de innerPadding é obrigatório para exibição correta em diferentes dispositivos.

Scaffold calcula automaticamente innerPadding com base nas margens do sistema e na altura dos slots instalados. Em dispositivos com ilha de câmera ou recorte na tela, Scaffold ajusta as margens para a barra de status. Em dispositivos antigos com botões físicos, a margem inferior pode estar ausente.

De acordo com Android Developers, 2024, innerPadding deve ser aplicado ao contêiner raiz do conteúdo através de Modifier.padding(innerPadding). Se o conteúdo usar um contêiner rolável, innerPadding é aplicado através de Modifier.consumeWindowInsets para o funcionamento correto do teclado e gestos do sistema.

• Aplique innerPadding ao contêiner raiz do conteúdo através de Modifier.padding(innerPadding)
• Para contêineres roláveis use Modifier.consumeWindowInsets(innerPadding)
• Não adicione margens extras para a barra de status — Scaffold faz isso automaticamente
• Se topBar ou bottomBar estiverem ausentes, as margens correspondentes em innerPadding serão zero