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(), ) } } }
Essa implementação aparece da seguinte maneira: