Tworzenie panelu dolnego
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Dolna karta zawiera treści dodatkowe, które są przymocowane u dołu ekranu.
Zgodność wersji
Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.
Zależności
Wdrażanie planszy dolnej
Aby wdrożyć schowisko, użyj komponentu ModalBottomSheet:
Rozwijanie i zwijanie arkusza
Aby rozwinąć lub zwinąć arkusz, użyj SheetState:
Najważniejsze punkty
- Użyj slotu
content, który wykorzystuje element ColumnScope do rozmieszczania elementów treści arkusza w kolumnie.
- Użyj polecenia
rememberSheetState, aby utworzyć instancję usługi SheetState, którą przekazujesz do usługi ModalBottomSheet za pomocą parametru sheetState.
SheetState zapewnia dostęp do funkcji show i hide oraz do właściwości związanych z bieżącym stanem arkusza. Te funkcje wymagają parametru CoroutineScope (na przykład rememberCoroutineScope) i mogą być wywoływane w odpowiedzi na zdarzenia interfejsu użytkownika.
Pamiętaj, aby usunąć ModalBottomSheet z kompozycji, gdy ukrywasz dolny panel.
Wyniki
Rysunek 1. Standardowa plansza dolna (po lewej) i modalna plansza dolna (po prawej).
Kolekcje zawierające ten przewodnik
Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:
Wyświetlanie komponentów interaktywnych
Dowiedz się, jak funkcje składane 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.
[null,null,["Ostatnia aktualizacja: 2025-02-06 UTC."],[],[],null,["# Create a bottom sheet\n\n\u003cbr /\u003e\n\nA bottom sheet shows secondary content, anchored to the bottom of the screen.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\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\nImplement a bottom sheet\n------------------------\n\nTo implement a [bottom sheet](https://m3.material.io/components/bottom-sheets/overview), use the [`ModalBottomSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalBottomSheet(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.SheetState,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,kotlin.Function0,kotlin.Function0,androidx.compose.material3.ModalBottomSheetProperties,kotlin.Function1))\ncomposable:\n\n\u003cbr /\u003e\n\n```kotlin\nModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {\n // Sheet content\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L364-L366\n \n```\n\n\u003cbr /\u003e\n\nExpand and collapse the sheet\n-----------------------------\n\nTo expand and collapse the sheet, use [`SheetState`](/reference/kotlin/androidx/compose/material3/SheetState):\n\n\u003cbr /\u003e\n\n```kotlin\nval sheetState = rememberModalBottomSheetState()\nval scope = rememberCoroutineScope()\nvar showBottomSheet by remember { mutableStateOf(false) }\nScaffold(\n floatingActionButton = {\n ExtendedFloatingActionButton(\n text = { Text(\"Show bottom sheet\") },\n icon = { Icon(Icons.Filled.Add, contentDescription = \"\") },\n onClick = {\n showBottomSheet = true\n }\n )\n }\n) { contentPadding -\u003e\n // Screen content\n\n if (showBottomSheet) {\n ModalBottomSheet(\n onDismissRequest = {\n showBottomSheet = false\n },\n sheetState = sheetState\n ) {\n // Sheet content\n Button(onClick = {\n scope.launch { sheetState.hide() }.invokeOnCompletion {\n if (!sheetState.isVisible) {\n showBottomSheet = false\n }\n }\n }) {\n Text(\"Hide bottom sheet\")\n }\n }\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L370-L408\n \n```\n\n\u003cbr /\u003e\n\n### Key points\n\n- Use the `content` slot, which uses a [`ColumnScope`](/reference/kotlin/androidx/compose/foundation/layout/ColumnScope) to lay out sheet content composables in a column.\n- Use [`rememberSheetState`](/reference/kotlin/androidx/compose/material3/package-summary#rememberSheetState(kotlin.Boolean,kotlin.Function1)) to create an instance of `SheetState` that you pass to `ModalBottomSheet` with the `sheetState` parameter.\n- `SheetState` provides access to the [`show`](/reference/kotlin/androidx/compose/material3/SheetState#show()) and [`hide`](/reference/kotlin/androidx/compose/material3/SheetState#hide()) functions\n and to properties related to the current sheet state. These functions\n require a `CoroutineScope` --- for example, [`rememberCoroutineScope`](/reference/kotlin/androidx/compose/runtime/package-summary#remembercoroutinescope) ---\n and can be called in response to UI events.\n\n- Make sure to remove the `ModalBottomSheet` from composition when you hide\n the bottom sheet.\n\nResults\n-------\n\n\n**Figure 1.** A standard bottom sheet (left) and a modal bottom sheet (right).\n\n\u003cbr /\u003e\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### 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)"]]
