W Material Design rusztowanie to podstawowa struktura, która pozwala ustandaryzować platformę do obsługi złożonych interfejsów. Łączy różne elementy interfejsu, takie jak paski aplikacji i pływające przyciski poleceń, nadając aplikacjom spójny wygląd.
Przykład
Funkcja kompozycyjna Scaffold
to prosty interfejs API, którego możesz użyć do szybkiego utworzenia struktury aplikacji zgodnie z wytycznymi Material Design.
Scaffold
akceptuje jako parametry kilka elementów kompozycyjnych. Należą do nich:
topBar
: pasek aplikacji na górze ekranu.bottomBar
: pasek aplikacji u dołu ekranu.floatingActionButton
: przycisk w prawym dolnym rogu ekranu, który umożliwia wyświetlenie kluczowych działań.
Szczegółowe przykłady zastosowania górnych i dolnych pasków aplikacji znajdziesz na stronie pasków aplikacji.
Możesz też przekazywać zawartość Scaffold
w taki sam sposób jak do innych kontenerów. Przekazuje ona do funkcji lambda content
wartość innerPadding
, której możesz potem użyć w elementach podrzędnych.
Poniżej znajdziesz pełny przykład implementacji właściwości Scaffold
. Zawiera górny pasek aplikacji, 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(), ) } } }
Implementacja wygląda tak: