Android Compose 显示底部对话框 (ModalBottomSheet)，实现类似BottomSheetDialog的效果

1. ModalBottomSheet

ModalBottomSheet是Compose官方的底部对话框，类似传统View中的BottomSheetDialog，可以实现从底部弹出，并支持滑动关闭的效果。
需要注意的是，这里使用的是material3，然后ModalBottomSheet这个组件目前还是实验性的，未来可能会改变或删除。

@OptIn(ExperimentalMaterial3Api::class)@Composablefun MyModalBottomSheetTest1() { val sheetState = rememberModalBottomSheetState() val scope = rememberCoroutineScope() var showBottomSheet by remember { mutableStateOf(false) } if (showBottomSheet) { ModalBottomSheet( onDismissRequest = { showBottomSheet = false }, sheetState = sheetState ) { // Sheet content Column(Modifier.height(300.dp)) { Button(onClick = {  scope.launch { sheetState.hide() }.invokeOnCompletion { if (!sheetState.isVisible) { showBottomSheet = false }  } }) {  Text(\"Hide bottom sheet\") } } } } Button(onClick = { showBottomSheet = true }, Modifier.padding(50.dp)) { Text(\"show\") }}

效果如下

2. 自定义圆角大小

通过定义ModalBottomSheet的shape可以修改圆角的大小

shape = RoundedCornerShape(topStart = 3.dp, topEnd = 3.dp)

完整代码如下

//修改圆角@OptIn(ExperimentalMaterial3Api::class)@Composablefun MyModalBottomSheetTest2() { val sheetState = rememberModalBottomSheetState() val scope = rememberCoroutineScope() var showBottomSheet by remember { mutableStateOf(false) } if (showBottomSheet) { ModalBottomSheet( shape = RoundedCornerShape(topStart = 3.dp, topEnd = 3.dp), onDismissRequest = { showBottomSheet = false }, sheetState = sheetState ) { // Sheet content Column(Modifier.height(300.dp)) { Button(onClick = {  scope.launch { sheetState.hide() }.invokeOnCompletion { if (!sheetState.isVisible) { showBottomSheet = false }  } }) {  Text(\"Hide bottom sheet\") } } } } Button(onClick = { showBottomSheet = true }, Modifier.padding(50.dp)) { Text(\"show\") }}

效果如下

3. 去除拖动条

对话框顶部的拖动条，我们可能不需要，可以将其去除。
通过定义ModalBottomSheet的dragHandle可以去除拖动条。

dragHandle = {}

完整代码如下

//去除拖动条@OptIn(ExperimentalMaterial3Api::class)@Composablefun MyModalBottomSheetTest3() { val sheetState = rememberModalBottomSheetState() val scope = rememberCoroutineScope() var showBottomSheet by remember { mutableStateOf(false) } if (showBottomSheet) { ModalBottomSheet( dragHandle = {}, onDismissRequest = { showBottomSheet = false }, sheetState = sheetState ) { // Sheet content Column(Modifier.height(300.dp)) { Button(onClick = {  scope.launch { sheetState.hide() }.invokeOnCompletion { if (!sheetState.isVisible) { showBottomSheet = false }  } }) {  Text(\"Hide bottom sheet\") } } } } Button(onClick = { showBottomSheet = true }, Modifier.padding(50.dp)) { Text(\"show\") }}

效果如下

4. 默认半屏，滑动变成全屏

这里我们把Column的高度改为800.dp，运行程序，对话框默认以半屏显示，向上滑动对话框，可以发现，对话框会变为全屏。

//半屏展开@OptIn(ExperimentalMaterial3Api::class)@Composablefun MyModalBottomSheetTest4() { val sheetState = rememberModalBottomSheetState( skipPartiallyExpanded = false, ) val scope = rememberCoroutineScope() var showBottomSheet by remember { mutableStateOf(false) } if (showBottomSheet) { ModalBottomSheet( onDismissRequest = { showBottomSheet = false }, sheetState = sheetState ) { // Sheet content Column(Modifier.height(800.dp)) { Button(onClick = {  scope.launch { sheetState.hide() }.invokeOnCompletion { if (!sheetState.isVisible) { showBottomSheet = false }  } }) {  Text(\"Hide bottom sheet\") } } } } Button(onClick = { showBottomSheet = true }, Modifier.padding(50.dp)) { Text(\"show\") }}

效果如下所示

5. 默认全屏

将skipPartiallyExpanded修改为true，打开对话框的时候，会立即以全屏展示，向下滑动回收的时候，也会跳过半屏阶段。

//全屏展开@OptIn(ExperimentalMaterial3Api::class)@Composablefun MyModalBottomSheetTest5() { val sheetState = rememberModalBottomSheetState( skipPartiallyExpanded = true, ) val scope = rememberCoroutineScope() var showBottomSheet by remember { mutableStateOf(false) } if (showBottomSheet) { ModalBottomSheet( onDismissRequest = { showBottomSheet = false }, sheetState = sheetState ) { // Sheet content Column(Modifier.height(800.dp)) { Button(onClick = {  scope.launch { sheetState.hide() }.invokeOnCompletion { if (!sheetState.isVisible) { showBottomSheet = false }  } }) {  Text(\"Hide bottom sheet\") } } } } Button(onClick = { showBottomSheet = true }, Modifier.padding(50.dp)) { Text(\"show\") }}

效果如下所示

6. 返回键不隐藏弹框

将properties中的shouldDismissOnBackPress设置为false，返回键将不会关闭弹框。

properties = ModalBottomSheetProperties(shouldDismissOnBackPress = false)

7. 修改对话框的主体颜色

containerColor可以修改对话框的主体颜色，如果弹出的弹框底部横条颜色和对话框背景颜色不一样，可以通过修改containerColor来达到颜色一直的效果。

8. 更多ModalBottomSheet的使用

更多ModalBottomSheet的使用详见 : Android Developers | 底部动作条

9. BottomSheetScaffold

BottomSheetScaffold也是Compose官方自带的组件。提供更灵活的交互方式，底部弹窗可通过手势或代码控制展开和折叠，用户能在主界面和底部弹窗之间自由切换操作。
适用于需要频繁在主界面和底部弹窗之间交互的场景，如音乐播放器的播放列表，用户可一边浏览歌曲列表，一边操作主界面的播放控制按钮。

@OptIn(ExperimentalMaterial3Api::class)@Composablefun BottomSheetScaffoldExample() { val sheetState = rememberBottomSheetScaffoldState() BottomSheetScaffold( scaffoldState = sheetState, sheetContent = { Column(Modifier.height(300.dp)) { Text(\"这是底部弹窗内容\") } }, content = { Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center){ Text(\"这是主内容区域\") } } )}

效果如下

10. 其他三方的Compose底部对话框库

10.1 bottomsheetdialog-compose

Github地址 : workspace/bottomsheetdialog-compose

Jetpack Compose BottomSheetDialog 库，允许您像使用 Dialog 的界面一样使用BottomsheetDialog。此外，它还支持在 BottomSheetDialog 显示时设置导航栏颜色。

这个看一下它的源码，可以发现内部调用的BottomSheetDialogWrapper，而BottomSheetDialogWrapper继承自com.google.android.material.bottomsheet.BottomSheetDialog，也就是说，bottomsheetdialog-compose这个库实质上是封装了传统View中的BottomSheetDialog，来提供给Compose使用。

private class BottomSheetDialogWrapper( private var onDismissRequest: () -> Unit, private var properties: BottomSheetDialogProperties, private val composeView: View, layoutDirection: LayoutDirection, density: Density, dialogId: UUID) : BottomSheetDialog( ContextThemeWrapper( composeView.context, if (properties.enableEdgeToEdge) { R.style.TransparentEdgeToEdgeEnabledBottomSheetTheme } else { R.style.TransparentEdgeToEdgeDisabledBottomSheetTheme } ))

10.2 FlexibleBottomSheet

Github地址 : skydoves/FlexibleBottomSheet

FlexibleBottomSheet 是一种高级的 Compose Multiplatform 底部工作表，支持多平台，支持分段大小调整、最大的特点是弹出后，非弹框区域依旧能够操作，类似于高德地图的底部弹框。

解决WindowCompat.setDecorFitsSystemWindows(window, false)情况下，FlexibleBottomSheet弹框的bug

修改源码FlexibleBottomSheetPopup，containSystemBars模式下，去除modifier.windowInsetsPadding(windowInsets)，具体代码如下

@Composable@InternalFlexibleApipublic actual fun FlexibleBottomSheetPopup( onDismissRequest: () -> Unit, windowInsets: WindowInsets, sheetState: FlexibleSheetState, content: @Composable BoxScope.() -> Unit,) { val view = LocalView.current val id = rememberSaveable { UUID.randomUUID() } val parentComposition = rememberCompositionContext() val currentContent by rememberUpdatedState(content) val flexibleBottomSheetWindow = remember { val modifier = Modifier.semantics { this.popup() } if (!sheetState.containSystemBars){ modifier.windowInsetsPadding(windowInsets) } FlexibleBottomSheetWindow( onDismissRequest = onDismissRequest, composeView = view, saveId = id, sheetState = sheetState, ).apply { setCustomContent( parent = parentComposition, content = { Box( modifier.imePadding(), ) { currentContent() } }, ) } } //省略其他代码...}

11 参考

探索 Jetpack Compose 的底部抽屉：BottomSheetScaffold、ModalBottomSheetLayout 和 BackdropScaffold
手撸一个Compose三段式BottomSheetLayout