前言本节课为综合实战课整合前面所学状态State、Button、TextField输入、Card、LazyColumn懒加载列表、Scaffold脚手架、AnimatedVisibility动画。完成一个简易待办清单新增任务、标记完成、删除任务。知识点清单使用 mutableStateListOf 维护待办数据源定义简单数据类保存待办任务任务文本、是否已完成Scaffold搭建页面骨架TopAppBar顶部导航TextField输入新增待办点击按钮添加条目LazyColumn渲染待办列表RadioButton/Checkbox标记完成AnimatedVisibility实现空列表的提示面板动画完整示例源码importandroidx.compose.foundation.clickableimportandroidx.compose.foundation.layout.Arrangementimportandroidx.compose.foundation.layout.Columnimportandroidx.compose.foundation.layout.Rowimportandroidx.compose.foundation.layout.fillMaxSizeimportandroidx.compose.foundation.layout.fillMaxWidthimportandroidx.compose.foundation.layout.paddingimportandroidx.compose.foundation.lazy.LazyColumnimportandroidx.compose.foundation.lazy.itemsimportandroidx.compose.material.icons.Iconsimportandroidx.compose.material.icons.filled.Deleteimportandroidx.compose.material3.Buttonimportandroidx.compose.material3.Cardimportandroidx.compose.material3.CardDefaultsimportandroidx.compose.material3.Checkboximportandroidx.compose.material3.Iconimportandroidx.compose.material3.IconButtonimportandroidx.compose.material3.MaterialThemeimportandroidx.compose.material3.Scaffoldimportandroidx.compose.material3.Textimportandroidx.compose.material3.TextFieldimportandroidx.compose.material3.TopAppBarimportandroidx.compose.material3.AnimatedVisibilityimportandroidx.compose.runtime.Composableimportandroidx.compose.runtime.mutableStateListOfimportandroidx.compose.runtime.mutableStateOfimportandroidx.compose.runtime.rememberimportandroidx.compose.runtime.getValueimportandroidx.compose.runtime.setValueimportandroidx.compose.ui.Modifierimportandroidx.compose.ui.text.style.TextDecorationimportandroidx.compose.ui.unit.dp//待办数据类dataclassTodoItem(valid:Int,valcontent:String,valisFinished:Boolean)ComposablefunTodoListPage(){//输入框状态varinputTextbyremember{mutableStateOf()}//待办任务集合可变状态列表valtodoListremember{mutableStateListOfTodoItem()}Scaffold(topBar{TopAppBar(title{Text(简易待办清单)})}){innerPadding-Column(modifierModifier.fillMaxSize().padding(innerPadding).padding(16.dp),verticalArrangementArrangement.spacedBy(14.dp)){//新增待办输入行Row(modifierModifier.fillMaxWidth(),horizontalArrangementArrangement.spacedBy(10.dp)){TextField(valueinputText,onValueChange{inputTextit},placeholder{Text(请输入新的待办任务)},modifierModifier.weight(1f))Button(onClick{if(inputText.isNotBlank()){valnewIdtodoList.size1todoList.add(TodoItem(newId,inputText,false))inputText}}){Text(新增)}}//空状态动画提示AnimatedVisibility(visibletodoList.isEmpty()){Card(modifierModifier.fillMaxWidth(),elevationCardDefaults.cardElevation(4.dp)){Text(text暂无待办任务请添加,modifierModifier.padding(20.dp),styleMaterialTheme.typography.titleMedium)}}LazyColumn(modifierModifier.weight(1f),verticalArrangementArrangement.spacedBy(10.dp)){items(todoList,key{it.id}){todo-Card(modifierModifier.fillMaxWidth(),elevationCardDefaults.cardElevation(3.dp)){Row(modifierModifier.fillMaxWidth().padding(12.dp),horizontalArrangementArrangement.SpaceBetween){Row{Checkbox(checkedtodo.isFinished,onCheckedChange{check-valindextodoList.indexOf(todo)todoList[index]todo.copy(isFinishedcheck)})Text(texttodo.content,modifierModifier.padding(top10.dp),textDecorationif(todo.isFinished)TextDecoration.LineThroughelseTextDecoration.None)}IconButton(onClick{todoList.remove(todo)}){Icon(Icons.Default.Delete,contentDescription删除)}}}}}}}}逐行解读TodoItem数据类专门定义数据类保存一条待办id唯一标识、任务内容content、是否完成isFinishedcopy() 方法用于复制对象并且修改其中部分字段Compose提倡数据不可变不要直接修改对象内部属性。mutableStateListOf 待办集合remember { mutableStateListOf() } 状态集合调用add、remove、修改列表内条目之后LazyColumn自动刷新。注意数据类实例本身尽量保持不可变更新条目不是修改todo.isFinished而是使用copy生成新对象覆盖集合对应下标。顶部RowTextField Button新增逻辑点击新增时先判断 inputText.isNotBlank() 禁止添加空白任务添加完成立刻清空输入框 inputText“” 。AnimatedVisibility空状态提示当todoList.isEmpty()为true动画显示“暂无待办任务”提示卡片有数据之后自动消失。LazyColumn渲染列表key{it.id}指定key可以优化列表条目复用时状态稳定性滑动的时候防止条目错乱。Checkbox勾选找到当前条目下标使用copy生成新对象覆盖原有集合元素任务完成的文字增加删除线 TextDecoration.LineThrough 。右侧IconButton点击直接remove删除这条待办。weight(1f)布局分配LazyColumn设置weight(1f)占据Column剩余垂直空间保证输入区域始终在顶部列表可以滚动。容易踩坑❌ 不要直接写 todo.isFinished true 修改数据类字段数据类是val只读需要使用copy()复制出新实例再覆盖集合下标。❌ 添加任务前没有判断空白会保存空字符串待办。❌ LazyColumn忘记weight(1f)布局会出现溢出。✅ items(key{it.id})尽量设置唯一key长列表滑动防止UI错乱。多元化习题每道题后紧跟答案解读习题1【基础‑改错题】题目下面更新待办完成状态写法错误请修正禁止直接修改对象属性todo.isFinishedtrue答案validxtodoList.indexOf(todo)todoList[idx]todo.copy(isFinishedtrue)解读TodoItem全部属性定义为val对象本身不可变通过copy生成一份修改之后的新实例替换集合中下标位置的旧对象mutableStateList检测集合元素发生替换触发列表UI刷新。这是Compose推荐的不可变数据更新思想。习题2【基础‑代码修改题】题目修改实战代码新增任务之后输入框不清空继续保留刚刚输入的文字。写出修改后的按钮onClick代码块。答案onClick{if(inputText.isNotBlank()){valnewIdtodoList.size1todoList.add(TodoItem(newId,inputText,false))}}解读只需要删除语句 inputText “” 新增之后保留输入框文本适用于连续多条相近任务快速录入的场景。习题3【进阶‑补充代码题】题目增加统计文本显示总任务数量和已经完成数量例如总共6项已完成2项放在输入Row的下方。书写Text片段。答案valfinishedCounttodoList.count{it.isFinished}Text(text总共${todoList.size}项已完成${finishedCount})解读直接在可组合函数内部使用集合高阶函数count进行统计todoList是mutableStateListOf集合发生增删改时页面重组统计表达式会重新求值文本自动更新不需要额外定义状态变量保存统计数字。习题4【综合‑逻辑应用题】题目增加一个【清除全部已完成】按钮点击之后把所有isFinishedtrue的任务全部从列表删除写出按钮以及点击内部逻辑。答案Button(onClick{valremoveListtodoList.filter{it.isFinished}todoList.removeAll(removeList)}){Text(清除全部已完成)}解读先用filter筛选出所有已经完成的任务调用removeAll批量从状态列表移除集合变更后LazyColumn自动刷新不需要遍历循环逐条remove。习题5【概念简答题】题目在本Todo实战中为什么优先定义data class保存待办而不是直接用String字符串保存列表答案一条待办业务不仅仅包含任务文本还需要保存是否完成标记、id编号使用数据类可以把一条业务相关的多项数据封装在一起方便后续扩展字段例如增加创建时间。如果只用String无法保存勾选状态。解读随着业务变复杂应当优先封装实体数据类而不是简单的字符串集合这也是移动端业务开发的常见思路。本节课知识点总结综合实战整合前面课程Scaffold页面骨架、TextField输入、Button按钮、Card卡片、LazyColumn懒加载列表、AnimatedVisibility动画空状态。业务实体优先使用data class数据类遵循不可变思想使用copy()修改字段再覆盖集合下标更新条目。mutableStateListOf 可变状态集合add / remove / removeAll修改集合直接驱动懒加载列表刷新UI。items(key{it.id})指定唯一key优化长列表滑动时UI稳定性。可以直接在可组合函数内对状态集合执行count、filter等集合运算重组时自动重新计算统计数据。下一课预告第19课 状态提升组件抽取与分离组件化重构待办清单
前言本节课为综合实战课整合前面所学状态State、Button、TextField输入、Card、LazyColumn懒加载列表、Scaffold脚手架、AnimatedVisibility动画。完成一个简易待办清单新增任务、标记完成、删除任务。知识点清单使用 mutableStateListOf 维护待办数据源定义简单数据类保存待办任务任务文本、是否已完成Scaffold搭建页面骨架TopAppBar顶部导航TextField输入新增待办点击按钮添加条目LazyColumn渲染待办列表RadioButton/Checkbox标记完成AnimatedVisibility实现空列表的提示面板动画完整示例源码importandroidx.compose.foundation.clickableimportandroidx.compose.foundation.layout.Arrangementimportandroidx.compose.foundation.layout.Columnimportandroidx.compose.foundation.layout.Rowimportandroidx.compose.foundation.layout.fillMaxSizeimportandroidx.compose.foundation.layout.fillMaxWidthimportandroidx.compose.foundation.layout.paddingimportandroidx.compose.foundation.lazy.LazyColumnimportandroidx.compose.foundation.lazy.itemsimportandroidx.compose.material.icons.Iconsimportandroidx.compose.material.icons.filled.Deleteimportandroidx.compose.material3.Buttonimportandroidx.compose.material3.Cardimportandroidx.compose.material3.CardDefaultsimportandroidx.compose.material3.Checkboximportandroidx.compose.material3.Iconimportandroidx.compose.material3.IconButtonimportandroidx.compose.material3.MaterialThemeimportandroidx.compose.material3.Scaffoldimportandroidx.compose.material3.Textimportandroidx.compose.material3.TextFieldimportandroidx.compose.material3.TopAppBarimportandroidx.compose.material3.AnimatedVisibilityimportandroidx.compose.runtime.Composableimportandroidx.compose.runtime.mutableStateListOfimportandroidx.compose.runtime.mutableStateOfimportandroidx.compose.runtime.rememberimportandroidx.compose.runtime.getValueimportandroidx.compose.runtime.setValueimportandroidx.compose.ui.Modifierimportandroidx.compose.ui.text.style.TextDecorationimportandroidx.compose.ui.unit.dp//待办数据类dataclassTodoItem(valid:Int,valcontent:String,valisFinished:Boolean)ComposablefunTodoListPage(){//输入框状态varinputTextbyremember{mutableStateOf()}//待办任务集合可变状态列表valtodoListremember{mutableStateListOfTodoItem()}Scaffold(topBar{TopAppBar(title{Text(简易待办清单)})}){innerPadding-Column(modifierModifier.fillMaxSize().padding(innerPadding).padding(16.dp),verticalArrangementArrangement.spacedBy(14.dp)){//新增待办输入行Row(modifierModifier.fillMaxWidth(),horizontalArrangementArrangement.spacedBy(10.dp)){TextField(valueinputText,onValueChange{inputTextit},placeholder{Text(请输入新的待办任务)},modifierModifier.weight(1f))Button(onClick{if(inputText.isNotBlank()){valnewIdtodoList.size1todoList.add(TodoItem(newId,inputText,false))inputText}}){Text(新增)}}//空状态动画提示AnimatedVisibility(visibletodoList.isEmpty()){Card(modifierModifier.fillMaxWidth(),elevationCardDefaults.cardElevation(4.dp)){Text(text暂无待办任务请添加,modifierModifier.padding(20.dp),styleMaterialTheme.typography.titleMedium)}}LazyColumn(modifierModifier.weight(1f),verticalArrangementArrangement.spacedBy(10.dp)){items(todoList,key{it.id}){todo-Card(modifierModifier.fillMaxWidth(),elevationCardDefaults.cardElevation(3.dp)){Row(modifierModifier.fillMaxWidth().padding(12.dp),horizontalArrangementArrangement.SpaceBetween){Row{Checkbox(checkedtodo.isFinished,onCheckedChange{check-valindextodoList.indexOf(todo)todoList[index]todo.copy(isFinishedcheck)})Text(texttodo.content,modifierModifier.padding(top10.dp),textDecorationif(todo.isFinished)TextDecoration.LineThroughelseTextDecoration.None)}IconButton(onClick{todoList.remove(todo)}){Icon(Icons.Default.Delete,contentDescription删除)}}}}}}}}逐行解读TodoItem数据类专门定义数据类保存一条待办id唯一标识、任务内容content、是否完成isFinishedcopy() 方法用于复制对象并且修改其中部分字段Compose提倡数据不可变不要直接修改对象内部属性。mutableStateListOf 待办集合remember { mutableStateListOf() } 状态集合调用add、remove、修改列表内条目之后LazyColumn自动刷新。注意数据类实例本身尽量保持不可变更新条目不是修改todo.isFinished而是使用copy生成新对象覆盖集合对应下标。顶部RowTextField Button新增逻辑点击新增时先判断 inputText.isNotBlank() 禁止添加空白任务添加完成立刻清空输入框 inputText“” 。AnimatedVisibility空状态提示当todoList.isEmpty()为true动画显示“暂无待办任务”提示卡片有数据之后自动消失。LazyColumn渲染列表key{it.id}指定key可以优化列表条目复用时状态稳定性滑动的时候防止条目错乱。Checkbox勾选找到当前条目下标使用copy生成新对象覆盖原有集合元素任务完成的文字增加删除线 TextDecoration.LineThrough 。右侧IconButton点击直接remove删除这条待办。weight(1f)布局分配LazyColumn设置weight(1f)占据Column剩余垂直空间保证输入区域始终在顶部列表可以滚动。容易踩坑❌ 不要直接写 todo.isFinished true 修改数据类字段数据类是val只读需要使用copy()复制出新实例再覆盖集合下标。❌ 添加任务前没有判断空白会保存空字符串待办。❌ LazyColumn忘记weight(1f)布局会出现溢出。✅ items(key{it.id})尽量设置唯一key长列表滑动防止UI错乱。多元化习题每道题后紧跟答案解读习题1【基础‑改错题】题目下面更新待办完成状态写法错误请修正禁止直接修改对象属性todo.isFinishedtrue答案validxtodoList.indexOf(todo)todoList[idx]todo.copy(isFinishedtrue)解读TodoItem全部属性定义为val对象本身不可变通过copy生成一份修改之后的新实例替换集合中下标位置的旧对象mutableStateList检测集合元素发生替换触发列表UI刷新。这是Compose推荐的不可变数据更新思想。习题2【基础‑代码修改题】题目修改实战代码新增任务之后输入框不清空继续保留刚刚输入的文字。写出修改后的按钮onClick代码块。答案onClick{if(inputText.isNotBlank()){valnewIdtodoList.size1todoList.add(TodoItem(newId,inputText,false))}}解读只需要删除语句 inputText “” 新增之后保留输入框文本适用于连续多条相近任务快速录入的场景。习题3【进阶‑补充代码题】题目增加统计文本显示总任务数量和已经完成数量例如总共6项已完成2项放在输入Row的下方。书写Text片段。答案valfinishedCounttodoList.count{it.isFinished}Text(text总共${todoList.size}项已完成${finishedCount})解读直接在可组合函数内部使用集合高阶函数count进行统计todoList是mutableStateListOf集合发生增删改时页面重组统计表达式会重新求值文本自动更新不需要额外定义状态变量保存统计数字。习题4【综合‑逻辑应用题】题目增加一个【清除全部已完成】按钮点击之后把所有isFinishedtrue的任务全部从列表删除写出按钮以及点击内部逻辑。答案Button(onClick{valremoveListtodoList.filter{it.isFinished}todoList.removeAll(removeList)}){Text(清除全部已完成)}解读先用filter筛选出所有已经完成的任务调用removeAll批量从状态列表移除集合变更后LazyColumn自动刷新不需要遍历循环逐条remove。习题5【概念简答题】题目在本Todo实战中为什么优先定义data class保存待办而不是直接用String字符串保存列表答案一条待办业务不仅仅包含任务文本还需要保存是否完成标记、id编号使用数据类可以把一条业务相关的多项数据封装在一起方便后续扩展字段例如增加创建时间。如果只用String无法保存勾选状态。解读随着业务变复杂应当优先封装实体数据类而不是简单的字符串集合这也是移动端业务开发的常见思路。本节课知识点总结综合实战整合前面课程Scaffold页面骨架、TextField输入、Button按钮、Card卡片、LazyColumn懒加载列表、AnimatedVisibility动画空状态。业务实体优先使用data class数据类遵循不可变思想使用copy()修改字段再覆盖集合下标更新条目。mutableStateListOf 可变状态集合add / remove / removeAll修改集合直接驱动懒加载列表刷新UI。items(key{it.id})指定唯一key优化长列表滑动时UI稳定性。可以直接在可组合函数内对状态集合执行count、filter等集合运算重组时自动重新计算统计数据。下一课预告第19课 状态提升组件抽取与分离组件化重构待办清单
