使用Voyager嵌套导航时隐藏TabNavigation的方法咨询

问题描述 #

我希望在使用Voyager进行嵌套导航时隐藏tabNavigation，请问是否有可行的实现方式？我在官方文档中未找到相关说明。

实现方案 #

方法一：监听路由状态动态控制TabBar #

给外层TabNavigator绑定路由状态监听器，通过判断当前路由是否属于嵌套页面，来控制TabBar的显示与隐藏：

val shouldHideTabBar = mutableStateOf(false)

TabNavigator(...) {
    onNavigatorStateChanged { state ->
        // 根据自定义的路由key判断是否进入嵌套页面
        shouldHideTabBar.value = state.lastOrNull()?.key is NestedScreenKey
    }

    tabBar { positions ->
        if (!shouldHideTabBar.value) {
            BottomNavigation {
                positions.forEach { position ->
                    BottomNavigationItem(
                        icon = { Icon(...) },
                        label = { Text(...) },
                        selected = position.isSelected,
                        onClick = { position.onSelect() }
                    )
                }
            }
        }
    }
}

方法二：通过Screen回调传递状态 #

在启动嵌套导航的父Screen中传入回调函数，让嵌套页面主动通知外层控制TabBar的可见性：

// 外层Tab对应的Screen
class HomeScreen : Screen {
    @Composable
    override fun Content() {
        val shouldHideTabBar = remember { mutableStateOf(true) }

        Navigator(NestedEntryScreen(
            onEnterNested = { shouldHideTabBar.value = false },
            onExitNested = { shouldHideTabBar.value = true }
        ))

        if (shouldHideTabBar.value) {
            // 渲染TabBar
        }
    }
}

// 嵌套导航入口Screen
class NestedEntryScreen(
    private val onEnterNested: () -> Unit,
    private val onExitNested: () -> Unit
) : Screen {
    @Composable
    override fun Content() {
        // 进入嵌套页面时隐藏TabBar
        LaunchedEffect(Unit) { onEnterNested() }
        // 退出时恢复显示
        DisposableEffect(Unit) { onDispose { onExitNested() } }

        // 嵌套导航内容
        Button(onClick = { LocalNavigator.currentOrThrow.push(NestedDetailScreen()) }) {
            Text("进入详情页")
        }
    }
}

方法三：用自定义CompositionLocal管理状态 #

定义全局的CompositionLocal来维护TabBar的可见性状态，嵌套页面直接更新该状态即可：

// 自定义CompositionLocal
val LocalTabBarVisible = compositionLocalOf { mutableStateOf(true) }

// 外层TabNavigator
TabNavigator(...) {
    val tabBarVisible = LocalTabBarVisible.current
    tabBar { positions ->
        if (tabBarVisible.value) {
            BottomNavigation { /* 渲染TabBar项 */ }
        }
    }
}

// 嵌套详情页
class NestedDetailScreen : Screen {
    @Composable
    override fun Content() {
        val tabBarVisible = LocalTabBarVisible.current
        LaunchedEffect(Unit) { tabBarVisible.value = false }
        DisposableEffect(Unit) { onDispose { tabBarVisible.value = true } }

        // 页面内容
        Text("嵌套详情页面")
    }
}

以上三种方案都能实现嵌套导航时隐藏TabBar的需求，你可以根据项目的结构复杂度选择适配的方案。

内容的提问来源于stack exchange，提问作者Hassen