kotlin,jetpack compose 最简导航(navigation)案例学习

复制代码
// 添加导航组件依赖,用于支持Compose中的导航功能
implementation ("androidx.navigation:navigation-compose:2.8.9")
复制代码
// 定义包名
package com.example.mynavigation

// 导入所需的Android和Compose库
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.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.mynavigation.ui.theme.MyNavigationTheme

// 定义MainActivity类,继承自ComponentActivity
class MainActivity : ComponentActivity() {
    // 重写onCreate方法,用于初始化Activity
    override fun onCreate(savedInstanceState: Bundle?) {
        // 调用父类的onCreate方法
        super.onCreate(savedInstanceState)
        // 启用边缘到边缘的显示模式
        enableEdgeToEdge()
        // 设置Activity的内容视图
        setContent {
            // 使用自定义的主题
            MyNavigationTheme {
                // 创建一个导航控制器
                val navController = rememberNavController()
                // 定义导航图
                NavHost(navController = navController, startDestination = "home") {
                    // 定义home目的地的界面
                    composable("home") { HomeScreen(navController) }
                    // 定义detail456目的地的界面,并传递id参数
                    composable("detail/{id}") { backStackEntry ->
                        // 从导航参数中获取id
                        val id = backStackEntry.arguments?.getString("id")
                        // 显示DetailScreen界面
                        DetailScreen(navController, id)
                    }
                }
            }
        }
    }
}

// 定义HomeScreen可组合函数,用于显示主界面
@Composable
fun HomeScreen(navController: NavController) {
    // 使用Column布局,填充整个屏幕,内容垂直和水平居中
    Column(
        modifier = Modifier.fillMaxSize(), // 填充整个屏幕
        verticalArrangement = Arrangement.Center, // 垂直居中
        horizontalAlignment = Alignment.CenterHorizontally // 水平居中
    ) {
        // 定义一个按钮,点击后导航到detail456界面,并传递id参数
        Button(onClick = { navController.navigate("detail/123") }) {
            // 按钮上显示文本
            Text("Navigate with ID 123")
        }
    }
}

// 定义DetailScreen可组合函数,用于显示详情界面
@Composable
fun DetailScreen(navController: NavController, id: String?) {
    // 使用Column布局,填充整个屏幕,内容垂直和水平居中
    Column(
        modifier = Modifier.fillMaxSize(), // 填充整个屏幕
        verticalArrangement = Arrangement.Center, // 垂直居中
        horizontalAlignment = Alignment.CenterHorizontally // 水平居中
    ) {
        // 显示详情界面的标题
        Text("Detail Screen")
        // 显示传递过来的id,如果id为空则显示"Unknown"
        Text("ID:  ${id ?: "Unknown"}")
        // 定义一个按钮,点击后返回上一个界面
        Button(onClick = { navController.navigateUp() }) {
            // 按钮上显示文本
            Text("Back")
        }
    }
}
相关推荐
一条上岸小咸鱼9 小时前
Kotlin 基本数据类型(三):Booleans、Characters
android·前端·kotlin
alexhilton10 小时前
深入浅出着色器:极坐标系与炫酷环形进度条
android·kotlin·android jetpack
一条上岸小咸鱼15 小时前
Kotlin 基本数据类型(一):Numbers
android·前端·kotlin
一条上岸小咸鱼1 天前
Kotlin 基本数据类型(一):概述及分类
android·kotlin
Harry技术2 天前
Trae搭建Android项目:智能存储柜表结构设计以及实体生成
android·kotlin·trae
Harry技术2 天前
Trae搭建Android开发:项目中Ktor的引入与使用实践
android·kotlin·trae
前行的小黑炭2 天前
Android App:每次想写新项目锻炼一下,但苦于没有UI,那么这篇文章适合你~(适合基础小白锻炼)
android·kotlin
pengyu3 天前
【Kotlin系统化精讲:柒】 | 数据类型之复合及高级数据类型:构建复杂程序的万能钥匙
android·kotlin
xzkyd outpaper3 天前
Kotlin 协程启动方式
android·开发语言·kotlin
集成显卡3 天前
在JVM跑JavaScript脚本 | 简单 FaaS 架构设计与实现
开发语言·javascript·jvm·设计模式·kotlin·软件开发·faas