在ScaffoldJetpackCompose内的特定屏幕上隐藏顶部和底部导航器

html5 • • 问答

我正在创建一个带有底部导航和抽屉的简单应用程序。

我将所有屏幕都包裹在带有顶栏和底栏的 Scaffold 中。我想隐藏特定屏幕上的顶部栏和底部栏。有谁知道如何实现

这是设置导航的代码。

val navController = rememberNavController()
val scaffoldState = rememberScaffoldState(rememberDrawerState(DrawerValue.Closed))

Scaffold(
    bottomBar = {
        AppBottomBar(navController)
    },
    topBar = {
        AppTopBar(scaffoldState)
    },
    drawerContent = {
        DrawerContent(navController, scaffoldState)
    },
    scaffoldState = scaffoldState
) {
    // ovoid bottom bar overlay content
    Column(modifier = Modifier.padding(bottom = 58.dp)) {
        AppNavigation(navController)
    }
}

AppNavigation包含NavHost用于导航到屏幕

回答

现在，我可以通过检查当前路由来显示或隐藏 bottomBar、topBar 来实现这一点。但我认为必须有更好的解决方案。我将所有屏幕都包裹在 Scaffold 中的方式可能不对。

val navController = rememberNavController()
val scaffoldState = rememberScaffoldState(rememberDrawerState(DrawerValue.Closed))

Scaffold(
    bottomBar = {
        if (currentRoute(navController) != "Example Screen") {
            AppBottomBar(navController)
        }
    },
    topBar = {
        AppTopBar(scaffoldState)
    },
    drawerContent = {
        DrawerContent(navController, scaffoldState)
    },
    floatingActionButton = {
        FloatingButton(navController)
    },
    scaffoldState = scaffoldState
) {
    // ovoid bottom bar overlay content
    Column(modifier = Modifier.padding(bottom = 58.dp)) {
        AppNavigation(navController)
    }
}

@Composable
public fun currentRoute(navController: NavHostController): String? {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    return navBackStackEntry?.arguments?.getString(KEY_ROUTE)
}

  • Yep, that's exactly how Compose works: if you don't want your `AppBottomBar` to appear, don't output it.
以上是在ScaffoldJetpackCompose内的特定屏幕上隐藏顶部和底部导航器的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>