Jetpack Compose如何同时实现Scaffold底部导航栏与高度可调底部底页

方案1：使用Material 3 BottomSheetScaffold（最优方案） #

Material 3 版本的BottomSheetScaffold原生支持传入bottomBar参数，可直接配置底部导航栏，同时保留底部底页的高度完全自定义能力，示例代码如下：

val bottomSheetState = rememberStandardBottomSheetState(initialValue = SheetValue.Hidden)
val scaffoldState = rememberBottomSheetScaffoldState(bottomSheetState = bottomSheetState)

BottomSheetScaffold(
    scaffoldState = scaffoldState,
    sheetContent = {
        // 这里可以自由设置底页高度，固定高度、自适应、最大最小高度限制都支持
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .heightIn(min = 100.dp, max = 400.dp) // 自定义高度范围
        ) {
            // 底页内容
        }
    },
    topBar = { /* 顶部栏配置 */ },
    bottomBar = { 
        // 直接在这里配置你的底部导航栏即可
        BottomNavigation {
            // 底部导航项配置
        }
    },
    content = { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            // 页面主内容
        }
    }
)

方案2：修正ModalBottomSheetLayout的高度配置 #

如果要继续使用ModalBottomSheetLayout嵌套Scaffold的方案，无法调整底页高度是因为没有给sheetContent的根布局明确设置高度约束，添加对应Modifier即可实现高度自定义，示例代码如下：

val modalBottomSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)

ModalBottomSheetLayout(
    sheetState = modalBottomSheetState,
    sheetContent = {
        // 给根布局加上高度约束即可自由调整高度
        Column(
            modifier = Modifier
                .fillMaxWidth()
                // 可根据需求替换为.height(300.dp)固定高度，或wrapContentHeight()自适应内容高度
                .heightIn(max = 500.dp) 
        ) {
            // 底页内容
        }
    }
) {
    Scaffold(
        topBar = { /* 顶部栏配置 */ },
        bottomBar = { 
            BottomNavigation {
                // 底部导航项配置
            }
        },
        content = { innerPadding ->
            Box(modifier = Modifier.padding(innerPadding)) {
                // 页面主内容
            }
        }
    )
}

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