[英]Add bottomNavigation for navHost in jetpack compose
I have a sample code that has a bottom navigation
, when I click on a view I want to open the ModalBottomSheet
on the navHost but it's not working for me.我有一个
bottom navigation
的示例代码,当我单击一个视图时,我想在ModalBottomSheet
,但它对我不起作用。 how can I do this scenario?我该怎么做这个场景? Note: I used this library for 'ModalBottomSheet'.
注意:我将此库用于“ModalBottomSheet”。
where the NavHost is initialized and I used the 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)
)
}
}
}
}
}
}
This is the my NavHost function that used into the above codes.这是上面代码中使用的我的 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() })
}
)
}
}
And here are the interestedGraph
function that used into above codes这是用于上述代码的
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()
}
}
I have a class that has this function for the screen destination:我有一个对屏幕目标具有此功能的类:
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)
}
}
I have to use bottomSheet()
instead of composable
in this class.我必须在此类中使用
bottomSheet()
而不是composable
的。
Like this:像这样:
@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)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.