关于compose中的navigation

关于compose中navigation的基本使用,可以参考

https://medium.com/@KaushalVasava/navigation-in-jetpack-compose-full-guide-beginner-to-advanced-950c1133740

包含navigation的使用,大部分我们是在会发送一些一次性的事件,然后在activity中通过事件来进行导航的切换。

然后最近在pl的视频中看到这个项目

https://github.com/philipplackner/NavigationFromViewModel

通过viewmode中发送事件,在activity中接收时间,并完成navigator的navigation。通过kotin注入navigator,这样减少在很多地方对navController的引用,也便于测试。

viewmodel 通过navigator的具体实现类来发送事件到channel,activity监听channel中的事件,调用navcontroller来进行导航。

在多模块中用导航的时候呢

Compose Navigation用于Android多module项目最佳实践_android compose navigation-优快云博客

前后对比区别主要在于 NavGraphBuilder 的引入,封装导航代码

  • 将导航代码封装为一组相关屏幕,方法是将其放置 放在单独的文件中
  • 通过在 NavGraphBuilder 上创建扩展函数来公开目的地
  • 通过在 NavController 上创建扩展函数来公开导航事件
  • 使用 internal 确保屏幕和路由类型不会公开
//在专门的ArticleNavigation.kt 文件中

private const val articleIdArg = "articleId"

//通过扩展NavGraphBuilder函数来公开目的地
fun NavGraphBuilder.articleScreen(onNavigateBack: () -> Unit) {
    composable("article/{$articleIdArg}") {
        val viewModel: ArticleViewModel = hiltViewModel()
        ArticleScreen(
            viewModel = viewModel,
            onNavigateBack = onNavigateBack
        )
    }
}

// NavController 上创建扩展函数来公开导航事件
fun NavController.navigateToArticle(articleId: String) {
    this.navigate("article/$articleId")
}

//使用 internal 确保屏幕和路由类型不会公开
internal class ArticleArgs(articleId: String) {
    constructor(savedStateHandle: SavedStateHandle) :
            this(checkNotNull(savedStateHandle[articleIdArg]) as String)
}

模块的层级也进行组织,从一开始的APP引用所有模块,改为,app引用 home 和 article,

home 再引用articles,setting,about

### Jetpack Compose 导航的使用方法 Jetpack Compose 提供了一种现代化的方式来构建用户界面,而 `Navigation` 是其中用于管理屏幕之间导航的核心组件之一。以下是关于如何实现和解决常见问题的一些详细说明。 #### 1. 基本概念 Compose 的导航库允许开发者通过声明式的 API 来定义应用中的不同目的地以及它们之间的转换逻辑。核心类包括 `NavHost`, `NavController`, 和 `composable()` 函数[^2]。 - **NavHost**: 它是一个容器,负责承载所有的可组合函数作为目标页面。 - **NavController**: 控制器对象,用来触发导航动作并维护返回栈的状态。 - **Composable Functions (Destination)**: 表示各个独立视图或者片段的功能单元。 #### 2. 设置环境 要开始使用 Navigation,请先添加依赖项到项目的 build.gradle 文件中: ```gradle dependencies { implementation "androidx.navigation:navigation-compose:2.7.0" } ``` 此版本号应替换为你当前项目支持的最新稳定版[^3]。 #### 3. 创建简单的导航结构 下面展示了一个基本的例子来演示如何设置两个屏幕间的切换操作: ```kotlin import androidx.compose.runtime.Composable import androidx.navigation.NavType import androidx.navigation.navArgument import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable import androidx.navigation.compose.rememberNavController @Composable fun AppNavigation() { val navController = rememberNavController() NavHost(navController = navController, startDestination = "home") { composable("home") { HomeScreen(navController) } composable( route = "details/{itemId}", arguments = listOf(navArgument("itemId") { type = NavType.IntType }) ) { backStackEntry -> DetailsScreen(itemId = backStackEntry.arguments?.getInt("itemId")) } } } @Composable fun HomeScreen(navController: NavController) { Button(onClick = { navController.navigate("details/42") }) { Text(text = "Go to Detail Screen") } } @Composable fun DetailsScreen(itemId: Int?) { Column { Text(text = "Item ID is $itemId") } } ``` 上述代码展示了从主页跳转至详情页的过程,并传递参数给后者处理[^4]。 #### 4. 处理深链接 除了常规内部路由外,还可以配置外部 URL 映射以便直接打开特定位置的内容。例如: ```kotlin navGraphBuilder.deepLink { uriPattern = "https://example.com/details/{id}" } ``` 这样当访问指定 URI 格式时会自动映射对应的目标节点[^5]。 #### 5. 解决可能遇到的问题 如果发现某些功能无法正常工作,则可以尝试以下几个方面排查原因: - 确认所使用的 compose 版本是最新的; - 检查是否有遗漏必要的初始化步骤; - 对于复杂状态共享场景考虑引入 ViewModel 或其他数据管理层级设计模式优化交互流程;
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值