Jetpack Compose Material3中Scaffold的scaffoldState与抽屉参数错误

Material3 对 Scaffold、抽屉和顶部导航栏的 API 做了大幅调整，以下是针对你遇到的四个问题的具体修复方案：

问题修复细节 #

1. 替代 rememberScaffoldState() #

Material3 不再使用统一的 ScaffoldState，而是拆分出抽屉状态和顶部栏状态，分别用 rememberDrawerState() 和协程作用域管理：

val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()

2. 适配 Scaffold 参数 #

Material3 的 Scaffold 没有 scaffoldState 参数，抽屉状态通过单独的 drawerState 参数传入，抽屉内容通过 drawerContent 参数设置：

Scaffold(
    topBar = { /* 顶部栏实现 */ },
    drawerState = drawerState,
    drawerContent = { /* 抽屉面板内容 */ }
) { innerPadding ->
    // 主内容区域，使用 innerPadding 避免被顶部栏/抽屉遮挡
    Box(modifier = Modifier.padding(innerPadding)) {
        // 你的页面内容
    }
}

3. 调整 TopAppBar 实现 #

Material3 的 SmallTopAppBar（对应原 Material1 的 TopAppBar）不再接收 scaffoldState 和 scope 参数，而是在菜单点击事件中直接通过协程作用域控制抽屉状态：

SmallTopAppBar(
    title = { Text("Material3 导航示例") },
    navigationIcon = {
        IconButton(onClick = {
            scope.launch {
                drawerState.open()
            }
        }) {
            Icon(Icons.Default.Menu, contentDescription = "打开抽屉")
        }
    }
)

4. 抽屉面板的打开/关闭操作 #

Material3 中抽屉状态的切换必须在协程作用域内执行，通过 scope.launch 调用 drawerState.open()/drawerState.close()：

// 在抽屉内容中添加关闭按钮示例
IconButton(onClick = {
    scope.launch {
        drawerState.close()
    }
}) {
    Icon(Icons.Default.Close, contentDescription = "关闭抽屉")
}

完整适配后的 MainActivity.kt 示例 #

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SmallTopAppBar
import androidx.compose.material3.Text
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val drawerState = rememberDrawerState(DrawerValue.Closed)
            val scope = rememberCoroutineScope()

            ModalNavigationDrawer(
                drawerState = drawerState,
                drawerContent = {
                    ModalDrawerSheet {
                        Text("抽屉菜单项 1", modifier = Modifier.padding(16.dp))
                        Text("抽屉菜单项 2", modifier = Modifier.padding(16.dp))
                        IconButton(onClick = {
                            scope.launch {
                                drawerState.close()
                            }
                        }) {
                            Icon(Icons.Default.Close, contentDescription = "关闭抽屉")
                        }
                    }
                }
            ) {
                Scaffold(
                    topBar = {
                        SmallTopAppBar(
                            title = { Text("Material3 导航") },
                            navigationIcon = {
                                IconButton(onClick = {
                                    scope.launch {
                                        drawerState.open()
                                    }
                                }) {
                                    Icon(Icons.Default.Menu, contentDescription = "打开抽屉")
                                }
                            }
                        )
                    }
                ) { innerPadding ->
                    Box(modifier = Modifier.padding(innerPadding)) {
                        Text("主内容区域")
                    }
                }
            }
        }
    }
}

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