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 über der unteren rechten Ecke des 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(),
            )
        }
    }
}
Scaffold.kt

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">

</ph>

Abbildung 1: Eine Scaffold-Implementierung

Weitere Informationen

• App-Leisten