Jetpack Compose多页面跳转示例

示例：
使用Jetpack Compose开发android,实现功能：第1个界面有一个文本输入框输入消费金额，下面有个确定按钮，点击确定按钮后跳转到第2个界面，显示你的消费金额是XX,这个金额来自第1个界面的输入。

实操

使用 Jetpack Compose 构建 Android 应用程序：从文本输入到显示消费金额

本教程将演示如何使用 Jetpack Compose 构建简单的两屏 Android 应用程序。用户在第一个屏幕输入消费金额，然后点击按钮跳转到第二个屏幕，显示输入的金额。

准备工作

• 熟悉 Kotlin 和 Android 开发基础知识
• 安装 Android Studio 并配置好用于开发的设备或模拟器
• 确保已安装最新版本的 Jetpack Compose

创建项目

1. 打开 Android Studio 并创建一个新的空项目。
2. 选择“空 Compose Activity”模板。
3. 命名您的项目，例如“SpendingTracker”。

依赖

在build.gradle.kts中增加以下一行

dependencies {
    implementation("androidx.navigation:navigation-compose:2.4.0-alpha10")
    //其他依赖
}

主要代码

1. 在 MainActivity.kt 文件中，添加以下代码以创建文本输入框和按钮：

package cool.wisdomtech.spendingtracker

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

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

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController, startDestination = "input_screen") {
        composable("input_screen") { InputScreen(navController) }
        composable("display_screen/{amount}") { backStackEntry ->
            val amount = backStackEntry.arguments?.getString("amount")
            amount?.let { DisplayScreen(it) }
        }
    }
}

@Composable
fun InputScreen(navController: NavController) {
    var amount by remember { mutableStateOf(TextFieldValue("")) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        OutlinedTextField(
            value = amount,
            onValueChange = { amount = it },
            label = { Text("请输入消费金额") },
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        Button(onClick = {
            if (amount.text.isNotEmpty()) {
                navController.navigate("display_screen/${amount.text}")
            }
        }) {
            Text("确定")
        }
    }
}

@Composable
fun DisplayScreen(amount: String) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "你的消费金额是 $amount", style = MaterialTheme.typography.labelLarge)
    }
}

运行应用程序

1. 运行应用程序并输入消费金额。
2. 点击“确定”按钮。
3. 应用程序应跳转到第二个屏幕，显示输入的消费金额。

总结

本教程演示了使用 Jetpack Compose 构建简单的 Android 应用程序的基本步骤。

有关更多信息，请查阅 Jetpack Compose 官方文档：https://developer.android.com/jetpack/compose

请随时提出任何问题或分享您使用 Jetpack Compose 进行 Android 开发的经验！

参考

部分内容由AI生成。