暖人先暖心 發表於 2025-4-24 15:13:00

Compose里Navigation导航的优雅跳转

<blockquote>
<p>原文地址: Compose里Navigation导航的优雅跳转-Stars-One的杂货小窝</p>
</blockquote>
<p>之前Jetpack Compose学习(11)——Navigation页面导航的使用此文讲解了对应的使用步骤</p>
<p>到新公司接手一个新的项目,发现其中的路由导航写法有些可取之处,特意做下笔记(也算是Navigation新版本的一个特性讲解)</p>
<p>先贴下一份简单的代码(可以发现,路由直接写了一个类就完成了,传参也比较方便了)</p>
<pre><code class="language-kotlin">@Composable
fun App() {
    AIcameraTheme {
      val navController = rememberNavController()

      CompositionLocalProvider(
            MyLocal.LocalNavController provides navController,
      ) {
            NavHost(navController,startDestination = Pages.Home) {
                composable&lt;Pages.Home&gt; {
                  HomePage()
                }

                composable&lt;Pages.Camera&gt; {
                  CameraPage()
                }
            }
      }
    }
}
</code></pre>
<blockquote>
<p>不过需要注意下: navigationCompose版本为2.8.0,低版本可能不支持上面的泛型传参哦!!</p>
</blockquote>
<h2 id="步骤说明">步骤说明</h2>
<h3 id="1依赖相关添加">1.依赖相关添加</h3>
<p>libs.version.tomal添加下面</p>
<pre><code>
kotlinxSerialization = "1.7.10"
kotlinxSerializationJson = "1.3.3"
navigationCompose = "2.8.0"


kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinxSerializationJson" }
androidx-navigation-compose = { module = "androidx.navigation:navigation-compose", version.ref = "navigationCompose" }



kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlinxSerialization" }
ksp = { id = "com.google.devtools.ksp", version.ref = "ksp" }
</code></pre>
<p>在项目级别gradle文件:</p>
<pre><code>plugins {
        //添加此行
    alias(libs.plugins.kotlin.serialization) apply false
}
</code></pre>
<p>在app级别gradle文件:</p>
<pre><code>plugins {
        alias(libs.plugins.kotlin.serialization)
}

dependencies {
        implementation(libs.androidx.navigation.compose)
        implementation(libs.kotlinx.serialization.json)
}
</code></pre>
<h3 id="2页面类">2.页面类</h3>
<pre><code class="language-kotlin">data object Pages{

    @Serializable
    data object Home

    @Serializable
    data object Camera
}
</code></pre>
<p>使用</p>
<pre><code>@Composable
fun App() {
    AIcameraTheme {
      val navController = rememberNavController()

      CompositionLocalProvider(
            MyLocal.LocalNavController provides navController,
      ) {
            NavHost(navController,startDestination = Pages.Home) {
                composable&lt;Pages.Home&gt; {
                  HomePage()
                }

                composable&lt;Pages.Camera&gt; {
                  CameraPage()
                }
            }
      }
    }
}
</code></pre>
<h2 id="如果页面跳转携带参数呢">如果页面跳转携带参数呢?</h2>
<p>这里给出一个简单例子</p>
<pre><code class="language-kotlin">data object Pages{

    @Serializable
    data class About(val author: String)
}

@Composable
fun AboutPage(data:Pages.About) {

}


NavHost(navController,startDestination = Pages.Home) {
        composable&lt;Pages.About&gt; {
                AboutPage(it.toRoute())
        }
}

//在页面跳转的生活,直接构建对应的对象即可,如下
navController.navigate(Pages.About("mydata"))
</code></pre>
<p>上述的方法,比起之前版本需要自行在路由构建url,写上<code>?</code>和<code>&amp;</code>号实在是方便许多!</p>


</div>
<div id="MySignature" role="contentinfo">
    <hr>
<span>提问之前，请先看</span>提问须知
<span>点击右侧图标发起提问</span>
<img border="0" src="http://wpa.qq.com/pa?p=2:1053894518:52" alt="联系我" title="联系我">
<span>或者加入QQ群一起学习</span>
<img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="Stars-One安卓学习交流群" title="Stars-One安卓学习交流群">
TornadoFx学习交流群:1071184701
<img src="https://img2020.cnblogs.com/blog/1210268/202003/1210268-20200316120825333-1551152974.png" width="1000" height="auto">
<img src="https://img2018.cnblogs.com/blog/1210268/201905/1210268-20190508151523126-971809604.gif" width="1000" height="auto">
<!--<img src="https://img2020.cnblogs.com/blog/1210268/202004/1210268-20200413161422035-1188549898.gif" width="1000" height="auto">--><br><br>
来源：https://www.cnblogs.com/stars-one/p/18844650
頁: [1]
查看完整版本: Compose里Navigation导航的优雅跳转