Wenn Sie ein Tabellenblatt am unteren Rand implementieren möchten, können Sie die zusammensetzbare Funktion ModalBottomSheet verwenden.
Sie können die content-Fläche verwenden, die mithilfe eines ColumnScope ein Layout für zusammensetzbare Funktionen von Tabellenblättern in einer Spalte erstellt:
ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
// Sheet content
}
Das programmatische Maximieren und Minimieren der Tabelle erfolgt mit SheetState. Sie können rememberSheetState verwenden, um eine Instanz von SheetState zu erstellen, die mit dem Parameter sheetState an ModalBottomSheet übergeben werden soll. SheetState bietet Zugriff auf die Funktionen show und hide sowie auf Eigenschaften für den aktuellen Tabellenstatus. Diese Sperrfunktionen erfordern eine CoroutineScope – z. B. mit rememberCoroutineScope – und können als Reaktion auf UI-Ereignisse aufgerufen werden. Achte darauf, die ModalBottomSheet aus der Zusammensetzung zu entfernen, wenn das untere Tabellenblatt ausgeblendet wird.
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")
}
}
}
}
