Scaffold
In Material Design ist ein Scaffold eine grundlegende Struktur, für komplexe Benutzeroberflächen. Sie hält verschiedene Dinge zusammen wie App-Leisten und unverankerte Aktionsschaltflächen, wodurch Apps kohärentes Design.
Beispiel
Die zusammensetzbare Funktion Scaffold
bietet eine einfache API, mit der Sie
schnell die Struktur Ihrer App gemäß den Material Design-Richtlinien zusammenstellen.
Scaffold
akzeptiert mehrere zusammensetzbare Funktionen als Parameter. Dazu gehören die
Folgendes:
topBar
: die App-Leiste am oberen Bildschirmrand.bottomBar
: Die App-Leiste am unteren Bildschirmrand.floatingActionButton
: Eine Schaltfläche, die rechts unten über der dem Bildschirm, über den Sie wichtige Aktionen anzeigen können.
Ausführlichere Beispiele zur Implementierung von oben und unten finden Sie auf der Seite mit den App-Leisten.
Sie können Scaffold
-Inhalte auch wie an andere Container übergeben. Die Prüfung besteht
einen innerPadding
-Wert für die Lambda-Funktion content
, den du dann im untergeordneten
zusammensetzbaren Funktionen.
Das folgende Beispiel zeigt ein vollständiges Beispiel dafür, wie Sie
Scaffold
Sie enthält eine obere App-Leiste, eine untere App-Leiste und eine unverankerte Aktion
Schaltflä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:
<ph type="x-smartling-placeholder">