Scaffold

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

Przykład

Funkcja kompozycyjna Scaffold udostępnia prosty interfejs API, który umożliwia szybkie utworzenie struktury aplikacji zgodnie ze wskazówkami Material Design. Scaffold akceptuje kilka elementów kompozycyjnych jako parametry. Oto niektóre z nich:

  • topBar: pasek aplikacji u góry ekranu.
  • bottomBar: pasek aplikacji u dołu ekranu.
  • floatingActionButton: przycisk, który unosi się nad prawym dolnym rogiem ekranu i którego można użyć do wyświetlenia kluczowych działań.

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

Poniższy przykład pokazuje pełną implementację Scaffold. Zawiera górny pasek aplikacji, dolny pasek aplikacji i 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(),
            )
        }
    }
}

Implementacja wygląda tak:

Implementacja szkieletu, która zawiera proste górne i dolne paski aplikacji oraz pływający przycisk polecenia, który zwiększa licznik. Wewnętrzna treść szkieletu to prosty tekst wyjaśniający komponent.
Rysunek 1. Implementacja szkieletu.

Dodatkowe materiały