Criar uma página inferior
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Uma página inferior mostra conteúdo secundário, ancorado na parte de baixo da tela.
Compatibilidade de versões
Essa implementação exige que o minSDK do projeto seja definido como nível 21 da API ou
mais recente.
Dependências
Implementar uma página inferior
Para implementar uma página inferior, use o elemento combinável
ModalBottomSheet:
Abrir e fechar a página
Para abrir e fechar a página, use SheetState:
Pontos principais
- Use o slot
content, que usa um ColumnScope para definir o layout dos elementos
combináveis de conteúdo da página em uma coluna.
- Use
rememberSheetState para criar uma instância do SheetState que você
transmite para ModalBottomSheet com o parâmetro sheetState.
SheetState fornece acesso às funções show e hide
e a propriedades relacionadas ao estado atual da página. Essas funções
exigem um CoroutineScope, por exemplo, rememberCoroutineScope,
e podem ser chamadas em resposta a eventos da IU.
Remova o ModalBottomSheet da composição ao ocultar
a página inferior.
Resultados
Figura 1. Uma página inferior padrão (à esquerda) e uma página modal (à direita).
Coleções que contêm este guia
Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem
metas mais amplas de desenvolvimento para Android:
Mostrar componentes interativos
Aprenda como as funções combináveis podem permitir que você crie
componentes de interface bonitos com base no sistema de design
do Material Design.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-02-06 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-02-06 UTC."],[],[],null,["\u003cbr /\u003e\n\nA bottom sheet shows secondary content, anchored to the bottom of the screen.\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nImplement a bottom sheet\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\nExpand and collapse the sheet\n\nTo expand and collapse the sheet, use [`SheetState`](/reference/kotlin/androidx/compose/material3/SheetState):\n\nKey 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**Figure 1.** A standard bottom sheet (left) and a modal bottom sheet (right).\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \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 \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)"]]
