前言本节课学习 LazyColumn 滚动列表替代传统Android的RecyclerView。LazyColumn只会渲染屏幕可见范围内的列表项实现复用适合长数据滚动列表。结合状态、Card卡片完成简单的展示实战。知识点清单LazyColumn基础结构对比ColumnColumn不会复用视图长列表会卡顿items{}循环渲染列表条目item{}渲染单独头部、尾部列表条目使用Card做列表项UI简单点击回调列表项交互实战完整示例源码ComposablefunLazyColumnDemoPage(){// 模拟数据源valdataList(1..20).map{index-条目$index}varselectedItembyremember{mutableStateOf()}Column(modifierModifier.fillMaxSize().padding(16.dp)){Text(text当前选中$selectedItem,fontSize18.sp,modifierModifier.padding(bottom12.dp))LazyColumn(modifierModifier.fillMaxSize(),verticalArrangementArrangement.spacedBy(10.dp)){// 头部单独一项item{Text(text 数据列表头部,fontSize20.sp,fontWeightFontWeight.Bold,modifierModifier.padding(vertical8.dp))}// 批量循环渲染多条数据items(dataList){itemText-Card(modifierModifier.fillMaxWidth().clickable{selectedItemitemText},elevationCardDefaults.cardElevation(defaultElevation4.dp),shapeRoundedCornerShape(10.dp)){Text(textitemText,modifierModifier.padding(16.dp),fontSize17.sp)}}}}}逐行解读LazyColumn vs ColumnColumn 一次性渲染全部子组件数据量大时页面卡顿没有复用机制不适合长滚动。LazyColumn 懒加载只渲染屏幕可视区域的条目自动复用条目适合长列表相当于旧版RecyclerView。DSL内部 item{ } 和 items(集合){}item { } 渲染单个条目用于头部、尾部不做循环。items(数据源集合) { it } 遍历数据源循环生成每一条列表UI。⚠️ LazyColumn内部不能直接写普通Compose组件必须放在item / items DSL块里面。Modifier.clickable{} 给Card增加点击列表条目点击直接使用修饰器 clickable 点击时把当前条目文本赋值给选中状态 selectedItem 上层文本自动刷新。verticalArrangement.spacedBy(10.dp)设置列表每一项之间的间距不需要手动给Card写margin。容易踩坑❌ 不要拿Column渲染上百条数据会出现性能问题。长滚动优先LazyColumn。❌ LazyColumn的花括号内部是DSL域不能直接写Text、Card必须包裹在item{}或者items{}里面。❌ 不要在LazyColumn外层写固定高度wrapContentLazyColumn需要明确的约束一般fillMaxSize占满剩余空间。✅ items优先传入真实数据源集合不要手写多次复制Card条目。多元化习题每道题后紧跟答案解读习题1【基础‑改错题】题目下面代码存在错误请修改。LazyColumn(){Text(测试文本)}答案LazyColumn(){item{Text(测试文本)}}解读LazyColumn属于特殊DSL作用域直接放置普通Compose组件编译报错单独元素必须写 item{ } 多条循环使用 items(集合){ } 。习题2【基础‑代码修改题】题目基于课程示例在列表最后增加一个尾部文本“——列表结束——”。答案在items(dataList)之后追加item{Text(text——列表结束——,modifierModifier.padding(vertical16.dp),fontSize18.sp)}解读尾部同样使用 item{} 放在items之后item专门用于头部、尾部这种非循环的单独条目不需要数据源。习题3【进阶‑补充代码题】题目模拟一个字符串集合 val fruitList listOf(“苹果”,“香蕉”,“橘子”,“葡萄”,“桃子”) 使用LazyColumnitems渲染全部水果每一项使用Card包裹。写出LazyColumn内部的items片段。答案items(fruitList){fruitName-Card(modifierModifier.fillMaxWidth(),elevationCardDefaults.cardElevation(3.dp)){Text(textfruitName,modifierModifier.padding(14.dp),fontSize17.sp)}}解读items(集合){ 变量 - UI } lambda里面的形参就是遍历出来的单条数据每一次循环生成一张CardLazyColumn自动做视图复用。习题4【综合‑逻辑应用题】题目改造示例点击列表Card之后把被点击条目的背景色改变用来标记已选中条目。提示保存被选中条目的索引写出关键逻辑。答案varselectedIndexbyremember{mutableStateOf(-1)}itemsIndexed(dataList){index,itemText-Card(modifierModifier.fillMaxWidth().clickable{selectedIndexindex},colorsCardDefaults.cardColors(containerColorif(selectedIndexindex)Color.LightGrayelseColor.White),elevationCardDefaults.cardElevation(defaultElevation4.dp)){Text(textitemText,modifierModifier.padding(16.dp),fontSize17.sp)}}解读如果需要拿到下标索引不要用items改用 itemsIndexed(数据源){ index,item - } 利用下标和选中索引做等值判断动态设置卡片背景状态改变触发重组刷新UI。习题5【概念简答题】题目说一说 LazyColumn 和 Column 的核心区别分别适合什么场景答案Column一次性渲染全部子组件没有视图复用适合少量静态布局。LazyColumn懒加载只渲染屏幕可见条目视图自动复用适合大量数据长滚动列表。解读少量静态UI布局优先Column当条目数量很多、需要上下滚动浏览时应当优先选用LazyColumn保障页面流畅性避免内存与卡顿问题。本节课知识点总结Column 普通垂直布局一次性渲染全部子组件适合少量静态内容长列表会卡顿。LazyColumn 垂直懒加载滚动列表相当于RecyclerView自动视图复用适合长数据。DSL语法 item { } 渲染单独头部尾部 items(list){} 循环批量渲染需要下标索引时使用 itemsIndexed(list){ index,item - } 。LazyColumn内部不能直接放置普通组件所有UI必须放在item / items代码块中。列表条目交互依然依靠状态驱动UI点击修改状态重组之后条目样式自动更新。下一课预告第15课 LazyRow横向滚动列表、简单搜索过滤列表实战
前言本节课学习 LazyColumn 滚动列表替代传统Android的RecyclerView。LazyColumn只会渲染屏幕可见范围内的列表项实现复用适合长数据滚动列表。结合状态、Card卡片完成简单的展示实战。知识点清单LazyColumn基础结构对比ColumnColumn不会复用视图长列表会卡顿items{}循环渲染列表条目item{}渲染单独头部、尾部列表条目使用Card做列表项UI简单点击回调列表项交互实战完整示例源码ComposablefunLazyColumnDemoPage(){// 模拟数据源valdataList(1..20).map{index-条目$index}varselectedItembyremember{mutableStateOf()}Column(modifierModifier.fillMaxSize().padding(16.dp)){Text(text当前选中$selectedItem,fontSize18.sp,modifierModifier.padding(bottom12.dp))LazyColumn(modifierModifier.fillMaxSize(),verticalArrangementArrangement.spacedBy(10.dp)){// 头部单独一项item{Text(text 数据列表头部,fontSize20.sp,fontWeightFontWeight.Bold,modifierModifier.padding(vertical8.dp))}// 批量循环渲染多条数据items(dataList){itemText-Card(modifierModifier.fillMaxWidth().clickable{selectedItemitemText},elevationCardDefaults.cardElevation(defaultElevation4.dp),shapeRoundedCornerShape(10.dp)){Text(textitemText,modifierModifier.padding(16.dp),fontSize17.sp)}}}}}逐行解读LazyColumn vs ColumnColumn 一次性渲染全部子组件数据量大时页面卡顿没有复用机制不适合长滚动。LazyColumn 懒加载只渲染屏幕可视区域的条目自动复用条目适合长列表相当于旧版RecyclerView。DSL内部 item{ } 和 items(集合){}item { } 渲染单个条目用于头部、尾部不做循环。items(数据源集合) { it } 遍历数据源循环生成每一条列表UI。⚠️ LazyColumn内部不能直接写普通Compose组件必须放在item / items DSL块里面。Modifier.clickable{} 给Card增加点击列表条目点击直接使用修饰器 clickable 点击时把当前条目文本赋值给选中状态 selectedItem 上层文本自动刷新。verticalArrangement.spacedBy(10.dp)设置列表每一项之间的间距不需要手动给Card写margin。容易踩坑❌ 不要拿Column渲染上百条数据会出现性能问题。长滚动优先LazyColumn。❌ LazyColumn的花括号内部是DSL域不能直接写Text、Card必须包裹在item{}或者items{}里面。❌ 不要在LazyColumn外层写固定高度wrapContentLazyColumn需要明确的约束一般fillMaxSize占满剩余空间。✅ items优先传入真实数据源集合不要手写多次复制Card条目。多元化习题每道题后紧跟答案解读习题1【基础‑改错题】题目下面代码存在错误请修改。LazyColumn(){Text(测试文本)}答案LazyColumn(){item{Text(测试文本)}}解读LazyColumn属于特殊DSL作用域直接放置普通Compose组件编译报错单独元素必须写 item{ } 多条循环使用 items(集合){ } 。习题2【基础‑代码修改题】题目基于课程示例在列表最后增加一个尾部文本“——列表结束——”。答案在items(dataList)之后追加item{Text(text——列表结束——,modifierModifier.padding(vertical16.dp),fontSize18.sp)}解读尾部同样使用 item{} 放在items之后item专门用于头部、尾部这种非循环的单独条目不需要数据源。习题3【进阶‑补充代码题】题目模拟一个字符串集合 val fruitList listOf(“苹果”,“香蕉”,“橘子”,“葡萄”,“桃子”) 使用LazyColumnitems渲染全部水果每一项使用Card包裹。写出LazyColumn内部的items片段。答案items(fruitList){fruitName-Card(modifierModifier.fillMaxWidth(),elevationCardDefaults.cardElevation(3.dp)){Text(textfruitName,modifierModifier.padding(14.dp),fontSize17.sp)}}解读items(集合){ 变量 - UI } lambda里面的形参就是遍历出来的单条数据每一次循环生成一张CardLazyColumn自动做视图复用。习题4【综合‑逻辑应用题】题目改造示例点击列表Card之后把被点击条目的背景色改变用来标记已选中条目。提示保存被选中条目的索引写出关键逻辑。答案varselectedIndexbyremember{mutableStateOf(-1)}itemsIndexed(dataList){index,itemText-Card(modifierModifier.fillMaxWidth().clickable{selectedIndexindex},colorsCardDefaults.cardColors(containerColorif(selectedIndexindex)Color.LightGrayelseColor.White),elevationCardDefaults.cardElevation(defaultElevation4.dp)){Text(textitemText,modifierModifier.padding(16.dp),fontSize17.sp)}}解读如果需要拿到下标索引不要用items改用 itemsIndexed(数据源){ index,item - } 利用下标和选中索引做等值判断动态设置卡片背景状态改变触发重组刷新UI。习题5【概念简答题】题目说一说 LazyColumn 和 Column 的核心区别分别适合什么场景答案Column一次性渲染全部子组件没有视图复用适合少量静态布局。LazyColumn懒加载只渲染屏幕可见条目视图自动复用适合大量数据长滚动列表。解读少量静态UI布局优先Column当条目数量很多、需要上下滚动浏览时应当优先选用LazyColumn保障页面流畅性避免内存与卡顿问题。本节课知识点总结Column 普通垂直布局一次性渲染全部子组件适合少量静态内容长列表会卡顿。LazyColumn 垂直懒加载滚动列表相当于RecyclerView自动视图复用适合长数据。DSL语法 item { } 渲染单独头部尾部 items(list){} 循环批量渲染需要下标索引时使用 itemsIndexed(list){ index,item - } 。LazyColumn内部不能直接放置普通组件所有UI必须放在item / items代码块中。列表条目交互依然依靠状态驱动UI点击修改状态重组之后条目样式自动更新。下一课预告第15课 LazyRow横向滚动列表、简单搜索过滤列表实战
