Scaffold

In Material Design ist ein Scaffold eine grundlegende Struktur, die eine standardisierte Plattform für komplexe Nutzungsoberflächen bietet. Es hält verschiedene Teile der UI zusammen, z. B. App-Leisten und unverankerte Aktionsbuttons, und verleiht Apps so ein einheitliches Erscheinungsbild.

Beispiel

Das Scaffold zusammensetzbare Element bietet eine einfache API, mit der du die Struktur deiner App schnell gemäß den Material Design-Richtlinien zusammenstellen kannst. Scaffold akzeptiert mehrere zusammensetzbare Elemente als Parameter. Dazu gehören:

topBar: Die App-Leiste oben auf dem Bildschirm.
bottomBar: Die App-Leiste unten auf dem Bildschirm.
floatingActionButton: Ein Button, der in der unteren rechten Ecke des Bildschirms schwebt und mit dem du wichtige Aktionen ausführen kannst.

Du kannst Scaffold-Inhalte auch wie bei anderen Containern übergeben. Dabei werden PaddingValues an das content-Lambda übergeben, das du auf das zusammensetzbare Wurzelelement deines Inhalts anwenden solltest, um seine Größe zu begrenzen.

Das folgende Beispiel zeigt eine vollständige Scaffold-Implementierung. Sie enthält eine App-Leiste oben, eine App-Leiste unten und eine unverankerte Aktionsschaltfläche (UAS).

@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(),
            )
        }
    }
}Scaffold.kt

Diese Implementierung sieht so aus:

Eine Implementierung von „scaffold“, die einfache App-Leisten oben und unten sowie eine unverankerte Aktionsschaltfläche (UAS) enthält, die einen Zähler inkrementiert. Der innere Inhalt des Gerüsts ist einfacher Text, der die Komponente erklärt. — **Abbildung 1.** Eine Implementierung von Scaffold.

Zusätzliche Ressourcen

App-Leisten