Jetpack Compose 页面跳转 - 导航Navigation使用和封装

当我们在项目中使用Jetpack Compose进行页面编写的时候，在进行页面跳转时，官方推荐使用单Activity + 多Compose模式，当然老的多Activity方式仍能正常使用，只是Activity间的跳转消耗资源大，效率没有Compose间页面跳转的效率高，故推荐使用单Activity + 多Compose模式，本文主要介绍单Activity多Compose页面跳转的导航实现。

实现逻辑：

1、启动Activity时，显示Splash页面；

2、点击Splash页面按钮，跳转到Guide页面；

3、点击Guide页面按钮；返回Splash页面。

一、创建Splash页面

创建Splash页面，包含icon+版权文本，点击版权文本，将点击事件回传到上层进行逻辑处理。

SplashRoute.kt

/*年轻人，只管向前看，不要管自暴自弃者的话*/
package com.composetest.page.splash

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.composetest.R
import com.composetest.ui.theme.ComposeTestTheme

/**
 * create by itz on 2024/10/10 15:59
 * desc :
 **/

@Composable
fun SplashRoute(toGuide: () -> Unit) {
    SplashScreen(toGuide = toGuide)
}

@Composable
fun SplashScreen(toGuide: () -> Unit = {}) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_background),
            contentDescription = null,
            modifier = Modifier
                .align(
                    Alignment.Center
                )
                .padding(bottom = 150.dp)
        )
        Text(
            text = "版权号：2024",
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(bottom = 30.dp)
                .clickable { toGuide() },
            style = TextStyle(fontSize = 14.sp, color = Color.Gray)
        )
    }
}

@Preview
@Composable
fun SplashScreenPreview() {
    ComposeTestTheme {
        SplashScreen()
    }
}

二、创建Guide页面

创建Guide页面，包含back按钮，点击back按钮，将点击事件回传到上层进行逻辑处理。

GuideRoute.kt 

/*年轻人，只管向前看，不要管自暴自弃者的话*/
package com.composetest.page.guide

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.composetest.ui.theme.ComposeTestTheme

/**
 * create by itz on 2024/10/11 11:47
 * desc :
 **/

@Composable
fun GuideRoute(toBack:()->Unit): Unit {

    GuideScreen(toBack = toBack)
}

@Composable
fun GuideScreen(toBack:()->Unit = {}): Unit {

    Box(modifier = Modifier.fillMaxSize()) {

        Button(onClick = toBack) {
            Text(text = "back")
        }
    }
}


@Preview
@Composable
fun GuideScreenPreview() {
    ComposeTestTheme {
        GuideScreen()
    }
}

三、创建导航控制器

1、添加依赖

def nav_version = "2.5.0"
implementation "androidx.navigation:navigation-compose:$nav_version"

2、创建导航控制器 

创建MyApp函数，统一管理导航控制器，在NavHost配置 navController控制器、startDestination启动的默认页面splash、注册splash页面和guide页面的路由。

页面跳转：navController.navigate("guide")

页面关闭：navController.popBackStack()

MyApp.kt

/*年轻人，只管向前看，不要管自暴自弃者的话*/
package com.composetest.ui

import androidx.compose.runtime.Composable
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.composetest.page.guide.GuideRoute
import com.composetest.page.splash.SplashRoute

/**
 * create by itz on 2024/10/11 10:24
 * desc :
 **/

@Composable
fun MyApp(): Unit {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "splash") {
        composable("splash") {
            SplashRoute { navController.navigate("guide") }
        }

        composable("guide") {
            GuideRoute {
                navController.popBackStack()
            }
        }
    }
}

四、MainActivity使用

在MainActivity 使用MyApp函数，关联Compose编写的Splash页面到MainActivity

MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTestTheme {
                MyApp()
            }
        }
    }
}

五、Navigation封装

1、扩展NavGraphBuilder.myComposable

扩展NavGraphBuilder.myComposable，实现composable，方便以后统一设置属性，如设置页面跳转动画样式等。

MyNavGraphBuilderKt.kt

/*年轻人，只管向前看，不要管自暴自弃者的话*/
package com.composetest.ui.navigation

import androidx.compose.runtime.Composable
import androidx.navigation.NamedNavArgument
import androidx.navigation.NavBackStackEntry
import androidx.navigation.NavDeepLink
import androidx.navigation.NavGraphBuilder
import androidx.navigation.compose.composable

/**
 * 配置路由
 *
 * 方便以后统一设置
 */
fun NavGraphBuilder.myComposable(
    route: String,
    arguments: List<NamedNavArgument> = emptyList(),
    deepLinks: List<NavDeepLink> = emptyList(),
    content: @Composable (NavBackStackEntry) -> Unit
): Unit {
    composable(route = route, arguments = arguments, deepLinks = deepLinks, content = content)
}

2、单独封装页面导航

1）Splash页面导航

SplashNavigation.kt

/*年轻人，只管向前看，不要管自暴自弃者的话*/
package com.composetest.page.splash.navigation

import androidx.navigation.NavController
import androidx.navigation.NavGraphBuilder
import com.composetest.page.splash.SplashRoute
import com.composetest.ui.navigation.myComposable

const val SPLASH_ROUTE = "splash"

/**
 * 跳转到splash
 */
fun NavController.navigationToSplash(): Unit {
    navigate(SPLASH_ROUTE)
}

/**
 * 配置导航
 */
fun NavGraphBuilder.splashScreen(toGuide: () -> Unit): Unit {
    myComposable(SPLASH_ROUTE) {
        SplashRoute(toGuide = toGuide)
    }
}

2）Guide页面导航

GuideNavigation.kt

/*年轻人，只管向前看，不要管自暴自弃者的话*/
package com.composetest.page.guide.navigation

import androidx.navigation.NavController
import androidx.navigation.NavGraphBuilder
import com.composetest.page.guide.GuideRoute
import com.composetest.ui.navigation.myComposable

const val GUIDE_ROUTE = "guide"

/**
 * 跳转到guide
 */
fun NavController.navigationToGuide(): Unit {
    navigate(GUIDE_ROUTE)
}

/**
 * 配置导航
 */
fun NavGraphBuilder.guideScreen(toBack: () -> Unit): Unit {
    myComposable(GUIDE_ROUTE) {
        GuideRoute(toBack = toBack)
    }
}

3、重写MyApp

导航配置 使用各页面扩展的导航配置方法。

MyApp.kt

/*年轻人，只管向前看，不要管自暴自弃者的话*/
package com.composetest.ui

import androidx.compose.runtime.Composable
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.rememberNavController
import com.composetest.page.guide.navigation.guideScreen
import com.composetest.page.guide.navigation.navigationToGuide
import com.composetest.page.splash.navigation.SPLASH_ROUTE
import com.composetest.page.splash.navigation.splashScreen

/**
 * create by itz on 2024/10/11 10:24
 * desc :
 **/

@Composable
fun MyApp(): Unit {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = SPLASH_ROUTE) {
        splashScreen(toGuide = navController::navigationToGuide)

        guideScreen(toBack = navController::popBackStack)
    }
}

至此实现了Jetpack Compose 页面跳转导航Navigation使用和封装。