Scaffold

W Material Design szkielet to podstawowa struktura, która zapewnia standaryzowaną platformę dla złożonych interfejsów użytkownika. Łączy różne części interfejsu, takie jak paski aplikacji i pływające przyciski, zapewniając spójny wygląd i działanie aplikacji.

Przykład

Komponent Scaffold udostępnia prosty interfejs API, który umożliwia szybkie tworzenie struktury aplikacji zgodnie z wytycznymi Material Design. Scaffold przyjmuje jako parametry kilka elementów kompozycyjnych. Oto niektóre z nich:

  • topBar: pasek aplikacji u góry ekranu.
  • bottomBar: pasek aplikacji u dołu ekranu.
  • floatingActionButton: przycisk, który pojawia się w prawym dolnym rogu ekranu i umożliwia dostęp do kluczowych działań.

Możesz też przekazywać treści Scaffold tak samo jak do innych kontenerów. Przekazuje PaddingValues do funkcji lambda content, którą należy zastosować do głównego elementu składanego treści, aby ograniczyć jego rozmiar.

Poniższy przykład pokazuje pełną implementację Scaffold. Zawiera ona górny i dolny pasek aplikacji oraz pływający przycisk polecenia.

@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

Ta implementacja wygląda tak:

Implementacja szablonu zawierającego proste górne i dolne paski aplikacji oraz pływający przycisk polecenia, który iteruje licznik. Treść wewnętrzna szablonu to prosty tekst wyjaśniający komponent.
Rysunek 1. Implementacja szablonu.

Dodatkowe materiały