能否用Dropdown Menu作导航？DropdownMenuItem报未解析引用错误

问题原因 #

你在TopAppBarDropdownMenu组件的第二个DropdownMenuItem里调用了onNavigatePagina2()，但这个函数既没在TopAppBarDropdownMenu的参数里定义，也没在该组件的作用域内声明，编译器找不到这个函数，所以报“未解析引用”错误。

解决步骤 #

1. 给TopAppBarDropdownMenu添加导航回调参数

修改组件定义，把需要的导航函数作为参数传入：

@Composable
fun TopAppBarDropdownMenu(
    onNavigatePagina2: () -> Unit // 新增导航回调参数
) {
    val expanded = remember { mutableStateOf(false) }
    
    Box(
        Modifier
            .wrapContentSize(Alignment.TopEnd)
    ) {
        IconButton(
            onClick = {
                expanded.value = true
            }
        ) {
            Icon(
                Icons.Filled.Menu,
                contentDescription = "Menu"
            )
        }
    }

    DropdownMenu(
        expanded = expanded.value,
        onDismissRequest = { expanded.value = false}
    ) {
        DropdownMenuItem(
            text = {
                Text(text = stringResource(R.string.pagina_1))
            },
            onClick = {
                expanded.value = false
            }
        )

        Divider()

        DropdownMenuItem(
            text = {
                Text(text = stringResource(R.string.pagina_2))
            },
            onClick = {
                onNavigatePagina2() // 现在可正常调用
                expanded.value = false
            }
        )
    }
}

2. 让PresentTestAppBar接收并传递导航回调

假设PresentTestAppBar是包裹TopAppBarDropdownMenu的顶部栏组件，修改它的参数并传递导航逻辑：

@Composable
fun PresentTestAppBar(
    currentScreen: Pagina,
    onNavigatePagina2: () -> Unit // 新增参数
) {
    TopAppBar(
        title = { Text(currentScreen.name) },
        actions = {
            // 把导航回调传给下拉菜单组件
            TopAppBarDropdownMenu(onNavigatePagina2 = onNavigatePagina2)
        }
    )
}

3. 在PresentTest中传递具体导航逻辑

回到主组件，把navController的导航逻辑传给顶部栏：

@Composable
fun PresentTest(
    navController: NavHostController = rememberNavController()
) {
    val backStackEntry by navController.currentBackStackEntryAsState()
    val currentScreen = Pagina.valueOf(
        backStackEntry?.destination?.route ?: Pagina.Pagina1.name
    )
    Scaffold(
        topBar = {
            PresentTestAppBar(
                currentScreen = currentScreen,
                // 传递跳转到Pagina2的具体逻辑
                onNavigatePagina2 = { navController.navigate(Pagina.Pagina2.name) }
            )
        }
    ) { innerPadding ->
        NavHost(
            navController = navController,
            startDestination = Pagina.Pagina1.name,
            modifier = Modifier.padding(innerPadding)
        ) {
            composable(route = Pagina.Pagina1.name) {
                Pagina1Screen(
                    onNavigatePagina2 = {
                        navController.navigate(Pagina.Pagina2.name)
                    }
                )
            }
            composable(route = Pagina.Pagina2.name) {
                Pagina2Screen(
                    onNavigatePagina1 = {
                        navController.navigate(Pagina.Pagina1.name)
                    }
                )
            }
        }
    }
}

如果后续需要给Pagina1也添加下拉菜单跳转，用同样的方式新增onNavigatePagina1参数即可，保持组件之间的解耦。

内容的提问来源于stack exchange，提问作者Jeffrey Huig