Rusztowanie

W stylu Material Design ruszt to podstawowa struktura, która zapewnia ustandaryzowaną platformę do obsługi złożonych interfejsów użytkownika. Łączy on różne części interfejsu, np. paski aplikacji i pływające przyciski poleceń, dzięki czemu aplikacje mają spójny wygląd.

Przykład

Funkcja kompozycyjna Scaffold to prosty interfejs API, który pozwala szybko tworzyć strukturę aplikacji zgodnie ze wskazówkami dotyczącymi Material Design. Funkcja Scaffold akceptuje kilka elementów kompozycyjnych jako parametry. Oto one:

• topBar: pasek aplikacji u góry ekranu.
• bottomBar: pasek aplikacji u dołu ekranu.
• floatingActionButton: przycisk znajdujący się w prawym dolnym rogu ekranu, który umożliwia wyświetlanie najważniejszych działań.

Bardziej szczegółowe przykłady implementacji pasków u góry i u dołu aplikacji znajdziesz na stronie z paskami aplikacji.

Treść Scaffold możesz też przekazywać w taki sam sposób jak do innych kontenerów. Przekazuje on wartość innerPadding do funkcji content, której możesz potem używać w elementach podrzędnych.

Poniżej znajdziesz pełny przykład implementacji Scaffold. Zawiera pasek aplikacji u góry, dolny pasek aplikacji i pływający przycisk polecenia, który wchodzi w interakcję ze stanem wewnętrznym Scaffold.

@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

Implementacja wygląda tak:

Dodatkowe materiały

• Paski aplikacji