Scaffold
W stylu Material Design rusztowanie to podstawowa struktura, która zapewnia ustandaryzowanej platformy do obsługi złożonych interfejsów. Łączy go ze sobą elementów interfejsu, takich jak paski aplikacji i pływające przyciski poleceń, nadając aplikacjom spójny wygląd i styl.
Przykład
Funkcja kompozycyjna Scaffold
to prosty interfejs API, którego można użyć do:
szybko stworzyć strukturę aplikacji zgodnie z wytycznymi Material Design.
Scaffold
akceptuje jako parametry kilka elementów kompozycyjnych. Są to m.in.:
:
topBar
: pasek aplikacji na górze ekranu.bottomBar
: pasek aplikacji u dołu ekranu.floatingActionButton
: przycisk znajdujący się w prawym dolnym rogu strony ekranu, na którym możesz ujawnić kluczowe działania.
Bardziej szczegółowe przykłady implementacji zarówno górnych, jak i u dołu paski aplikacji, zobacz stronę pasków aplikacji.
Możesz też przekazywać zawartość Scaffold
w taki sam sposób jak do innych kontenerów. Pomija
wartość innerPadding
funkcji lambda content
, której możesz potem użyć w elemencie podrzędnym
elementów kompozycyjnych.
Poniższy przykład zawiera pełny przykład implementacji
Scaffold
Zawiera górny pasek aplikacji, dolny pasek aplikacji i pływające działanie
przycisk, 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:
![Implementacja rusztowania, która zawiera proste paski u góry i dołu aplikacji oraz pływający przycisk polecenia, który wykonuje iterację licznika. Wewnętrzna zawartość rusztowania to prosty tekst wyjaśniający działanie komponentu.](https://developer.android.com/static/develop/ui/compose/images/components/scaffold.png?authuser=0000&hl=pl)