Android Jetpack Compose 多层导航

Question

我有多个目的地，其中一些目的地还有由导航组件表示的附属目的地，可以与之交互。

NavigationBar {
    page1 {
        NavigationBar {
            innerPager1
            innerPager2
            .....     
        }
    }
    page2 {....}
}

我只想要不包括导航栏（innerPager1 & 2）的部分切换而不是整个页面（page1），这可以用navController吗？如果可以怎么实现？

Answer 1

我不确定我是否完全理解您的问题，但我将从寻找关于 Scaffold 组件的 documents 开始。正如您将看到的，您可以集成您正在寻找的 BottomBar 组件等。要仅切换 innerPage 内容，您需要更改 innerPadding 内容。这是一般架构：

@Composable
fun MyLayout() {
    Scaffold(
        bottomBar = { MyBottomBar() }
    ) { innerPadding ->
        BodyContent(Modifier.padding(innerPadding))
    }
}

有许多可能的方法来更改 BodyContent。我要引用其中的几个：

使用State切换调用的@Composable方法：

var selectedTab by rememberSaveable { mutableStateOf(BottomNavItemTab.TAB_1) }
...
...
innerPadding ->
        Box(modifier = Modifier.padding(0.dp, 0.dp, 0.dp, innerPadding.calculateBottomPadding())) {
when (selectedTab) {
                    BottomNavItemTab.TAB_1 -> Tab1_Screen()
                    BottomNavItemTab.TAB_2 -> Tab2_Screen()
                    BottomNavItemTab.TAB_3 -> Tab3_Screen()
                }
}

使用导航组件。在这种情况下，我建议您阅读 official docs，因为它们提供了非常详细的示例。

请记住，您不会被迫只使用这些解决方案中的一种，而是可以将它们结合起来。我之所以这么说，是因为同时实现带和不带 BottomBar 的选项卡导航并非易事。

Android Jetpack Compose 多层导航

Android Jetpack Compose Multiple Layer Navigation

android

android-jetpack-navigation

android-jetpack-compose