Compose Navigation快速入门

  • [1. 引入Navigation](#1. 引入Navigation)
    • [1.1 libs.version.toml](#1.1 libs.version.toml)
    • [1.2. build.gradle.kts](#1.2. build.gradle.kts)
  • [2. 主要代码如下](#2. 主要代码如下)
    • [2.1 MainHost.kt](#2.1 MainHost.kt)
    • [2.2 SettingViewModel.kt](#2.2 SettingViewModel.kt)

1. 引入Navigation

1.1 libs.version.toml

kotlin 复制代码
[versions]
agp = "8.6.0"
kotlin = "1.9.0"
coreKtx = "1.10.1"
junit = "4.13.2"
junitVersion = "1.1.5"
espressoCore = "3.5.1"
lifecycleRuntimeKtx = "2.6.1"
activityCompose = "1.8.0"
composeBom = "2024.04.01"

navHost = "2.8.0"
kotlinxSerializationJson = "1.6.3"
androidxLifecycle = "2.8.5"

[libraries]
androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
junit = { group = "junit", name = "junit", version.ref = "junit" }
androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
androidx-ui = { group = "androidx.compose.ui", name = "ui" }
androidx-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
// Navigation
androidx-navigation = { group = "androidx.navigation", name = "navigation-compose",version.ref = "navHost" }
// 序列化包
kotlinx-serialization-json = { group = "org.jetbrains.kotlinx", name = "kotlinx-serialization-json", version.ref = "kotlinxSerializationJson" }
androidx-lifecycle-viewModelCompose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "androidxLifecycle" }

[plugins]
android-application = { id = "com.android.application", version.ref = "agp" }
kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
// 序列化插件
kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }

1.2. build.gradle.kts

kts 复制代码
plugins {
    alias(libs.plugins.android.application)
    alias(libs.plugins.kotlin.android)
    id("kotlinx-serialization")
}

android {
    namespace = "com.hjq.composenavhost"
    compileSdk = 34

    defaultConfig {
        applicationId = "com.hjq.composenavhost"
        minSdk = 24
        targetSdk = 34
        versionCode = 1
        versionName = "1.0"

        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary = true
        }
    }

    buildTypes {
        release {
            isMinifyEnabled = false
            proguardFiles(
                getDefaultProguardFile("proguard-android-optimize.txt"),
                "proguard-rules.pro"
            )
        }
    }
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_1_8
        targetCompatibility = JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = "1.8"
    }
    buildFeatures {
        compose = true
    }
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.1"
    }
    packaging {
        resources {
            excludes += "/META-INF/{AL2.0,LGPL2.1}"
        }
    }
}

dependencies {

    implementation(libs.androidx.core.ktx)
    implementation(libs.androidx.lifecycle.runtime.ktx)
    implementation(libs.androidx.activity.compose)
    implementation(platform(libs.androidx.compose.bom))
    implementation(libs.androidx.ui)
    implementation(libs.androidx.ui.graphics)
    implementation(libs.androidx.ui.tooling.preview)
    implementation(libs.androidx.material3)
    implementation(libs.androidx.navigation)
    implementation(libs.kotlinx.serialization.json)
    implementation(libs.androidx.lifecycle.viewModelCompose)

    testImplementation(libs.junit)
    androidTestImplementation(libs.androidx.junit)
    androidTestImplementation(libs.androidx.espresso.core)
    androidTestImplementation(platform(libs.androidx.compose.bom))
    androidTestImplementation(libs.androidx.ui.test.junit4)
    debugImplementation(libs.androidx.ui.tooling)
    debugImplementation(libs.androidx.ui.test.manifest)
}

2. 主要代码如下

2.1 MainHost.kt

kotlin 复制代码
// 参数序列化
@Serializable
data class HomeRoute(val name: String)

@Serializable
data class SettingRoute(val userId: String)

@Serializable
object ConfigDialog


@Composable
fun MainHost(modifier: Modifier) {
    Box(modifier = modifier.fillMaxSize()) {
        val navController = rememberNavController()
        NavHost(navController = navController,
            // 开始入口
            startDestination = HomeRoute(name = "Kim"),
            // 进入动画
            enterTransition = {
                slideInHorizontally(animationSpec = tween(300))
            },
            // 移除动画
            exitTransition = {
                slideOutHorizontally(animationSpec = tween(300))
            }) {
            // Home界面
            composable<HomeRoute> { backStackEntry ->
                // 获取上一个界面返回的参数
                val homeRoute: HomeRoute = backStackEntry.toRoute()
                HomeScreenHost(route = homeRoute, onNavSetting = {
                    // 传入下一个界面的参数
                    navController.navigate(route = SettingRoute(userId = "UserId1"))
                }, configDialog = {
                    navController.navigate(route = ConfigDialog)
                })
            }
            // 设置界面
            composable<SettingRoute> {
                SettingScreenHost {
                    // 返回上一界面并带参数
                    navController.navigate(route = HomeRoute("Devi"))
                }
            }
            // 配置Dialog
            dialog<ConfigDialog> {
                ConfigDialogHost()
            }
        }
    }
}


@Composable
private fun HomeScreenHost(
    route: HomeRoute,
    onNavSetting: () -> Unit,
    configDialog: () -> Unit
) {
    Column(modifier = Modifier.fillMaxSize()) {
        Text(text = route.name)
        Button(onClick = onNavSetting) {
            Text("Go Setting")
        }

        Button(onClick = configDialog) {
            Text("Config Dialog")
        }
    }
}

@Composable
private fun SettingScreenHost(onNavSetting: () -> Unit) {
    val settingViewModel = viewModel(SettingViewModel::class.java)
    Column(modifier = Modifier.fillMaxSize()) {
        // 获取传入的参数并显示
        Text(text = "Get UserId = ${settingViewModel.getUserId()}")
        Button(onClick = onNavSetting) {
            Text("Back To User")
        }
    }
}

@Composable
private fun ConfigDialogHost() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
    ) {
        Text("Config Dialog")
    }
}

2.2 SettingViewModel.kt

kotlin 复制代码
class SettingViewModel(
    savedStateHandle: SavedStateHandle
) : ViewModel() {

    // 获取上一个界面传入的参数
    private val settingRoute = savedStateHandle.toRoute<SettingRoute>()

    fun getUserId(): String = settingRoute.userId
}
相关推荐
tangweiguo030519878 天前
Android Compose 权限申请完整指南
compose
tangweiguo0305198713 天前
androd的XML页面 跳转 Compose Activity 卡顿问题
compose
tangweiguo0305198713 天前
iOS 风格弹框组件集 (Compose版)
compose
tangweiguo0305198713 天前
Android Material Design 3 主题配色终极指南:XML 与 Compose 全解析
compose
tangweiguo0305198714 天前
Android Compose 中获取和使用 Context 的完整指南
android·compose
tangweiguo0305198716 天前
Jetpack Compose 自定义组件完全指南
compose
tangweiguo0305198717 天前
打破界限:Android XML与Jetpack Compose深度互操作指南
android·kotlin·compose
wangz7624 天前
kotlin,jetpack compose 最简导航(navigation)案例学习
kotlin·navigation·jetpack compose
wavky1 个月前
零经验选手,Compose 一天开发一款小游戏!
compose
亚林瓜子2 个月前
Minio安装(Docker Compose方式)
运维·docker·容器·minio·compose