当前位置： 首页 > article >正文

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

article 2024/10/12 1:08:59

当我们在项目中使用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使用和封装。


http://www.kler.cn/news/343404.html

相关文章：

  • 共识算法Raft
  • 【新书】使用生成式人工智能和Python开始数据分析
  • 回归涉及的函数
  • C语言-了解程序环境和预处理看这一篇（超详解）
  • std::future::then的概念和使用方法
  • Java SSL使用Openssl ECC加密生成证书遇到的坑
  • Python和C++及MATLAB低温磁态机器学习模型
  • 【解决办法】git clone报错unable to access ‘xxx‘: SSL certificate problem
  • 第19周JavaWeb编程实战-MyBatis实现OA系统 面试题解析
  • Go语言学习代码记录
  • C++继承深度剖析：从理论到实践的跨越
  • rzszscp端对端文件传输整理
  • 【SpringSecurity】基本流程
  • 职场上的人情世故你知多少
  • VARCHAR(50) 与 CHAR(50) 的区别
  • 活动预告｜博睿数据将受邀出席GOPS全球运维大会上海站！
  • KVM虚拟化技术
  • 启动hadoop后没有 NodeManager和 ResourceManager
  • Spring Boot RESTful API开发教程
  • 滚柱导轨适配技巧与注意事项！