在 Jetpack Compose 中使用导航抽屉在可组合物之间导航答案

【问题标题】：Navigating between composable's using a Navigation Drawer in Jetpack Compose在 Jetpack Compose 中使用导航抽屉在可组合物之间导航
【发布时间】：2022-08-10 00:51:09
【问题描述】：

我正在尝试为 jetpack compose 中的抽屉图标/文本字段设置导航，但不完全确定如何正确执行。如何设置导航，以便每当我单击其中一个图标时，我都会导航到该可组合屏幕？这是目前我的主抽屉布局：


@Composable
fun MainDrawer() {

    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()
    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            AppBar(
                onNavigationIconClick = {
                    scope.launch {
                        scaffoldState.drawerState.isOpen
                    }
                }
            )
        },
        drawerContent = {
            DrawerHeader()
            DrawerBody(
                items = listOf(
                    MenuItem(

                        id = \"item1\",
                        title = \"item1\",
                        contentDescription = \"Go to item1 screen\",
                        icon = Icons.Default.Home
                    ),
                    MenuItem(
                        id = \"item2\",
                        title = \"item2\",
                        contentDescription = \"Go to item2 screen\",
                        icon = Icons.Default.Settings
                    ),
                    MenuItem(
                        id = \"item3\",
                        title = \"item3\",
                        contentDescription = \"Ge to item3\",
                        icon = Icons.Default.Info
                    ),
                    MenuItem(
                        id = \"item4\",
                        title = \"item4\",
                        contentDescription = \"Go to Your item4\",
                        icon = Icons.Default.Info
                    ),
                    MenuItem(
                        id = \"item5\",
                        title = \"item5\",
                        contentDescription = \"Your item5\",
                        icon = Icons.Default.Info
                    ),
                    MenuItem(
                        id = \"item6\",
                        title = \"item6\",
                        contentDescription = \"Your item6\",
                        icon = Icons.Default.Info
                    ),
                    MenuItem(
                        id = \"item7\",
                        title = \"item7\",
                        contentDescription = \"item7\",
                        icon = Icons.Default.Info
                    ),
                    MenuItem(
                        id = \"item8\",
                        title = \"item8\",
                        contentDescription = \"item8\",
                        icon = Icons.Default.Info
                    ),
                )
            ) {
                println(\"Clicked on ${it.title}\")
            }
        }
    ) {

    }
}

抽屉主体：这包含身体的元素

@Composable
fun DrawerBody(
    items: List<MenuItem>,
    modifier: Modifier = Modifier,
    itemTextStyle: TextStyle = TextStyle(fontSize = 18.sp),
    onItemClick: (MenuItem) -> Unit
) {
    LazyColumn(modifier) {
        items(items) { item ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable {
                        onItemClick(item)
                    }
                    .padding(16.dp)
            ) {
                Icon(
                    imageVector = item.icon,
                    contentDescription = item.contentDescription
                )
                Spacer(modifier = Modifier.width(16.dp))
                Text(
                    text = item.title,
                    style = itemTextStyle,
                    modifier = Modifier.weight(1f)
                )
            }
        }

    }

}

有什么问题？您已经为该菜单项添加了 onItemClick 查找路线，然后导航到该路线..
是的，但是如何为每次点击添加可组合的屏幕。目前，当我单击图标时，它根本没有导航。我是否需要创建一个单独的 navController 和 NavHost 以添加到 MainDrawer 中，或者我该如何实现？
是的，您可能需要创建一个 navhost 和 navcontroller，并将所需的可组合项作为可组合路由添加到 navhost。
对我将如何做那件事有任何建议吗？

标签： android kotlin navigation-drawer android-jetpack-compose

【解决方案1】：

我设法解决了这个问题。我是这样做的：

首先将依赖项添加到您的项目中：

 // Navigation with Compose
    implementation "androidx.navigation:navigation-compose:2.5.0"

    // Modal Drawer Layout
    implementation "androidx.drawerlayout:drawerlayout:1.1.1"

首先为应用程序创建 TopAppBar。这是以下代码：


@Composable
fun TopBar(scope: CoroutineScope, scaffoldState: ScaffoldState) {
    TopAppBar(
        title = { Text(text = stringResource(R.string.app_name), fontSize = 18.sp) },
        navigationIcon = {
            IconButton(onClick = {
                scope.launch {
                    scaffoldState.drawerState.open()
                }
            }) {
                Icon(Icons.Filled.Menu, "")
            }
        },
        backgroundColor = colorResource(id = R.color.purple_200),
        contentColor = Color.White
    )
}

创建抽屉

【讨论】：