Páginas inferiores

Exemplo de uma página inferior modal do Material Design 3.

Se você quiser implementar uma página inferior, use o elemento ModalBottomSheet que pode ser composto.

Você pode usar o slot content, que usa um ColumnScope para definir o layout dos conteúdos combináveis da página em uma coluna:

ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
    // Sheet content
}
MaterialLayoutSnippets.kt

Controlar o estado da planilha de maneira programática

Para abrir e fechar a página de forma programática, use SheetState. É possível usar rememberSheetState para criar uma instância de SheetState que precisa ser transmitida para ModalBottomSheet com o parâmetro sheetState. SheetState fornece acesso às funções show e hide, além de propriedades relacionadas ao estado atual da página. Essas funções de suspensão exigem um CoroutineScope, por exemplo, usando rememberCoroutineScope, e podem ser chamadas em resposta a eventos da interface. Remova o ModalBottomSheet da composição ao ocultar a parte de baixo da tela.

val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }
Scaffold(
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show bottom sheet") },
            icon = { Icon(Icons.Filled.Add, contentDescription = "") },
            onClick = {
                showBottomSheet = true
            }
        )
    }
) { contentPadding ->
    // Screen content

    if (showBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = {
                showBottomSheet = false
            },
            sheetState = sheetState
        ) {
            // Sheet content
            Button(onClick = {
                scope.launch { sheetState.hide() }.invokeOnCompletion {
                    if (!sheetState.isVisible) {
                        showBottomSheet = false
                    }
                }
            }) {
                Text("Hide bottom sheet")
            }
        }
    }
}
MaterialLayoutSnippets.kt

Uma caixa de diálogo modal na parte de baixo da tela no Jetpack Compose mostrando conteúdo.