BottomSheetScaffold使用问题：按钮唤起MailView及内容位置调整

一、初始代码的错误原因 #

• 旧API已废弃/实验性：你使用的BottomSheetState(BottomSheetValue.Hidden)属于旧版实验性Material API，目前官方推荐使用Material 3的StandardBottomSheet系列API，BottomSheetValue.Hidden也不再直接可用，需通过rememberStandardBottomSheetState的skipHiddenState参数控制隐藏状态。
• 参数传递错误：BottomSheetScaffold没有直接的sheetState参数，需通过scaffoldState传入，而scaffoldState要通过rememberBottomSheetScaffoldState创建，内部包含bottomSheetState实例。
• 变量引用错误：按钮代码里的sheetState未定义，应引用scaffoldState.bottomSheetState，且显示弹窗的方法是expand()而非旧API的show()。
• 组件参数缺失：自定义的MailView要求传入onClose回调，需确保每次调用都正确传递该参数。

二、修复后可正常触发的完整代码 #

你更新后的代码存在语法错误（MailView后多了一个闭合括号），以下是修正后的可运行代码：

@Composable
fun MainScreen() {
    val scope = rememberCoroutineScope()
    // 创建支持隐藏状态的BottomSheetState，skipHiddenState=false允许隐藏
    val bottomSheetState = rememberStandardBottomSheetState(
        initialValue = SheetValue.Hidden,
        skipHiddenState = false
    )
    val scaffoldState = rememberBottomSheetScaffoldState(bottomSheetState = bottomSheetState)

    BottomSheetScaffold(
        scaffoldState = scaffoldState,
        sheetContent = {
            // 传递onClose回调，触发后隐藏底部弹窗
            MailView(onClose = {
                scope.launch {
                    bottomSheetState.hide()
                }
            })
        },
        content = { innerPadding ->
            // 主内容区域，使用innerPadding避免被系统栏或弹窗遮挡
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(innerPadding),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Button(
                    onClick = {
                        scope.launch {
                            // 展开底部弹窗
                            bottomSheetState.expand()
                        }
                    },
                    colors = ButtonDefaults.buttonColors(
                        containerColor = Color(0xffae52de)
                    )
                ) {
                    Text("打开邮件视图")
                }
            }
        },
        // 初始peekHeight设为0，确保弹窗完全隐藏
        sheetPeekHeight = 0.dp
    )
}

// 示例MailView组件定义
@Composable
fun MailView(onClose: () -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .height(300.dp)
            .background(Color.White)
            .padding(16.dp),
        horizontalAlignment = Alignment.End
    ) {
        Button(onClick = onClose) {
            Text("关闭")
        }
        Text("邮件视图内容")
    }
}

三、解决内容位置偏低的问题 #

BottomSheetScaffold的content默认会添加适配系统栏、弹窗占位的innerPadding，如果觉得内容位置偏低，可通过两种方式调整：

方式1：自定义padding覆盖默认值 #

在content的modifier中，按需调整默认的innerPadding参数：

content = { innerPadding ->
    Column(
        modifier = Modifier
            .fillMaxSize()
            // 自定义padding，减少底部偏移
            .padding(
                top = innerPadding.calculateTopPadding(),
                start = 16.dp,
                end = 16.dp,
                bottom = 8.dp // 替换默认的底部padding
            ),
        // 其他布局属性
    ) {
        // 主内容
    }
}

方式2：关闭默认的content insets #

通过contentWindowInsets参数移除默认的padding：

BottomSheetScaffold(
    scaffoldState = scaffoldState,
    sheetContent = { /* ... */ },
    content = {
        // 无需使用innerPadding，直接自定义布局
        Column(
            modifier = Modifier.fillMaxSize().padding(16.dp),
            // ...
        ) {
            // 主内容
        }
    },
    sheetPeekHeight = 0.dp,
    // 关闭默认的content insets
    contentWindowInsets = WindowInsets(0)
)

关键注意事项 #

• 确保依赖使用Material 3库（androidx.compose.material3:material3），Material 2的BottomSheetScaffold已标记为实验性且API过时。
• 操作BottomSheetState的expand()、hide()方法必须在CoroutineScope中执行，需通过rememberCoroutineScope()获取作用域。
• 设置初始状态为SheetValue.Hidden时，必须将skipHiddenState设为false，否则无法启用隐藏状态。

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