Scaffold

No Material Design, um scaffold é uma estrutura fundamental que fornece uma plataforma padronizada para interfaces do usuário complexas. Ele mantém diferentes partes da interface, como barras de apps e botões de ação flutuantes, oferecendo aos apps uma aparência coerente.

Exemplo

O elemento combinável Scaffold oferece uma API direta que pode ser usada para montar rapidamente a estrutura do app de acordo com as diretrizes do Material Design. Scaffold aceita vários elementos combináveis como parâmetros. Entre eles, estão os seguintes:

  • topBar: a barra de apps na parte de cima da tela.
  • bottomBar: a barra de apps na parte de baixo da tela.
  • floatingActionButton: um botão que passa sobre o canto inferior direito da tela que pode ser usado para expor as principais ações.

Para exemplos mais detalhados sobre como implementar as barras de apps da parte de cima e de baixo, consulte a página "Barras de apps".

Você também pode transmitir conteúdo Scaffold da mesma forma que faria para outros contêineres. Ela transmite um valor innerPadding para o lambda content que pode ser usado em elementos combináveis filhos.

Confira abaixo um exemplo completo de como implementar Scaffold. Ele contém uma barra de apps superior, uma barra de apps inferior e um botão de ação flutuante que interage com o 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

Essa implementação aparece da seguinte maneira:

Uma implementação de scaffold que contém barras de apps simples na parte de cima e de baixo, além de um botão de ação flutuante que itera um contador. O conteúdo interno do scaffold é um texto simples que explica o componente.
Figura 1. Uma implementação de scaffold.

Outros recursos