Utwórz element szablonu, który będzie zawierać interfejs użytkownika
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
W Material Design szkielet to podstawowa struktura, która zapewnia standaryzowaną platformę dla złożonych interfejsów użytkownika. Łączy ona różne części interfejsu, takie jak paski aplikacji i pływające przyciski, zapewniając spójny wygląd i działanie aplikacji.
Zgodność wersji
Ta implementacja wymaga, aby w projekcie ustawiona była minimalna wersja pakietu SDK na poziomie 21 lub wyższym.
Zależności
Tworzenie rusztowania
Poniższy przykład pokazuje, jak wdrożyć Scaffold. Zawiera on pasek aplikacji u góry, pasek aplikacji u dołu i pływający przycisk polecenia, który reaguje na stan wewnętrzny aplikacji Scaffold.
Wyniki
Rysunek 1. Implementacja szablonu.
Najważniejsze punkty
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 pozwala na wykonywanie kluczowych działań.
Bardziej szczegółowe przykłady implementowania pasków aplikacji u góry i u dołu znajdziesz na stronie poświęconej paskom aplikacji.
Możesz też przekazywać treści Scaffold tak samo jak do innych kontenerów. Przekazuje ona funkcji lambda innerPadding wartość content, której możesz następnie używać w podrzędnych składanych elementach.
Kolekcje zawierające ten przewodnik
Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze cele związane z tworzeniem aplikacji na Androida:
Tworzenie szablonu ekranu głównego
Dowiedz się, jak używać standardowej platformy do tworzenia złożonych interfejsów użytkownika. Szablon łączy ze sobą różne części interfejsu, zapewniając spójny wygląd i działanie aplikacji.
Dowiedz się, jak funkcje kompozytowe mogą ułatwić tworzenie atrakcyjnych komponentów interfejsu użytkownika na podstawie systemu projektowania Material Design.
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-02-06 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2025-02-06 UTC."],[],[],null,["# Create a scaffold component to hold the UI together\n\n\u003cbr /\u003e\n\nIn Material Design, a scaffold is a fundamental structure that provides a\nstandardized platform for complex user interfaces. It holds together different\nparts of the UI, such as app bars and floating action buttons, giving apps a\ncoherent look and feel.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21\nor higher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a scaffold\n-----------------\n\nThe following example provides a full example of how you might implement\n[`Scaffold`](/reference/kotlin/androidx/compose/material/package-summary#Scaffold(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.material.ScaffoldState,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.material.FabPosition,kotlin.Boolean,kotlin.Function1,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)). It contains a top app bar, bottom app bar, and a floating action\nbutton that interacts with `Scaffold`'s internal state.\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun ScaffoldExample() {\n var presses by remember { mutableIntStateOf(0) }\n\n Scaffold(\n topBar = {\n TopAppBar(\n colors = topAppBarColors(\n containerColor = MaterialTheme.colorScheme.primaryContainer,\n titleContentColor = MaterialTheme.colorScheme.primary,\n ),\n title = {\n Text(\"Top app bar\")\n }\n )\n },\n bottomBar = {\n BottomAppBar(\n containerColor = MaterialTheme.colorScheme.primaryContainer,\n contentColor = MaterialTheme.colorScheme.primary,\n ) {\n Text(\n modifier = Modifier\n .fillMaxWidth(),\n textAlign = TextAlign.Center,\n text = \"Bottom app bar\",\n )\n }\n },\n floatingActionButton = {\n FloatingActionButton(onClick = { presses++ }) {\n Icon(Icons.Default.Add, contentDescription = \"Add\")\n }\n }\n ) { innerPadding -\u003e\n Column(\n modifier = Modifier\n .padding(innerPadding),\n verticalArrangement = Arrangement.spacedBy(16.dp),\n ) {\n Text(\n modifier = Modifier.padding(8.dp),\n text =\n \"\"\"\n 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.\n\n It also contains some basic inner content, such as this text.\n\n You have pressed the floating action button $presses times.\n \"\"\".trimIndent(),\n )\n }\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Scaffold.kt#L47-L100\n \n```\n\n\u003cbr /\u003e\n\nResults\n-------\n\n**Figure 1.** An implementation of scaffold.\n\nKey points\n----------\n\nThe [`Scaffold`](/reference/kotlin/androidx/compose/material/ScaffoldState) composable provides a straightforward API you can use to\nquickly assemble your app's structure according to Material Design guidelines.\n`Scaffold` accepts several composables as parameters. Among these are the\nfollowing:\n\n- `topBar`: The app bar across the top of the screen.\n- `bottomBar`: The app bar across the bottom of the screen.\n- `floatingActionButton`: A button that hovers over the bottom-right corner of the screen that you can use to expose key actions.\n\nFor more detailed examples on how you can implement both top and bottom\napp bars, see the app bars page.\n\nYou can also pass `Scaffold` content as you would to other containers. It passes\nan `innerPadding` value to the `content` lambda that you can then use in child\ncomposables.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Create a home screen scaffold\n\nFind out how to use a standardized platform to build complex user interfaces. The scaffold holds together different parts of the UI, giving apps a coherent look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/create-a-home-screen-scaffold) \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
