您可以部分显示底部动作条,然后让用户将其全屏显示或关闭。
为此,请向 ModalBottomSheet
传递一个 SheetState
实例,并将 skipPartiallyExpanded
设置为 false
。
示例
以下示例演示了如何使用 ModalBottomSheet
的 sheetState
属性在开始时仅部分显示工作表:
@Composable fun PartialBottomSheet() { var showBottomSheet by remember { mutableStateOf(false) } val sheetState = rememberModalBottomSheetState( skipPartiallyExpanded = false, ) Column( modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally, ) { Button( onClick = { showBottomSheet = true } ) { Text("Display partial bottom sheet") } if (showBottomSheet) { ModalBottomSheet( modifier = Modifier.fillMaxHeight(), sheetState = sheetState, onDismissRequest = { showBottomSheet = false } ) { Text( "Swipe up to open sheet. Swipe down to dismiss.", modifier = Modifier.padding(16.dp) ) } } } }
有关代码的要点
在此示例中,请注意以下几点:
showBottomSheet
用于控制应用是否显示底部动作条。sheetState
是SheetState
的实例,其中skipPartiallyExpanded
为 false。ModalBottomSheet
接受一个修饰符,以确保它在完全展开时填满屏幕。ModalBottomSheet
接受sheetState
作为其sheetState
参数的值。- 因此,工作表在首次打开时仅显示部分内容。然后,用户可以拖动或滑动屏幕,使其全屏显示或关闭。
onDismissRequest
lambda 可控制用户尝试关闭底部动作条时发生的情况。在本例中,此操作仅移除工作表。
成果
当用户首次按下该按钮时,动作条会显示部分内容:
![最初仅填充部分屏幕的底部动作条。用户可以滑动屏幕使其填满屏幕,也可以将其关闭](https://developer.android.google.cn/static/develop/ui/compose/images/components/bottom-sheet-partial.png?hl=zh-cn)
如果用户向上滑动工作表,则它会填满整个屏幕:
![用户已展开即可填充屏幕的底部动作条。](https://developer.android.google.cn/static/develop/ui/compose/images/components/bottom-sheet-fullscreen.png?hl=zh-cn)