安卓软件开发：JetpackCompose从零开发CURD列表App
2024年已经过半了，我作为聋人独立开发者，我经常会时不时反思：自己这半年到底进步了多少？在这篇文章里，我分享一个用 Jetpack Compose、Material3和 Kotlin 语言实现CURD列表App的案例。无论你有没有开发经验，相信这篇文章对你会非常有所帮助。
一、项目背景
CURD列表App的实用性和常见性成为一个典型的开发案例，涵盖了数据管理、UI、UX等基本的开发知识点。
二、项目开发
在本Demo中，实现了以下功能：
• 使用 LazyColumn 展示CURD列表。
• 支持用户动态添加、编辑和删除列表项。
• 使用 State 和 MutableState 管理数据和 UI 的同步更新。
2.1 项目结构
Demo采用 MVVM 架构， ViewModel 负责管理应用的状态和业务逻辑，Compose 负责渲染 UI，实现了数据和视图的分离。
2.2 编写 UI
使用 LazyColumn 展示CURD列表，每个列表项显示名字和数量，包含编辑和删除按钮。
代码语言：java复制@Composable
fun ListItem(item: ShoppingItem, onEditClick: () -> Unit, onDeleteClick: () -> Unit) {
Row(
modifier = Modifier
.padding(8.dp)
.fillMaxWidth()
.border(
border = BorderStroke(2.dp, Color(0XFF018786)),
shape = RoundedCornerShape(20)
),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(text = item.name, modifier = Modifier.padding(8.dp))
Text(text = "ID: ${item.quantity}", modifier = Modifier.padding(8.dp))
Row(modifier = Modifier.padding(8.dp)) {
IconButton(onClick = onEditClick) {
Icon(imageVector = Icons.Default.Edit, contentDescription = null)
}
IconButton(onClick = onDeleteClick) {
Icon(imageVector = Icons.Default.Delete, contentDescription = null)
}
}
}
}2.2.1 解释代码
ListItem 组件展示了列表项的详细信息， IconButton 为每个列表项提供编辑和删除的功能
2.3 添加和编辑功能
通过 AlertDialog 实现弹窗，用户可以在弹窗中输入新的条目，点击“增加”按钮后数据更新到CURD列表。
代码语言：java复制@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ListApp() {
var sItems by remember { mutableStateOf(listOf<ShoppingItem>()) }
var itemName by remember { mutableStateOf("") }
var itemQuantity by remember { mutableStateOf("") }
var showDialog by remember { mutableStateOf(false) }
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center
) {
Text(
text = "@Nim独立开发者",
color = Color.Black,
style = TextStyle(fontWeight = FontWeight.Bold),
fontSize = 40.sp,
modifier = Modifier
.align(Alignment.CenterHorizontally)
.padding(20.dp)
)
Button(
onClick = { showDialog = true },
modifier = Modifier.align(Alignment.CenterHorizontally)
) {
Text("新增条目")
}
LazyColumn(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
) {
items(sItems) { item ->
ListItem(
item = item,
onEditClick = { /* 编辑逻辑 */ },
onDeleteClick = { sItems = sItems - item }
)
}
}
}
if (showDialog) {
itemQuantity = "1"
AlertDialog(
onDismissRequest = { showDialog = false },
title = { Text("增加条目") },
text = {
Column {
OutlinedTextField(
value = itemName,
onValueChange = { itemName = it },
singleLine = true,
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
)
OutlinedTextField(
value = itemQuantity,
onValueChange = {
itemQuantity = it
},
singleLine = true,
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
)
}
},
confirmButton = {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp),
horizontalArrangement = Arrangement.SpaceBetween
) {
Button(
onClick = {
if (itemName.isNotBlank()) {
val newItem = ShoppingItem(
id = sItems.size + 1,
name = itemName,
quantity = itemQuantity.toInt()
)
sItems = sItems + newItem
showDialog = false
itemName = ""
}
}
) {
Text("增加")
}
Button(
onClick = { showDialog = false }
) {
Text("取消")
}
}
}
)
}
}2.3.1 代码解释
使用了 AlertDialog 创建一个输入弹窗，用户可以通过该弹窗添加新的条目到列表中，LazyColumn 用于展示用户添加的所有列表项。
2.4 添加编辑和保存功能
使用 ShoppingItemEditor 实现了编辑功能，用户可以在编辑状态下修改现有条目，保存修改后的数据。
代码语言：javascript代码运行次数：0运行复制@Composable
fun ShoppingListItem(item: ShoppingItem,
onEditClick: () -> Unit,
onDeleteClick: () -> Unit) {
Row(
modifier = Modifier
.padding(8.dp)
.fillMaxWidth()
.border(
border = BorderStroke(2.dp, Color(0XFF018786)),
shape = RoundedCornerShape(20)
),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically // 垂直居中
) {
Text(text = item.name, modifier = Modifier.padding(8.dp))
Text(text = "ID: ${item.quantity}", modifier = Modifier.padding(8.dp))
Row( modifier = Modifier
.padding(8.dp)) {
IconButton(
onClick = onEditClick,
) {
Icon(imageVector = Icons.Default.Edit, contentDescription = null)
}
IconButton(
onClick = onDeleteClick,
) {
Icon(imageVector = Icons.Default.Delete, contentDescription = null)
}
}
}
}
@Composable
fun ShoppingItemEditor(item: ShoppingItem,onEditComplete: (String, Int) -> Unit) {
var editedName by remember { mutableStateOf(item.name) }
var editedQuantity by remember { mutableStateOf(item.quantity.toString()) }
var isEditing by remember { mutableStateOf(item.isEditing) }
Row(
modifier = Modifier
.fillMaxWidth()
.background(Color.White)
.padding(8.dp),
horizontalArrangement = Arrangement.SpaceEvenly
) {
Column {
BasicTextField(
value = editedName,
onValueChange = { editedName = it },
singleLine = true,
modifier = Modifier
.wrapContentSize()
.padding(8.dp)
)
BasicTextField(
value = editedQuantity,
onValueChange = { editedQuantity = it },
singleLine = true,
modifier = Modifier
.wrapContentSize()
.padding(8.dp)
)
}
Button(
onClick = {
isEditing = false
onEditComplete(editedName, editedQuantity.toIntOrNull() ?: 1)
}
) {
Text("保存")
}
}
}2.5 编写Preview功能
代码语言：javascript代码运行次数：0运行复制@Preview
@Composable
fun ListPreview() {
ListApp()
}2.6 视频演示
三、学习笔记
3.1 数据的增删改
通过 Jetpack Compose 的 LazyColumn 实现了列表的展示功能，使用 AlertDialog 实现了弹窗交互，让用户动态添加、编辑和删除条目。
3.2 使用 Material3 提供现代化设计
Material3 提供了现代化的设计规范，比如按钮、文本框和弹窗。
3.3 代码优化和复用
相似功能抽象成了可复用的组件，比如 ListItem 和 ShoppingItemEditor，让代码很简洁，且方便在其他demo中复用相同的组件。所以，代码的模块化使得未来的维护和扩展变得很容易。
四、总结
开发Demo用 Jetpack Compose 大大简化了 Android 开发的 UI 编写和状态管理工作。使用 LazyColumn 实现了高效的列表展示，通过 State 和 MutableState 实现了 UI 和数据的同步更新。Material3 为我们的App提供了现代化的视觉设计语言。对于开发者而言，这种 CURD 列表应用是非常常见的场景，可以掌握了 Compose 中的核心功能，比如 LazyColumn 列表、状态管理、弹窗交互等。
有任何问题欢迎提问，感谢大家阅读 )
发布者：admin，转转请注明出处：http://www.yc00.com/web/1755031347a5229345.html
评论列表（0条）