前言
本节课为综合实战课；整合前面所学：状态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("")}//待办任务集合，可变状态列表valtodoList=remember{mutableStateListOf<TodoItem>()}Scaffold(topBar={TopAppBar(title={Text("简易待办清单")})}){innerPadding->Column(modifier=Modifier.fillMaxSize().padding(innerPadding).padding(16.dp),verticalArrangement=Arrangement.spacedBy(14.dp)){//新增待办输入行Row(modifier=Modifier.fillMaxWidth(),horizontalArrangement=Arrangement.spacedBy(10.dp)){TextField(value=inputText,onValueChange={inputText=it},placeholder={Text("请输入新的待办任务")},modifier=Modifier.weight(1f))Button(onClick={if(inputText.isNotBlank()){valnewId=todoList.size+1todoList.add(TodoItem(newId,inputText,false))inputText=""}}){Text("新增")}}//空状态动画提示AnimatedVisibility(visible=todoList.isEmpty()){Card(modifier=Modifier.fillMaxWidth(),elevation=CardDefaults.cardElevation(4.dp)){Text(text="暂无待办任务，请添加！",modifier=Modifier.padding(20.dp),style=MaterialTheme.typography.titleMedium)}}LazyColumn(modifier=Modifier.weight(1f),verticalArrangement=Arrangement.spacedBy(10.dp)){items(todoList,key={it.id}){todo->Card(modifier=Modifier.fillMaxWidth(),elevation=CardDefaults.cardElevation(3.dp)){Row(modifier=Modifier.fillMaxWidth().padding(12.dp),horizontalArrangement=Arrangement.SpaceBetween){Row{Checkbox(checked=todo.isFinished,onCheckedChange={check->valindex=todoList.indexOf(todo)todoList[index]=todo.copy(isFinished=check)})Text(text=todo.content,modifier=Modifier.padding(top=10.dp),textDecoration=if(todo.isFinished)TextDecoration.LineThroughelseTextDecoration.None)}IconButton(onClick={todoList.remove(todo)}){Icon(Icons.Default.Delete,contentDescription="删除")}}}}}}}}逐行解读
- TodoItem数据类
专门定义数据类保存一条待办：id唯一标识、任务内容content、是否完成isFinished；
copy() 方法用于复制对象并且修改其中部分字段（Compose提倡数据不可变，不要直接修改对象内部属性）。 - mutableStateListOf 待办集合
remember { mutableStateListOf() } ，状态集合；调用add、remove、修改列表内条目之后LazyColumn自动刷新。
注意：数据类实例本身尽量保持不可变；更新条目不是修改todo.isFinished，而是使用copy生成新对象，覆盖集合对应下标。
- 顶部Row：TextField + 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.isFinished=true答案：
validx=todoList.indexOf(todo)todoList[idx]=todo.copy(isFinished=true)解读：
TodoItem全部属性定义为val，对象本身不可变；通过copy生成一份修改之后的新实例，替换集合中下标位置的旧对象；mutableStateList检测集合元素发生替换，触发列表UI刷新。这是Compose推荐的不可变数据更新思想。
习题2【基础‑代码修改题】
题目：修改实战代码；新增任务之后输入框不清空，继续保留刚刚输入的文字。写出修改后的按钮onClick代码块。
答案：
onClick={if(inputText.isNotBlank()){valnewId=todoList.size+1todoList.add(TodoItem(newId,inputText,false))}}解读：
只需要删除语句 inputText = “” ；新增之后保留输入框文本；适用于连续多条相近任务快速录入的场景。
习题3【进阶‑补充代码题】
题目：增加统计文本，显示总任务数量和已经完成数量（例如：总共：6项，已完成：2项）；放在输入Row的下方。书写Text片段。
答案：
valfinishedCount=todoList.count{it.isFinished}Text(text="总共：${todoList.size}项，已完成：${finishedCount}")解读：
直接在可组合函数内部使用集合高阶函数count进行统计；todoList是mutableStateListOf，集合发生增删改时页面重组，统计表达式会重新求值，文本自动更新；不需要额外定义状态变量保存统计数字。
习题4【综合‑逻辑应用题】
题目：增加一个【清除全部已完成】按钮；点击之后把所有isFinished=true的任务全部从列表删除；写出按钮以及点击内部逻辑。
答案：
Button(onClick={valremoveList=todoList.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课 状态提升，组件抽取与分离（组件化重构待办清单）
