Jetpack Compose中如何让Material3底部弹窗置于底部导航栏上方且可拖拽？

方案一：使用官方ModalBottomSheetLayout（推荐） #

Material3的ModalBottomSheetLayout会自动适配Scaffold的底部导航栏高度，让弹窗停在导航栏上方，且自带拖拽折叠功能，无需手动计算偏移量。

代码示例：

val navController = rememberNavController()
// 控制底部弹窗状态，允许部分展开
val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false)
val scope = rememberCoroutineScope()

// 用ModalBottomSheetLayout包裹整个Scaffold
ModalBottomSheetLayout(
    sheetState = sheetState,
    // 你的底部弹窗内容
    sheetContent = {
        BottomSheetUi()
    }
) {
    Scaffold(
        bottomBar = {
            NavigationBarComponent(navController = navController)
        }
    ) { innerPadding ->
        Background(Modifier.padding(innerPadding)) {
            EVBackground {
                // 页面内容区域
                // 调用此方法打开弹窗：scope.launch { sheetState.show() }
                // 关闭弹窗：scope.launch { sheetState.hide() }
            }
        }
    }
}

方案二：自定义BottomSheet时手动计算偏移 #

如果是自己实现的底部弹窗，需要获取导航栏高度并设置底部偏移：

1. 获取Material3导航栏的默认高度：

val bottomBarHeight = with(LocalDensity.current) {
    NavigationBarDefaults.Height.toPx()
}

2. 给自定义BottomSheet添加底部内边距：

BottomSheetUi(
    modifier = Modifier.padding(bottom = bottomBarHeight)
)

或者通过偏移调整位置：

BottomSheetUi(
    modifier = Modifier.offset(y = -bottomBarHeight)
)

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