Jeśli chcesz zaimplementować dolną planszę, możesz użyć funkcji kompozycyjnej ModalBottomSheet.
Możesz użyć boksu content, który używa ColumnScope do układania w kolumnie funkcji kompozycyjnych treści w arkuszu:
ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
// Sheet content
}
Automatyczne rozwijanie i zwijanie arkusza odbywa się za pomocą metody SheetState. Za pomocą rememberSheetState możesz utworzyć instancję SheetState, która powinna być przekazana do ModalBottomSheet za pomocą parametru sheetState. SheetState zapewnia dostęp do funkcji show i hide, a także do właściwości związanych z bieżącym stanem arkusza. Te funkcje zawieszania wymagają elementu CoroutineScope (np. za pomocą rememberCoroutineScope) i można je wywoływać w odpowiedzi na zdarzenia interfejsu. Pamiętaj, aby usunąć element ModalBottomSheet z kompozycji po ukryciu dolnego arkusza.
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")
}
}
}
}
