Jetpack Compose:嵌套导航,在嵌套路径中使用底部栏导航

2024-05-06

我的应用程序具有以下结构,并且由于路线 B ​​有自己的底部导航栏,因此有自己的 NavHost,我如何从屏幕 C(从选项卡栏打开)导航到路线 A?

 - Nested Route "/onboarding_route", startDestination = 'start' 
     - route 'start' -> Screen 'Login' (Composable)
     - route 'legal' -> Screen 'Legal' (Composable)

- Nested Route "/login_route", startDestination = 'login' 
     - route 'login' -> Screen 'Login' (Composable)
     - route 'register' -> Screen 'Register' (composable)
     - route 'recover' -> Screen 'Recover' (composable)

- Nested Route '/main_app', startDestination 'dashboard' => with bottom navigation
     - route 'dashboard' -> Screen 'Dashboard' (composable)
     - route 'product' -> Screen 'Product' (composable)
     - route 'profile' -> Screen 'Profile'
     

导航到路线“main_app”应显示带有三个导航项的底部导航栏。我可以使用每个屏幕(仪表板、产品、配置文件)中带有底部栏的脚手架来完成此操作,或者我可以在顶部添加一个 MainView 屏幕,该屏幕固定带有底部栏的脚手架:

 - Nested Route '/main_app', startDestination 'mainVie/dashboard' => with bottom navigation
     - route 'mainView/{tabname} => Screen 'MainView' with Scaffold & bottom bar
          - route 'dashboard' -> Screen 'Dashboard' (composable)
          - route 'product' -> Screen 'Product' (composable)
          - route 'profile' -> Screen 'Profile'

如果我使用此解决方案,则会遇到以下问题:在“仪表板”、“产品”和“配置文件”屏幕中,我只有底部栏中的导航控制器,并且无法导航到“login_route”等顶级路线。

我认为这是很常见的场景:你有一个入门屏幕、登录/注册屏幕,而且它们都没有底部栏。进入主屏幕后,您希望显示底部栏,然后您可能希望从其中一个屏幕返回登录屏幕。如果整个导航被分隔在嵌套导航路线中(正如谷歌建议的那样),我不知道如何从嵌套屏幕导航回最上面的路线之一。

拥有正确且简洁的导航结构的最佳实践是什么?


首先,你有 mainActivity 和这个 navGraph :

AnimatedNavHost(
    navController = navController,
    startDestination = "onBoarding",
    modifier = modifier
) {
  onBoardingScreen(
   navigateToLegal = {
    navController.navigateToLegal()
   }
   nestedGraphs = {
      legalScreen()
   }
  )
  loginScreen(
   nestedGraphs = {
      registerScreen()
      recoverScreen()
   }
  )
  mainScreen(
   nestedGraphs = {
      productScreen()
      profileScreen()
   }
  )
}

然后在每个屏幕中你可以有这样的东西:

fun NavGraphBuilder.onBoardingScreen(
    nestedGraphs: NavGraphBuilder.() -> Unit,
    navigateToLegal : () -> Unit
) {
   navigation(
       route = "onBoardingGraphRoutePattern",
       startDestination ="start"
   ) {
       composable(
           route ="start",
       ) {
        StartRoute()
       }
       nestedGraphs()
    }
}

对于每个嵌套屏幕,我们有两个这样的函数:

1-

fun NavController.navigateToLegal(
   navOptions: NavOptions? = null
) {
   this.navigate("legal", navOptions)
}

2-

fun NavGraphBuilder.legalScreen() {
  composable(
      route = "legal",
  ) {
      LegalRoute()
  }
}

我认为通过这种模式,您可以在每个屏幕的主导航和嵌套导航图中拥有一个导航控制器,并且可以处理您的应用程序

有关更多信息和更多示例,您可以阅读此项目:现在在安卓系统中 https://github.com/android/nowinandroid

希望对你有帮助:)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jetpack Compose:嵌套导航,在嵌套路径中使用底部栏导航 的相关文章

  • Jetpack 中的波浪框组成

    有没有办法用Canvas制作一个顶部有波浪形的盒子 我想知道这个效果是否可以直接用Canvas来实现 不需要有滚动动画 不太清楚你为什么在谈论Canvas 要裁剪这样的视图 您可以使用自定义Shape并将其应用到您的视图中Modifier
  • JetPack Compose - 卡中行中的weight() 不起作用

    创建 Android 应用程序时 我将一些可组合项放在卡片的一行中 如下所示 但它没有按我的预期工作 我添加 weight 1f 的可组合项不再显示 data class Test val title String val text Str
  • 如何在 svelte 中单击时导航到不同的路径?

    目前在拥有on click preventDefault gt showDetail id and in showDetail我想导航到特定的功能id我正在传递点击按钮 我尝试了常规的javascript方法location assign但
  • 斯威夫特/iOS。从导航堆栈中删除一些视图控制器

    这是我想做的 但我不确定这是否是正确的方法 所以请给我建议如何去做 我有初始 VC 和导航 VC 我从中推送第一个 VC 从中推送第二个 VC 接下来我介绍 来自第二个 VC 的 NavigationController 第三个 VC 现在
  • 使用 Jetpack Compose 仅​​在给定边界内拖动可组合项

    所以我在另一个盒子 边界 内有一个黑盒子 矩形 并且该矩形设置为可拖动 但现在我可以在整个窗口周围拖动矩形 但我希望如果矩形 离开 边界 它应该消失在边界后面 我可以使用其他修改器吗 这里有一些背景 我的代码如下所示 MaterialThe
  • jetpack compose 是否使用drawable-night 文件夹?

    我们有一个基于视图的 Android 应用程序 其中有一些可绘制对象res drawable文件夹 以及夜间模式的对应文件夹res drawable night folder 使用旧视图时 引用可绘制对象R drawable foo从 XM
  • 如何使用 jQuery 检测浏览器是否关闭

    我需要使用 jQuery 检测浏览器是否被关闭 如果是这样 则执行一个事件 我的网站上有一个聊天功能 很像 Facebook 可以让用户在导航到网站结构中的其他页面时保持登录状态 但如果他们单击 则需要将他们从聊天中注销 这样他们就不会在线
  • 单击通知时反应本机导航到特定屏幕

    我正在尝试在用户单击他们收到的通知时实现导航 我已成功收到通知expo notifications并接受来自 API 的数据 路由 但当用户单击通知时无法导航到另一个屏幕 使用通知 export default useNotificatio
  • 更改可组合项的布局方向

    我想将特定可组合项的方向设置为RTL Composable fun ViewToBeChanged Row Image Column Text Title Text Subtitle 是否可以 喷气背包组成布局文档 https develo
  • Android 导航 DeepLinks - 如何区分使用导航操作进行导航与深层链接

    我有导航操作和深层链接 根据您导航的位置 将您带到某个片段 我想确定是使用了深层链接还是仅使用了导航操作 这正是KEY DEEP LINK INTENT https developer android com reference andro
  • 如何对齐文本和图标可组合项,以便即使文本溢出后它们也能保持在一起?

    我有一个文本和一个图标可组合项 我希望图标粘在可组合项的右侧 这是我的代码 Row verticalAlignment Alignment CenterVertically horizontalArrangement Arrangement
  • Jetpack Compose 部分或开放侧边框

    我正在尝试绘制部分或一侧开放的矩形圆形边框以实现此效果 玩了一下之后我得到了这个 这是通过以下方式完成的 RoundedCornerShape topStartPercent 50 bottomStartPercent 50 start R
  • 如何在没有片段的情况下使用导航抽屉?

    我正在尝试遵循这个tutorial https developer android com training implementing navigation nav drawer html关于如何创建导航抽屉 但我不想在用户从抽屉列表中选择
  • 为什么升级到jetpack compose 1.0.0-beta01后没有隐式导入kotlin.collections?

    升级到 jetpack compose 1 0 0 beta01 后 我尝试使用 kotlin collections 中的 arrayListOf listOf 但它们似乎没有隐式导入 您的问题可能与以下内容有关科特林版本您正在使用 我想
  • Android底部导航栏定制

    我已经成功实现了简单的底部栏 它看起来像图 1 但我想进一步自定义它 这样它就可以看起来像 Youtube 的 Android 应用程序中的底部栏 当您单击其中一个项目时 它会传播阴影效果 我当前的底部栏 YouTube 的底部栏 我还想将
  • CSS:将边框应用于选项卡焦点图像

    使用 CSS 如何在使用键盘 TAB 的焦点周围放置边框以在页面中导航 这里展示了如何使用文本而不是图像来完成此操作 http www joepettersson com demo the outline property http www
  • Android Compose MVVM - 如何在不带参数的 Composable 函数中引用 viewModel 对象?

    将如何 Composable ContentFeed 函数访问viewModel哪个是在活动中创建的 依赖注入 或者这是一种错误的做事方式 这viewModel应该始终只有一个实例 MainActivity kt class MainAct
  • SlidingMenu 库和 Android 导航抽屉有什么区别?

    SlidingMenu 库是一个优秀的第三方库 我已经使用它很长时间了 现在我知道 Android 使用导航抽屉提供了一种新的导航模式 它看起来像滑动菜单 那么有人已经使用这两个了吗 有什么区别以及优缺点是什么 多谢 SlidingMenu
  • 在 SwiftUI 中使用可观察对象切换视图

    我正在练习尝试使用 SwiftUI 中的可观察对象切换视图 但我的代码无法正常工作 我知道我可以用 State 来做到这一点 但我想用可观察的对象来实现这一点 当我单击内容视图中的图像时 图像不会改变 有人能帮我吗 内容视图 swift i
  • CSS3 中均匀间隔的导航链接占据 ul 的整个宽度

    我想创建一个水平导航链接列表 其中导航链接均匀分布并占据封闭容器的整个宽度 ul 导航链接可以有不同的宽度 第一个和最后一个链接应与链接的开头和结尾对齐 ul 分别 意味着链接不居中 如下所示 left side right side li

随机推荐

  • 看起来像 iOS7 向左导航 V 形的 Unicode 字符

    最接近 iOS7 向后指向导航栏 V 形的大小 与大写字母一样大或大于大写字母 和形状的 Unicode 字符是什么 我正在寻找一种使用 unicode 字符来模拟通常没有 返回 导航的视图的 向后导航 V 形的方法 常规的 对于锐角比 U
  • 黑白 PNG 转 SVG

    我有一个河流 土地掩码来区分土地与河流 湖泊 该文件的大小为 W 43 200x H 21 600 由于 RAM 立即填满 因此无法打开该文件 我已将文件分成 3600 3600 块 它们可以正常打开 然而 我试图在谷歌地图中绘制陆地上的文
  • 关于 GUI 计时器显示后台线程已用时间的建议?

    Issue 我有一个 PyQt GUI 用户按下按钮即可启动后台线程 workerThread 它是从QThread 我想要一个计时器显示 以QLabel 显示自此以来已经过去了多少时间workerThread开始 我希望这个计时器在wor
  • s60 的 python 希伯来语字符串

    我在 S60 上使用 python 我想使用希伯来语字符串 在 GUI 上表示它们并以短信形式发送它们 看来 PythonScriptShell 不接受这样的表达式 例如 u 我能做些什么 谢谢 事态发展 我添加了这一行 coding ut
  • 如何在 Google Chrome 上启用 WebVR?

    我正在尝试创建一个 WebVR 场景 对于此任务 我想在 Google Chrome 上启用 WebVR 我的操作系统是 Windows 8 我使用打开标志chrome flags WebVR 不存在 我怎样才能启用它 Official c
  • HttpClient 请求拦截器,例如在从服务器获取响应时

    我想在请求尝试命中时打开加载程序弹出窗口 并在收到响应后将其关闭 有什么方法可以使用 httpclient 从一个地方执行它 像这样的事情 Injectable export class I1 implements HttpIntercep
  • 如果 showPopup 仅适用于 API 11,如何将菜单链接到带有 ABS 的视图?

    注意 PopupMenu 在 API 级别 11 及更高版本中可用 http developer android com guide topics ui menus html PopupMenu http developer android
  • 使用 AngularJS 获取 Youtube 视频标题

    我在使用 AngularJS 获取 YouTube 视频标题时遇到问题 这是我到目前为止的代码 服务 js var myServices angular module myServices ngResource myServices fac
  • 如何启动 EC2 实例并在每个实例上上传/运行启动脚本?

    我想自动启动一组 Linux EC2 实例 基本上 我想编写一个脚本 程序 实例化我的给定 AMI 的 N 次出现 对于每个启动的实例 它会上传自定义脚本并让脚本运行到实例中 使用 VMWare 我通常会使用vmrun或 Vix SDK 亚
  • pygame.sprite.Group() 做什么

    我正在关注有关 pygame 的视频 我看到了这段代码 crosshair pygame sprite Group 有人能给我解释一下吗 阅读以下文档pygame sprite Group https www pygame org docs
  • Excel VBA application.visible 立即设置回 True

    我已经设置了一个新的 空的 无模式的用户表单 用最少的代码来解决我的问题 当工作簿打开时 执行以下代码来隐藏 Excel 并显示用户窗体 这是工作簿的唯一代码 Private Sub Workbook Open UserForm1 Show
  • parse_str 在元素前面加上 & 符号?

    我一直在玩 cURL 并尝试将数组作为 POST 变量发送 我决定使用 http build query 按预期传递字符串 curl setopt this gt ch CURLOPT POSTFIELDS http build query
  • 如何计算PHP中内置函数的总数? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 如何计算
  • 如何从 .Net 中的许多 HTML 文件中读取 xpath 值?

    我的一个文件夹中有大约 5000 个 html 文件 我需要循环遍历它们 打开 使用 xpath 获取 10 个值 关闭并存储在 SQL Server 数据库中 使用 Net 读取 xpath 值的最简单方法是什么 xpath 应该相当稳定
  • 如何通过内存将文件上传到Google Drive [python]

    我一直在论坛上搜索 但没有成功解决我的问题 我正在尝试使用 Google Drive Python API 将内存中的文件上传到 Google Drive 但是 我见过的所有示例都使用磁盘上具有特定文件路径和名称的文件 service bu
  • 在 Ada 中定义通用标量类型包

    我想通过制作一个用于操作多项式的 Ada 包来测试编写 Ada 包的水 可以为多种代数结构定义多项式 因此为了反映这一点 我想使该包通用 以便它可以与浮点数 整数或其他数字子类型一起使用 我现在想说 我对 Ada 的类型系统如何工作或者它的
  • 如何设置 Xcode 来代替 Qt Creator 工作?

    我不使用 Qt Creator 的 UI 设计功能 对于一个新项目 我想体验一下使用 Xcode 的工作 这将是一个常规的 Qt 项目 使用 C 和 Qt 库开发 就像在 Qt Creator 中一样 我没有使用 OS X 尤其是 Xcod
  • 使用 PHP 的 JavaScript atob 操作

    我想知道是否可以使用 PHP 解密 JavaScript 加密文本 使用 JavaScript 的 btoa 函数加密 看一下base64 decode http php net manual en function base64 deco
  • XML声明编码

    它实际上有什么作用 根据我的基本理解 XML 只是一种格式化文本 所以不涉及二进制文本转换 我高度怀疑 UTF 8 和 ASCII 编码之间的唯一区别是 ASCII 编码会将所有非 ASCII 字符转换为 XML 实体 而不是仅保留 XML
  • Jetpack Compose:嵌套导航,在嵌套路径中使用底部栏导航

    我的应用程序具有以下结构 并且由于路线 B 有自己的底部导航栏 因此有自己的 NavHost 我如何从屏幕 C 从选项卡栏打开 导航到路线 A Nested Route onboarding route startDestination s