如果想要實作底部功能表,可以使用 ModalBottomSheet
可組合項。
您可以使用 content
版位,後者使用 ColumnScope
來版面配置工作表內容可組合項:
ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) { // Sheet content }
使用 SheetState
,以程式輔助方式展開及收合工作表。您可以使用 rememberSheetState
建立應使用 sheetState
參數傳送至 ModalBottomSheet
的 SheetState
執行個體。SheetState
可讓您存取 show
和 hide
函式,以及與目前工作表狀態相關的屬性。這些暫停函式需要 CoroutineScope
(例如使用 rememberCoroutineScope
),並可用來呼叫以回應 UI 事件。在隱藏底部功能表時,請務必將 ModalBottomSheet
從組合中移除。
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") } } } }