Scaffold
No Material Design, um scaffolding é uma estrutura fundamental que fornece uma uma plataforma padronizada para interfaces de usuário complexas. Ele reúne partes da interface, como barras de apps e botões de ação flutuantes, que oferecem aos apps uma aparência coerente.
Exemplo
O elemento combinável Scaffold
oferece uma API simples que você pode usar para:
montar rapidamente a estrutura do seu app de acordo com as diretrizes do Material Design.
Scaffold
aceita vários elementos combináveis como parâmetros. Entre elas estão as
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 do na tela que pode ser usada para expor as principais ações.
Para exemplos mais detalhados sobre como implementar os níveis superior e inferior barras de apps, consulte a página de barras de apps.
Você também pode transmitir conteúdo Scaffold
da mesma forma que faria para outros contêineres. Ele passa
um valor innerPadding
para a lambda content
que você pode usar no filho
que podem ser compostos.
Confira a seguir um exemplo completo de como implementar
Scaffold
: Ele contém uma barra de apps na parte de cima, uma barra de apps na parte de baixo e uma ação flutuante
Botão 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: