示例:
使用Jetpack Compose开发android,实现功能:第1个界面有一个文本输入框输入消费金额,下面有个确定按钮,点击确定按钮后跳转到第2个界面,显示你的消费金额是XX,这个金额来自第1个界面的输入。
实操
使用 Jetpack Compose 构建 Android 应用程序:从文本输入到显示消费金额
本教程将演示如何使用 Jetpack Compose 构建简单的两屏 Android 应用程序。用户在第一个屏幕输入消费金额,然后点击按钮跳转到第二个屏幕,显示输入的金额。
准备工作
- 熟悉 Kotlin 和 Android 开发基础知识
- 安装 Android Studio 并配置好用于开发的设备或模拟器
- 确保已安装最新版本的 Jetpack Compose
创建项目
- 打开 Android Studio 并创建一个新的空项目。
- 选择“空 Compose Activity”模板。
- 命名您的项目,例如“SpendingTracker”。
依赖
在build.gradle.kts中增加以下一行
dependencies {
implementation("androidx.navigation:navigation-compose:2.4.0-alpha10")
//其他依赖
}
主要代码
- 在
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)
}
}
运行应用程序
- 运行应用程序并输入消费金额。
- 点击“确定”按钮。
- 应用程序应跳转到第二个屏幕,显示输入的消费金额。
总结
本教程演示了使用 Jetpack Compose 构建简单的 Android 应用程序的基本步骤。
有关更多信息,请查阅 Jetpack Compose 官方文档:https://developer.android.com/jetpack/compose
请随时提出任何问题或分享您使用 Jetpack Compose 进行 Android 开发的经验!
参考
部分内容由AI生成。