是否可以使用下拉菜单作为导航？

Question

我正在尝试使用下拉菜单作为我正在构建的应用程序的导航。但是，我在下拉菜单项的 onClick 函数中收到一个错误，提示“未解决的引用”。

我尝试遵循this课程，但这种方式对我不起作用。它使用常规按钮进行导航，但我想使用下拉菜单。我尝试用谷歌搜索错误并尝试了一些可能的解决方案，但没有一个对我有用。

下面是下拉菜单的代码

@Composable
fun TopAppBarDropdownMenu() {
    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
            }
        )
    }
}

这是 NavHost 的代码

@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
            )
        }
    ) { 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)
                    }
                )
            }
        }
    }
}

Answer 1

在您的

DropdownMenuItem

中，未定义

onNavigatePagina2()

函数。

在您的 NavHost 中，您将

onNavigatePagina2()

函数传递给

Pagina1Screen

。因此，在

Pagina1Screen

可组合项中，您将能够调用该函数。但您没有将其传递给

TopAppBarDropdownMenu

可组合项，因此您无法在那里调用它。

您可以将该函数传递给您的

TopAppBarDropdownMenu

以使其可用。
首先，按如下方式更改您的

PresentTest

可组合项：

//...
Scaffold(
    topBar = {
        PresentTestAppBar(
            currentScreen = currentScreen,
            onNavigatePagina2 = {
                navController.navigate(Pagina.Pagina2.name)
            }
        )
    }
) {
    //...
}

然后更新

PresentTestAppBar

可组合项，如下所示：

@Composable
PresentTestAppBar(currentScreen: Pagina, onNavigatePagina2: () -> Unit) {
    //...
    actions = { TopAppBarDropdownMenu(onNavigatePagina2) }
    //...
}

最后，修改您的

TopAppBarDropdownMenu

可组合项，然后您的代码应该可以工作：

@Composable
fun TopAppBarDropdownMenu(onNavigatePagina2: () -> Unit) {
   
    //... now, you can call the onNavigatePagina2() function here

}