Navigation-Stewed Noodles 资源

温馨提示：本文最后更新于2025-12-04 18:37:12，某些文章具有时效性，若有错误或已失效，请在下方留言。

依赖添加

如需使用 Navigation，需要添加依赖，具体参考 Navigation 。

dependencies {
    val nav_version = "2.9.6"
    implementation("androidx.navigation:navigation-compose:$nav_version")
}

Screen 页面设计

布局页面的可组合函数，如下所示

@Composable
fun FirstScreen() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        Text(text = "This is the First Screen.")

        Button(onClick = {}) {
            Text(text = "Go to 2nd Screen")
        }
    }
}

@Composable
fun SecondScreen() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        Text(text = "This is the Second Screen.")

        Button(onClick = {}) {
            Text(text = "Go to 1st Screen")
        }
    }
}

布局页面，如下所示

布局页面

NavController 创建

NavController 会跟踪用户访问了哪些目的地，并允许用户在目的地之间移动。

// 创建导航控制器
// 在Compose之间导航
val navController = rememberNavController()

NavHost 创建

定义导航图（nav graph）、起始目的地（start destination）以及可组合项的目的地（composable destinations）。

// NavHost
// 定义导航图（nav graph）、起始目的地（start destination）以及可组合项的目的地（composable destinations）。
NavHost(
    navController = navController,
    startDestination = "first"
) {
    // 定义 “first” 可组合项的目的地
    composable("first") {FirstScreen()}
    // 定义 “second” 可组合项的目的地
    composable("second") {SecondScreen()}
}

可组合项导航

// NavHost
// 定义导航图（nav graph）、起始目的地（start destination）以及可组合项的目的地（composable destinations）。
NavHost(
    navController = navController,
    startDestination = "first"
) {
    // 定义 “first” 可组合项的目的地
    composable("first") {FirstScreen(navController)}
    // 定义 “second” 可组合项的目的地
    composable("second") {SecondScreen(navController)}
}

@Composable
fun FirstScreen(navController: NavController) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        Text(text = "This is the First Screen.")

        Button(onClick = {
            // 导航到Second Screen
            navController.navigate("second")
        }) {
            Text(text = "Go to 2nd Screen")
        }
    }
}

@Composable
fun SecondScreen(navController: NavController) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        Text(text = "This is the Second Screen.")

        Button(onClick = {
            // 导航到上一个Screen
            navController.navigateUp()
        }) {
            Text(text = "Go to 1st Screen")
        }
    }
}

导航的效果图，如下所示

导航效果

Screen 之间数据传递

单参数传递

添加FirstScreen需要传递的参数

@Composable
fun FirstScreen(navController: NavController) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        Text(text = "This is the First Screen.")

        // 需要传递的参数
        var editText by remember { mutableStateOf("") }

        TextField(
            value = editText,
            onValueChange = {editText = it},
            label = {
                Text(text = "Enter Your Name")
            }
        )


        Button(onClick = {
            // 导航到Second Screen
            // $editText 为需要传递的参数
            navController.navigate("second/$editText")
        }) {
            Text(text = "Go to 2nd Screen")
        }
    }
}

NavHost中修改SecondScreen 的路由，添加接收参数 userName

// NavHost
// 定义导航图（nav graph）、起始目的地（start destination）以及可组合项的目的地（composable destinations）。
NavHost(
    navController = navController,
    startDestination = "first"
) {
    // 定义 “first” 可组合项的目的地
    composable("first") {FirstScreen(navController)}
    // 定义 “second” 可组合项的目的地
    composable(
        route = "second/{userName}", // {参数名称} 参数的接收
        arguments = listOf(
            // name = {参数名称}
            navArgument(name = "userName") {
                type = NavType.StringType // 参数类型
            }
        )
    ) {
        SecondScreen(navController, it.arguments?.getString("userName").toString())}
}

修改 SecondScreen 可组合函数的接收参数，并在SecondScreen中展示接收到的参数userName。

@Composable
fun SecondScreen(navController: NavController, userName: String) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        Text(text = "Welcome $userName.")

        Button(onClick = {
            // 导航到上一个Screen
            navController.navigateUp()
        }) {
            Text(text = "Go to 1st Screen")
        }
    }
}

运行效果

多参数传递

完整的代码，如下所示

package com.stewednoodles.navigationapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavController
import androidx.navigation.NavType
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.navigation.navArgument
import com.stewednoodles.navigationapp.ui.theme.NavigationAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            NavigationAppTheme {
                // 创建导航控制器
                // 在Compose之间导航
                val navController = rememberNavController()

// NavHost
// 定义导航图（nav graph）、起始目的地（start destination）以及可组合项的目的地（composable destinations）。
                NavHost(
                    navController = navController,
                    startDestination = "first"
                ) {
                    // 定义 “first” 可组合项的目的地
                    composable("first") { FirstScreen(navController) }
                    // 定义 “second” 可组合项的目的地
                    composable(
                        route = "second/{userName}/{age}", // {参数名称} 参数的接收
                        arguments = listOf(
                            // name = {参数名称}
                            navArgument(name = "userName") {
                                type = NavType.StringType // 参数类型
                            },
                            navArgument(name = "age") {
                                type = NavType.StringType // 参数类型
                            }
                        )
                    ) {
                        SecondScreen(
                            navController,
                            it.arguments?.getString("userName").toString(),
                            it.arguments?.getString("age").toString()
                        )
                    }
                }
            }
        }
    }
}

@Composable
fun FirstScreen(navController: NavController) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        Text(text = "This is the First Screen.")

        // 需要传递的参数
        var editText by remember { mutableStateOf("") }
        var age by remember { mutableStateOf("") }

        TextField(
            value = editText,
            onValueChange = { editText = it },
            label = {
                Text(text = "Enter Your Name")
            }
        )

        TextField(
            value = age,
            onValueChange = { age = it },
            label = {
                Text(text = "Enter Your Age")
            }
        )


        Button(onClick = {
            // 导航到Second Screen
            // $editText 为需要传递的参数
            navController.navigate("second/$editText/$age")
        }) {
            Text(text = "Go to 2nd Screen")
        }
    }
}

@Composable
fun SecondScreen(navController: NavController, userName: String, age: String) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        Text(text = "Welcome $userName, Your age is $age")

        Button(onClick = {
            // 导航到上一个Screen
            navController.navigateUp()
        }) {
            Text(text = "Go to 1st Screen")
        }
    }
}

可选参数传递

可选参数需要使用 ?参数名={参数名}

@Composable
fun FirstScreen(navController: NavController) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        Text(text = "This is the First Screen.")

        // 需要传递的参数
        var editText by remember { mutableStateOf("") }
        var age by remember { mutableStateOf("") }

        TextField(
            value = editText,
            onValueChange = { editText = it },
            label = {
                Text(text = "Enter Your Name")
            }
        )

        TextField(
            value = age,
            onValueChange = { age = it },
            label = {
                Text(text = "Enter Your Age")
            }
        )


        Button(onClick = {
            // 导航到Second Screen
            // $editText 为需要传递的参数
            navController.navigate("second/$editText?age=$age")
        }) {
            Text(text = "Go to 2nd Screen")
        }
    }
}

// NavHost
// 定义导航图（nav graph）、起始目的地（start destination）以及可组合项的目的地（composable destinations）。
NavHost(
    navController = navController,
    startDestination = "first"
) {
    // 定义 “first” 可组合项的目的地
    composable("first") { FirstScreen(navController) }
    // 定义 “second” 可组合项的目的地
    composable(
        route = "second/{userName}?age={age}", // {参数名称} 参数的接收
        arguments = listOf(
            // name = {参数名称}
            navArgument(name = "userName") {
                type = NavType.StringType // 参数类型
            },
            navArgument(name = "age") {
                type = NavType.StringType // 参数类型
                defaultValue = "30"
                nullable = true
            }
        )
    ) {
        SecondScreen(
            navController,
            it.arguments?.getString("userName").toString(),
            it.arguments?.getString("age").toString()
        )
    }
}

运行的效果，如下所示

运行效果

版权声明 1 本站名称： Stewed Noodles 资源
2 本站网址：blog.stewednoodles.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6 本站附件资源、教程等内容如因时效原因失效或不可用，请评论区留言或联系站长及时更新。

THE END