No Material Design, um scaffold é uma estrutura fundamental que fornece uma plataforma padronizada para interfaces do usuário complexas. Ele reúne diferentes partes da interface, como barras de apps e botões de ação flutuantes, proporcionando uma aparência coerente aos apps.
Exemplo
O elemento combinável Scaffold
oferece uma API simples que pode ser usada para
montar rapidamente a estrutura do app de acordo com as diretrizes do Material Design.
O Scaffold
aceita vários elementos combináveis como parâmetros. Entre eles estão os seguintes:
topBar
: 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 e pode ser usado para expor as principais ações.
Para ver exemplos mais detalhados de como implementar as barras de apps superior e inferior, consulte a página "Barras de apps".
Também é possível transmitir conteúdo Scaffold
da mesma forma que você faria para outros contêineres. Ela transmite
um valor innerPadding
para a lambda content
, que pode ser usado em elementos filhos
combináveis.
O exemplo abaixo fornece um exemplo completo de como é possível implementar
Scaffold
. Ele contém uma barra de apps na parte de cima, na parte de baixo e um botão de ação
flutuante que interage com o estado interno da 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 forma: