Material3中Drawer组件参数与调用识别异常问题

你的代码无法识别Drawer相关参数，核心原因是Material3废弃了Material2中Scaffold集成抽屉的旧API，改用独立的导航抽屉组件体系。以下是适配后的完整代码及关键修改说明：

关键修改点 #

• 移除rememberScaffoldState，改用Material3专属的rememberDrawerState
• 用ModalNavigationDrawer替代原Scaffold的drawerContent参数，作为抽屉的容器
• 抽屉的打开/关闭逻辑直接操作drawerState，不再依赖ScaffoldState

适配后的完整代码 #

@Composable
fun PantallaPrincipal(userViewModel: UserViewModel) {
    val navController = rememberNavController()
    // 替换为Material3的抽屉状态管理
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    // 用ModalNavigationDrawer包裹Scaffold，实现抽屉功能
    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            Drawer(scope = scope, drawerState = drawerState, navController = navController)
        }
    ) {
        Scaffold(
            topBar = { TopBar(scope, drawerState = drawerState) },
            bottomBar = { BottomBar(navController = navController) },
            floatingActionButton = { FloatingBottom(navController = navController) }
        ) { innerPadding ->
            // 传入内边距避免页面内容被Scaffold的Bar遮挡
            Navigation(
                navController = navController,
                userViewModel = userViewModel,
                modifier = Modifier.padding(innerPadding)
            )
        }
    }
}

@Composable
fun DrawerItem(item: navigationDrawer, selected: Boolean, onclick: (navigationDrawer) -> Unit) {
    val itemBackground = if (selected) Color.Gray else Color.Transparent

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(45.dp)
            .background(itemBackground)
            .padding(10.dp)
            .clickable { onclick(item) },
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            imageVector = item.icono,
            contentDescription = item.texto,
            colorFilter = ColorFilter.tint(Color.Black),
            modifier = Modifier
                .height(35.dp)
                .width(35.dp)
        )
        Spacer(modifier = Modifier.width(7.dp))
        Text(
            text = item.texto,
            fontSize = 18.sp,
            color = Color.Black
        )
    }
}

@Composable
fun Drawer(scope: CoroutineScope, drawerState: DrawerState, navController: NavHostController) {
    val listItems = listOf<navigationDrawer>(navigationDrawer.Inicio, navigationDrawer.Favoritos, navigationDrawer.Perfil)
    val rutaActual = navController.currentBackStackEntry?.destination?.route

    Column(modifier = Modifier.background(Color.White)) {
        Image(
            imageVector = Icons.Default.Face,
            contentDescription = "logo",
            modifier = Modifier
                .background(Color.White)
                .height(100.dp)
                .fillMaxWidth()
                .padding(10.dp)
        )
        Spacer(modifier = Modifier
            .fillMaxWidth()
            .height(5.dp)
        )
        listItems.forEach {
            DrawerItem(
                item = it,
                selected = (rutaActual == it.ruta),
                onclick = {
                    navController.navigate(it.ruta)
                    // 直接操作drawerState关闭抽屉
                    scope.launch { drawerState.close() }
                }
            )
        }
    }
}

// 同步更新TopBar组件，用drawerState控制抽屉开关
@Composable
fun TopBar(scope: CoroutineScope, drawerState: DrawerState) {
    TopAppBar(
        title = { Text("主页面") },
        navigationIcon = {
            IconButton(onClick = {
                scope.launch { drawerState.open() }
            }) {
                Icon(Icons.Default.Menu, contentDescription = "打开抽屉")
            }
        }
    )
}

补充说明 #

• 确保依赖使用Material3版本：implementation("androidx.compose.material3:material3:1.2.1")（可替换为最新稳定版）
• DrawerValue、DrawerState需导入androidx.compose.material3包，避免使用Material2的同名类
• 若需要常驻显示的抽屉，可替换为PermanentNavigationDrawer组件

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