Gerüst

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

Diese Implementierung sieht so aus:

Eine Implementierung eines Scaffold, das einfache obere und untere App-Leisten sowie eine unverankerte Aktionsschaltfläche enthält, die einen Zähler iteriert. Der innere Inhalt des Gerüts besteht aus einfachem Text, der die Komponente erklärt.
Abbildung 1. Eine Scaffold-Implementierung

Zusätzliche Ressourcen