Wenn Sie ein Bottom Sheet implementieren möchten, können Sie das ModalBottomSheet-Komposit verwenden.
Sie können den content-Slot verwenden, bei dem mithilfe eines ColumnScope Tabelleninhalte in einer Spalte angeordnet werden:
ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
// Sheet content
}
Mit SheetState können Sie das Tabellenblatt programmatisch maximieren und minimieren. Mit rememberSheetState können Sie eine Instanz von SheetState erstellen, die mit dem Parameter sheetState an ModalBottomSheet übergeben werden soll. SheetState bietet Zugriff auf die Funktionen show und hide sowie auf Eigenschaften, die sich auf den aktuellen Tabellenstatus beziehen. Für diese Funktionen ist ein CoroutineScope erforderlich, z. B. rememberCoroutineScope. Sie können als Reaktion auf UI-Ereignisse aufgerufen werden. Entfernen Sie das ModalBottomSheet aus der Komposition, wenn Sie das untere Blatt ausblenden.
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")
}
}
}
}
