Jetpack Compose如何组合组件实现含BottomAppBar、Modal Bottom Sheet的Scaffold布局

核心层级逻辑 #

你需要的模态底部弹窗要求层级高于BottomAppBar，因此直接将ModalBottomSheetLayout作为最外层容器，把配置好顶栏、正文、底栏的Scaffold整体作为ModalBottomSheetLayout的content参数传入即可，完美匹配你要求的层级顺序。

具体层级结构 #

• 最外层：ModalBottomSheetLayout（负责弹窗内容配置、状态管理，弹窗层级默认高于其内部所有内容）
  • 内部content参数：Scaffold
    • topBar参数：实现你的TopAppBar逻辑
    • content参数：实现正文内容区域，注意使用传入的innerPadding调整内边距，避免内容被上下栏遮挡
    • bottomAppBar参数：实现你的BottomAppBar逻辑

完整示例代码 #

import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun TargetLayout() {
    // 底部弹窗状态
    val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
    val coroutineScope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetState = sheetState,
        // 配置弹窗内容
        sheetContent = {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Text("模态底部弹窗内容", style = MaterialTheme.typography.h6)
                Spacer(modifier = Modifier.height(16.dp))
                Button(onClick = {
                    coroutineScope.launch { sheetState.hide() }
                }) {
                    Text("关闭弹窗")
                }
                Spacer(modifier = Modifier.height(32.dp))
            }
        }
    ) {
        // 内部放完整的Scaffold
        Scaffold(
            topBar = {
                TopAppBar(title = { Text("页面标题") })
            },
            bottomBar = {
                BottomAppBar {
                    Text("底部导航栏", modifier = Modifier.padding(horizontal = 16.dp))
                    Spacer(modifier = Modifier.weight(1f))
                    // 点击触发弹窗
                    Button(onClick = {
                        coroutineScope.launch { sheetState.show() }
                    }) {
                        Text("打开弹窗")
                    }
                }
            }
        ) { innerPadding ->
            // 正文内容区域
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(innerPadding),
            ) {
                Text("正文内容区域", modifier = Modifier.align(Alignment.Center))
            }
        }
    }
}

注意事项 #

• ModalBottomSheet的弹出/收起逻辑需要在协程中调用，所以需要用到rememberCoroutineScope来获取协程作用域
• Scaffold的content参数拿到的innerPadding一定要应用到正文内容的根布局上，否则会出现内容被TopAppBar或BottomAppBar遮挡的问题

内容的提问来源于stack exchange，提问作者Arrowsome