Material3中ScaffoldState报Unresolved Reference错误的解决方法

问题描述 #

在使用Material3进行Jetpack Compose开发时，Android Studio对ScaffoldState抛出Unresolved Reference错误，相关代码及依赖配置如下：

出错代码 #

import androidx.compose.foundation.clickable
import androidx.compose.material3.*
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.navigation.NavController
import kotlinx.coroutines.launch

@Composable
fun CustomAppBar(
    title: String,
    backGroundColor: Color = Color.White,
    actions: @Composable () -> Unit = { },
    scaffoldState: ScaffoldState? = null, // Errors here...
    navController: NavController,
) {
    val scope = rememberCoroutineScope()

    SmallTopAppBar(
        title = {
            Text(
                title,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        },
        colors = TopAppBarDefaults.smallTopAppBarColors(
            containerColor = containerBackGroundColor,
            titleContentColor = titleContentColor
        ),
        navigationIcon = if (navController?.previousBackStackEntry != null) {
            {
                IconButton(onClick = { navController.navigateUp() }) {
                    Icon(
                        imageVector = Icons.Filled.ArrowBack,
                        contentDescription = "Back"
                    )
                }
            }
        } else {
            {
                IconButton(onClick = {
                    scope.launch {
                        scaffoldState?.drawerState?.open()
                    }
                }) {
                    Icon(
                        Icons.Filled.Menu,
                        contentDescription = "Nav drawer icon",
                    )
                }
            }
        },
        actions = {
            actions()
        }
    )
}

依赖配置 #

implementation "androidx.core:core-ktx:1.8.0"
implementation "androidx.compose.ui:ui:1.2.1"
implementation "androidx.compose.material3:material3:1.0.0-beta01"
implementation "androidx.compose.ui:ui-tooling-preview:1.2.1"
implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.3.1"
implementation "androidx.activity:activity-compose:1.3.1"
implementation "androidx.compose.compiler:compiler:1.3.0"
implementation "androidx.navigation:navigation-runtime:2.5.1"
implementation "com.google.accompanist:accompanist-navigation-animation:0.23.1"

解决方案 #

1. 替换ScaffoldState为Material3的对应类型 #

Material3中移除了Material2的ScaffoldState，将其拆分为独立的状态类：

• DrawerState：专门管理侧边抽屉状态
• TopAppBarState：专门管理顶部应用栏滚动状态

你的代码仅用到抽屉功能，直接将参数类型改为DrawerState?即可：

@Composable
fun CustomAppBar(
    title: String,
    backGroundColor: Color = Color.White,
    actions: @Composable () -> Unit = { },
    drawerState: DrawerState? = null, // 替换原ScaffoldState参数
    navController: NavController,
) {
    val scope = rememberCoroutineScope()

    SmallTopAppBar(
        // 其他代码保持不变
        navigationIcon = if (navController?.previousBackStackEntry != null) {
            // 返回按钮逻辑不变
        } else {
            {
                IconButton(onClick = {
                    scope.launch {
                        drawerState?.open() // 直接调用DrawerState的open方法
                    }
                }) {
                    Icon(
                        Icons.Filled.Menu,
                        contentDescription = "Nav drawer icon",
                    )
                }
            }
        },
        // 其他代码保持不变
    )
}

2. 正确创建并传递DrawerState #

在包含侧边抽屉的父Composable中，通过rememberDrawerState()创建状态实例，再传递给CustomAppBar：

@Composable
fun MainScreen(navController: NavController) {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = { /* 抽屉内容布局 */ }
    ) {
        Scaffold(
            topBar = {
                CustomAppBar(
                    title = "主页",
                    drawerState = drawerState, // 传递DrawerState
                    navController = navController
                )
            }
        ) { paddingValues ->
            // 页面主体内容
        }
    }
}

3. 升级Material3依赖版本（可选） #

当前使用的1.0.0-beta01是较早的测试版本，建议升级到稳定版以避免API兼容问题，例如：

implementation "androidx.compose.material3:material3:1.2.1"

同时需确保Compose核心依赖版本与Material3版本匹配。

内容的提问来源于stack exchange，提问作者Raj Narayanan