在jetpack compose中為navHost添加bottomNavigation

Question

我有一個bottom navigation的示例代碼，當我單擊一個視圖時，我想在ModalBottomSheet ，但它對我不起作用。 我該怎么做這個場景？ 注意：我將此庫用於“ModalBottomSheet”。

NavHost 的初始化位置，我使用了ModalBottomSheet

@Composable
fun NiaApp(windowSizeClass: WindowSizeClass) {
    NiaTheme {
        val bottomSheetNavigator = rememberBottomSheetNavigator()
        val navController = rememberNavController(bottomSheetNavigator)
        val niaTopLevelNavigation = remember(navController) {
            NiaTopLevelNavigation(navController)
        }

        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentDestination = navBackStackEntry?.destination

        NiaBackground {
            ModalBottomSheetLayout(bottomSheetNavigator) {
                Scaffold(
                    modifier = Modifier,
                    containerColor = Color.Transparent,
                    contentColor = MaterialTheme.colorScheme.onBackground,
                    bottomBar = {
                        if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact) {
                            NiaBottomBar(
                                onNavigateToTopLevelDestination = niaTopLevelNavigation::navigateTo,
                                currentDestination = currentDestination
                            )
                        }
                    }
                ) { padding ->
                    Row(
                        Modifier
                            .fillMaxSize()
                            .windowInsetsPadding(
                                WindowInsets.safeDrawing.only(
                                    WindowInsetsSides.Horizontal
                                )
                            )
                    ) {
                        if (windowSizeClass.widthSizeClass != WindowWidthSizeClass.Compact) {
                            NiaNavRail(
                                onNavigateToTopLevelDestination = niaTopLevelNavigation::navigateTo,
                                currentDestination = currentDestination,
                                modifier = Modifier.safeDrawingPadding()
                            )
                        }

                        NiaNavHost(
                            windowSizeClass = windowSizeClass,
                            navController = navController,
                            modifier = Modifier
                                .padding(padding)
                                .consumedWindowInsets(padding)
                        )
                    }
                }
            }
        }
    }
}

這是上面代碼中使用的我的 NavHost 函數。

@Composable
fun NiaNavHost(
    windowSizeClass: WindowSizeClass,
    modifier: Modifier = Modifier,
    navController: NavHostController = rememberNavController(),
    startDestination: String = ForYouDestination.route,
) {
    NavHost(
        navController = navController,
        startDestination = startDestination,
        modifier = modifier,
    ) {
        forYouGraph(
            windowSizeClass = windowSizeClass
        )
        interestsGraph(
            navigateToTopic = {
// When I click on a view it will run here and I expect the ModalBottomSheet to be open with a text. this callback is called but the bottomSheet is not opened
                bottomSheet("${TopicDestination.route}/$it") {
                    Text(text = "dfffsfsdfsfsf")
                }
            },
            navigateToAuthor = {                navController.navigate("${AuthorDestination.route}/$it") },
            nestedGraphs = {
                topicGraph(onBackClick = { navController.popBackStack() })
                authorGraph(onBackClick = { navController.popBackStack() })
            }
        )
    }
}

這是用於上述代碼的interestedGraph函數

fun NavGraphBuilder.interestsGraph(
    navigateToTopic: (String) -> Unit,
    navigateToAuthor: (String) -> Unit,
    nestedGraphs: NavGraphBuilder.() -> Unit

) {
    navigation(
        route = InterestsDestination.route,
        startDestination = InterestsDestination.destination
    ) {
        composable(route = InterestsDestination.destination) {
            InterestsRoute(
                navigateToTopic = navigateToTopic,
                navigateToAuthor = navigateToAuthor,
            )
        }
        nestedGraphs()
    }
}

Answer 1

我有一個對屏幕目標具有此功能的類：

object TopicDestination : NiaNavigationDestination {
    override val route = "topic_route"
    override val destination = "topic_destination"
    const val topicIdArg = "topicId"
}

fun NavGraphBuilder.topicGraph(
    onBackClick: () -> Unit
) {
    composable(
        route = "${TopicDestination.route}/{${TopicDestination.topicIdArg}}",
        arguments = listOf(
            navArgument(TopicDestination.topicIdArg) {
                type = NavType.StringType
            }
        )
    ) {
        TopicRoute(onBackClick = onBackClick)
    }
}

我必須在此類中使用bottomSheet()而不是composable的。

像這樣：

@OptIn(ExperimentalMaterialNavigationApi::class)
fun NavGraphBuilder.topicGraph(
    onBackClick: () -> Unit
) {
    bottomSheet(
        route = "${TopicDestination.route}/{${TopicDestination.topicIdArg}}",
        arguments = listOf(
            navArgument(TopicDestination.topicIdArg) {
                type = NavType.StringType
            }
        )
    ) {
        TopicRoute(onBackClick = onBackClick)
    }
}