如何将ModalBottomSheet高度调整至与TopAppBar齐平？

你的代码结构中，ModalBottomSheetLayout嵌套在Scaffold的content区域内，而Scaffold会自动为content添加TopAppBar高度的顶部内边距，导致BottomSheet的顶部被限制在TopAppBar下方。要实现BottomSheet延伸至TopAppBar位置，可通过以下两种方式解决：

方案一：将ModalBottomSheetLayout移至Scaffold外层 #

把ModalBottomSheetLayout和Scaffold放在同一层级的Box中，让BottomSheet不受Scaffold内边距限制，直接延伸到屏幕顶部（可覆盖TopAppBar）：

Box {
    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(title = { Text("text") })
        }
    ) { paddingValues ->
        Screen(contentPadding = paddingValues)
    }

    // 将BottomSheet放在Scaffold外层
    ModalBottomSheetLayout(
        sheetState = bottomSheetState,
        sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
        sheetContent = {
            // 让内容填充满BottomSheet可用高度
            Column(
                modifier = Modifier
                    .fillMaxHeight()
                    .background(Color.White)
            ) {
                // 这里放入你的BottomSheet内容
                Text("BottomSheet Content", modifier = Modifier.padding(16.dp))
            }
        }
    ) {
        // 空内容，主内容已在Scaffold中
    }
}

方案二：在原结构中调整高度与内边距 #

如果不想改变布局层级，可通过计算高度并调整内边距，让BottomSheet顶部对齐TopAppBar底部：

@Composable
fun Screen(
    bottomSheetState: ModalBottomSheetState
) {
    val topAppBarHeight = TopAppBarDefaults.smallTopAppBarHeight
    val screenHeight = LocalConfiguration.current.screenHeightDp.dp
    // 计算BottomSheet高度：屏幕总高度 - TopAppBar高度
    val targetSheetHeight = screenHeight - topAppBarHeight

    ModalBottomSheetLayout(
        sheetState = bottomSheetState,
        sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
        sheetContent = {
            Column(
                modifier = Modifier
                    .height(targetSheetHeight)
                    .background(Color.White)
            ) {
                // BottomSheet内容
                Text("BottomSheet Content", modifier = Modifier.padding(16.dp))
            }
        },
        content = {
            // 主内容使用系统内边距，避免被状态栏/导航栏遮挡
            val systemPadding = LocalWindowInsets.current.systemBars.asPaddingValues()
            Box(modifier = Modifier.padding(systemPadding)) {
                // 你的屏幕内容
            }
        }
    )
}

// 调用Screen时无需传递Scaffold的paddingValues
Box {
    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(title = { Text("text") })
        }
    ) {
        Screen(bottomSheetState = bottomSheetState)
    }
}

注意事项 #

• 确保bottomSheetState初始状态设为Expanded，才能看到完整高度效果：val bottomSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Expanded)
• 如果使用自定义高度的TopAppBar，需替换TopAppBarDefaults.smallTopAppBarHeight为你的实际TopAppBar高度

内容的提问来源于stack exchange，提问作者Сергей Беляков