In Material Design ist ein Scaffold eine grundlegende Struktur, die eine standardisierte Plattform für komplexe Benutzeroberflächen bereitstellt. Sie hält verschiedene Teile der Benutzeroberfläche zusammen, z. B. App-Leisten und unverankerte Aktionsschaltflächen, und verleiht Apps ein einheitliches Erscheinungsbild.
Beispiel
Die zusammensetzbare Funktion Scaffold
bietet eine einfache API, mit der du schnell die Struktur deiner App gemäß Material Design-Richtlinien zusammenstellen kannst.
Scaffold
akzeptiert mehrere zusammensetzbare Funktionen als Parameter. Dazu gehören:
topBar
: die App-Leiste am oberen Bildschirmrand.bottomBar
: Die App-Leiste am unteren Bildschirmrand.floatingActionButton
: Eine Schaltfläche, die über der unteren rechten Ecke des Bildschirms schwebt, um wichtige Aktionen einzublenden.
Ausführlichere Beispiele für die Implementierung von oberen und unteren App-Leisten finden Sie auf der Seite "App-Leisten".
Sie können Scaffold
-Inhalte auch wie an andere Container übergeben. Sie übergibt einen innerPadding
-Wert an die Lambda content
, die Sie dann in untergeordneten zusammensetzbaren Funktionen verwenden können.
Das folgende Beispiel zeigt ein vollständiges Beispiel dafür, wie Sie Scaffold
implementieren können. Sie enthält eine obere und eine untere App-Leiste sowie eine unverankerte Aktionsschaltfläche, die mit dem internen Status von Scaffold
interagiert.
@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(), ) } } }
Diese Implementierung sieht so aus: