Gerüst

In Material Design ist ein Gerüst eine grundlegende Struktur, die eine standardisierte Plattform für komplexe Benutzeroberflächen bietet. Sie fasst verschiedene Teile der UI zusammen, z. B. App-Leisten und unverankerte Aktionsschaltflächen, und verleiht Apps ein kohärentes Design.

Beispiel

Die zusammensetzbare 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 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 sich unten rechts auf dem Bildschirm befindet und mit der sich wichtige Aktionen einblenden lassen.

Ausführlichere Beispiele dazu, wie Sie sowohl die obere als auch die untere App-Leiste implementieren können, finden Sie auf der Seite für App-Leisten.

Sie können Scaffold-Inhalte auch wie an andere Container übergeben. Sie übergibt einen innerPadding-Wert an die Lambda-Funktion content, den Sie dann in untergeordneten zusammensetzbaren Funktionen verwenden können.

Das folgende Beispiel enthält ein vollständiges Beispiel für eine mögliche Implementierung von Scaffold. Sie enthält eine obere App-Leiste, eine untere App-Leiste und 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:

Weitere Informationen

• App-Leisten