Scaffold

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

Beispiel

Die komponierbare Funktion Scaffold bietet eine einfache API, mit der Sie die Struktur Ihrer App schnell gemäß den Material Design-Richtlinien zusammenstellen können. Scaffold akzeptiert mehrere Composables als Parameter. Dazu gehören:

  • topBar: Die App-Leiste oben auf dem Bildschirm.
  • bottomBar: Die App-Leiste am unteren Bildschirmrand.
  • floatingActionButton: Eine Schaltfläche, die in der rechten unteren Ecke des Bildschirms eingeblendet wird und mit der Sie wichtige Aktionen anzeigen können.

Sie können Scaffold-Inhalte auch wie bei anderen Containern übergeben. Es übergibt PaddingValues an die komponierbare Funktion content, die Sie auf die Stamm-komponierbare Funktion Ihres Inhalts anwenden sollten, um die Größe einzuschränken.

Das folgende Beispiel zeigt eine vollständige Scaffold-Implementierung. Es enthält eine obere App-Leiste, eine untere App-Leiste und einen unverankerten Aktionsbutton.

@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:

Eine Implementierung von Scaffold, die einfache App-Leisten oben und unten sowie einen unverankerten Aktionsbutton enthält, der einen Zähler erhöht. Der innere Inhalt des Scaffold ist einfacher Text, der die Komponente erklärt.
Abbildung 1. Eine Implementierung von Scaffold.

Zusätzliche Ressourcen