前言本课时是基础阶段的收尾复习课。回顾1‑19课全部核心知识点梳理概念、语法、开发思想同时做综合练习。完成本课之后基础篇结束后续可以继续学习导航Navigation、ViewModel、Flow、网络请求。知识点清单声明式UI的开发思想和传统Android命令式的区别基础布局Column、Row、BoxModifier修饰器、状态remember / mutableStateOf、rememberSaveable副作用LaunchedEffect懒加载列表LazyColumn / LazyRowScaffold页面骨架AnimatedVisibility显隐动画状态提升State‑HoistingmutableStateListOf可变状态集合综合实战Todo待办项目复盘基础阶段完整知识梳理① 声明式UI核心思想传统Android View体系xmlfindViewById属于命令式拿到控件对象调用对象方法去修改文字、颜色、勾选状态。Jetpack Compose是声明式UI只描述目标UI长什么样子当状态发生变化框架自动执行重组(re‑compose)刷新界面开发者不需要手动操作控件实例。关键词重组 Recompose当remember维护的状态发生变更时Compose运行时重新执行对应的Composable函数刷新UI。② 基础布局组件Row 水平方向排布子元素等价于LinearLayout水平Column 垂直方向排布子元素等价于LinearLayout垂直Box 层叠布局子元素可以上下堆叠帧布局FrameLayout布局辅助Modifier.weight(1f) 在Row/Column内分配剩余空间spacedBy() 设置子组件之间统一间距代替重复margin。③ Modifier修饰器Modifier是链式调用用来设置尺寸、padding、背景、点击clickable注意执行顺序Modifier的调用顺序会影响最终效果padding在前在后结果不一样。④ 状态系统重中之重remember { mutableStateOf(值) } 组件内存状态页面旋转销毁之后数据丢失。rememberSaveable { mutableStateOf(值) } 保存状态屏幕旋转之后依然保留数据。mutableStateListOf() 可变状态集合增删改集合元素之后Lazy懒加载列表自动刷新适合列表业务。原则数据类优先不可变修改实体优先使用 copy() 生成新对象不要直接修改属性。⑤ 副作用EffectLaunchedEffect(key){ … delay() … }在可组合函数内部开启协程用于延时、发起简单异步key变化协程会取消重启delay是挂起函数只能写在LaunchedEffect协程块里面不能直接写在Composable顶层。⑥ 懒加载滚动列表LazyColumn 垂直长列表替代RecyclerView垂直LazyRow 横向滚动列表替代RecyclerView横向DSLitem{ } 渲染单独头部尾部items(集合){} 循环渲染itemsIndexed(集合){ index,item - } 同时拿到下标建议设置 key{it.id} 优化滑动时条目状态稳定性。⑦ 页面骨架与动画Scaffold 脚手架Material3页面骨架topBar、bottomBar、悬浮FABcontent回调传入innerPadding页面内容必须padding(innerPadding)防止内容被导航栏遮挡。AnimatedVisibility(visible 布尔值) 组件显隐过渡动画支持enter入场、exit退场叠加多个动画不要用普通if替代。⑧ 组件拆分 状态提升 State‑Hoisting自定义Composable组件末尾参数带上 modifier:Modifier Modifier 是编码惯例。状态提升业务共享状态放到上层父组件子组件接收数据参数交互事件通过lambda回调向上上报子组件尽量不要维护业务副本状态防止数据不同步bug。局部临时UI状态下拉是否展开正在输入的临时文字允许保留在子组件内部。完整简易综合复习示例精简版TododataclassTodoItem(valid:Int,valcontent:String,valfinished:Boolean)ComposablefunReviewTodoPage(){varinputbyremember{mutableStateOf()}vallistremember{mutableStateListOfTodoItem()}Scaffold(topBar{TopAppBar(title{Text(复习‑待办清单)})}){innerPadding-Column(modifierModifier.fillMaxSize().padding(innerPadding).padding(16.dp),verticalArrangementArrangement.spacedBy(12.dp)){Row(modifierModifier.fillMaxWidth(),horizontalArrangementArrangement.spacedBy(8.dp)){TextField(input,{inputit},modifierModifier.weight(1f),placeholder{Text(输入任务)})Button(onClick{if(input.isNotBlank()){list.add(TodoItem(list.size1,input,false))input}}){Text(新增)}}LazyColumn(modifierModifier.weight(1f),verticalArrangementArrangement.spacedBy(8.dp)){items(list,key{it.id}){todo-Card(modifierModifier.fillMaxWidth()){Row(Modifier.padding(12.dp)){Checkbox(todo.finished,onCheckedChange{checked-validxlist.indexOf(todo)list[idx]todo.copy(finishedchecked)})Text(todo.content)}}}}}}}多元化习题综合复习习题1【基础‑改错题】题目下面代码屏幕旋转之后数据丢失如何修改varcountbyremember{mutableStateOf(0)}答案varcountbyrememberSaveable{mutableStateOf(0)}解读remember仅仅保存在组件内存屏幕旋转Activity重建之后状态丢失rememberSaveable可以把数据保存到Bundle屏幕旋转之后恢复。习题2【基础‑代码修改题】题目Scaffold的content回调里面忘记使用innerPadding会发生什么现象如何修复答案现象页面顶部内容会被TopAppBar导航栏遮挡修复对最外层容器增加 .padding(innerPadding) 。解读innerPadding由Scaffold自动计算包含顶部栏、底部栏的占位高度不要手写硬编码dp高度来避让导航栏。习题3【进阶‑补充代码题】题目需要在页面打开之后延时1500ms自动弹出一段提示写出LaunchedEffect代码片段。答案varshowTipbyremember{mutableStateOf(false)}LaunchedEffect(Unit){delay(1500L)showTiptrue}AnimatedVisibility(visibleshowTip){Text(text页面加载完成)}解读LaunchedEffect(Unit)key写Unit意味着仅页面初次渲染的时候执行一次协程delay是挂起函数不能直接写在顶层可组合函数中。习题4【综合‑逻辑应用题】题目开发自定义Compose子组件的时候什么时候适合做状态提升什么状态允许留在子组件内部答案业务共享状态列表数据源、实体勾选标记会被父组件或者其他组件读取修改的数据应当向上提升放到父组件仅当前组件自己使用的临时UI状态下拉菜单展开标记、弹窗显示标记、输入框正在录入的临时文本可以保留在子组件内部不需要全部上移。解读状态提升不是教条式全部上移如果不加区分全部提升会造成父组件状态过多维护负担很重。习题5【概念简答题】题目简单说一说什么是重组Recompose答案当Compose里面remember维护的状态值发生变化的时候框架会重新执行对应的Composable函数根据最新的状态重新渲染UI这个过程就叫重组不需要开发者手动修改控件。解读重组是Jetpack Compose声明式UI运行的基础写代码的时候需要尽量避免在Composable顶层直接执行耗时运算。本节课知识点总结Compose采用声明式UI状态驱动重组区别于传统Android命令式View开发。Row、Column、Box三大基础布局Modifier链式修饰注意顺序。状态APIrememberrememberSaveablemutableStateListOf实体修改优先copy()不可变更新模式。LaunchedEffect用于协程副作用LazyColumn/LazyRow实现高性能滚动列表。Scaffold脚手架一定要处理innerPaddingAnimatedVisibility实现组件显隐动画。组件拆分、状态提升State‑Hoisting是写出高质量Compose代码的核心思想。基础篇课程到此结束后续进阶方向Jetpack Compose导航 NavigationViewModel LiveData / Flow网络请求与异步处理实战完整App如果你需要我可以继续开始写【进阶篇第1课Navigation导航】。
前言本课时是基础阶段的收尾复习课。回顾1‑19课全部核心知识点梳理概念、语法、开发思想同时做综合练习。完成本课之后基础篇结束后续可以继续学习导航Navigation、ViewModel、Flow、网络请求。知识点清单声明式UI的开发思想和传统Android命令式的区别基础布局Column、Row、BoxModifier修饰器、状态remember / mutableStateOf、rememberSaveable副作用LaunchedEffect懒加载列表LazyColumn / LazyRowScaffold页面骨架AnimatedVisibility显隐动画状态提升State‑HoistingmutableStateListOf可变状态集合综合实战Todo待办项目复盘基础阶段完整知识梳理① 声明式UI核心思想传统Android View体系xmlfindViewById属于命令式拿到控件对象调用对象方法去修改文字、颜色、勾选状态。Jetpack Compose是声明式UI只描述目标UI长什么样子当状态发生变化框架自动执行重组(re‑compose)刷新界面开发者不需要手动操作控件实例。关键词重组 Recompose当remember维护的状态发生变更时Compose运行时重新执行对应的Composable函数刷新UI。② 基础布局组件Row 水平方向排布子元素等价于LinearLayout水平Column 垂直方向排布子元素等价于LinearLayout垂直Box 层叠布局子元素可以上下堆叠帧布局FrameLayout布局辅助Modifier.weight(1f) 在Row/Column内分配剩余空间spacedBy() 设置子组件之间统一间距代替重复margin。③ Modifier修饰器Modifier是链式调用用来设置尺寸、padding、背景、点击clickable注意执行顺序Modifier的调用顺序会影响最终效果padding在前在后结果不一样。④ 状态系统重中之重remember { mutableStateOf(值) } 组件内存状态页面旋转销毁之后数据丢失。rememberSaveable { mutableStateOf(值) } 保存状态屏幕旋转之后依然保留数据。mutableStateListOf() 可变状态集合增删改集合元素之后Lazy懒加载列表自动刷新适合列表业务。原则数据类优先不可变修改实体优先使用 copy() 生成新对象不要直接修改属性。⑤ 副作用EffectLaunchedEffect(key){ … delay() … }在可组合函数内部开启协程用于延时、发起简单异步key变化协程会取消重启delay是挂起函数只能写在LaunchedEffect协程块里面不能直接写在Composable顶层。⑥ 懒加载滚动列表LazyColumn 垂直长列表替代RecyclerView垂直LazyRow 横向滚动列表替代RecyclerView横向DSLitem{ } 渲染单独头部尾部items(集合){} 循环渲染itemsIndexed(集合){ index,item - } 同时拿到下标建议设置 key{it.id} 优化滑动时条目状态稳定性。⑦ 页面骨架与动画Scaffold 脚手架Material3页面骨架topBar、bottomBar、悬浮FABcontent回调传入innerPadding页面内容必须padding(innerPadding)防止内容被导航栏遮挡。AnimatedVisibility(visible 布尔值) 组件显隐过渡动画支持enter入场、exit退场叠加多个动画不要用普通if替代。⑧ 组件拆分 状态提升 State‑Hoisting自定义Composable组件末尾参数带上 modifier:Modifier Modifier 是编码惯例。状态提升业务共享状态放到上层父组件子组件接收数据参数交互事件通过lambda回调向上上报子组件尽量不要维护业务副本状态防止数据不同步bug。局部临时UI状态下拉是否展开正在输入的临时文字允许保留在子组件内部。完整简易综合复习示例精简版TododataclassTodoItem(valid:Int,valcontent:String,valfinished:Boolean)ComposablefunReviewTodoPage(){varinputbyremember{mutableStateOf()}vallistremember{mutableStateListOfTodoItem()}Scaffold(topBar{TopAppBar(title{Text(复习‑待办清单)})}){innerPadding-Column(modifierModifier.fillMaxSize().padding(innerPadding).padding(16.dp),verticalArrangementArrangement.spacedBy(12.dp)){Row(modifierModifier.fillMaxWidth(),horizontalArrangementArrangement.spacedBy(8.dp)){TextField(input,{inputit},modifierModifier.weight(1f),placeholder{Text(输入任务)})Button(onClick{if(input.isNotBlank()){list.add(TodoItem(list.size1,input,false))input}}){Text(新增)}}LazyColumn(modifierModifier.weight(1f),verticalArrangementArrangement.spacedBy(8.dp)){items(list,key{it.id}){todo-Card(modifierModifier.fillMaxWidth()){Row(Modifier.padding(12.dp)){Checkbox(todo.finished,onCheckedChange{checked-validxlist.indexOf(todo)list[idx]todo.copy(finishedchecked)})Text(todo.content)}}}}}}}多元化习题综合复习习题1【基础‑改错题】题目下面代码屏幕旋转之后数据丢失如何修改varcountbyremember{mutableStateOf(0)}答案varcountbyrememberSaveable{mutableStateOf(0)}解读remember仅仅保存在组件内存屏幕旋转Activity重建之后状态丢失rememberSaveable可以把数据保存到Bundle屏幕旋转之后恢复。习题2【基础‑代码修改题】题目Scaffold的content回调里面忘记使用innerPadding会发生什么现象如何修复答案现象页面顶部内容会被TopAppBar导航栏遮挡修复对最外层容器增加 .padding(innerPadding) 。解读innerPadding由Scaffold自动计算包含顶部栏、底部栏的占位高度不要手写硬编码dp高度来避让导航栏。习题3【进阶‑补充代码题】题目需要在页面打开之后延时1500ms自动弹出一段提示写出LaunchedEffect代码片段。答案varshowTipbyremember{mutableStateOf(false)}LaunchedEffect(Unit){delay(1500L)showTiptrue}AnimatedVisibility(visibleshowTip){Text(text页面加载完成)}解读LaunchedEffect(Unit)key写Unit意味着仅页面初次渲染的时候执行一次协程delay是挂起函数不能直接写在顶层可组合函数中。习题4【综合‑逻辑应用题】题目开发自定义Compose子组件的时候什么时候适合做状态提升什么状态允许留在子组件内部答案业务共享状态列表数据源、实体勾选标记会被父组件或者其他组件读取修改的数据应当向上提升放到父组件仅当前组件自己使用的临时UI状态下拉菜单展开标记、弹窗显示标记、输入框正在录入的临时文本可以保留在子组件内部不需要全部上移。解读状态提升不是教条式全部上移如果不加区分全部提升会造成父组件状态过多维护负担很重。习题5【概念简答题】题目简单说一说什么是重组Recompose答案当Compose里面remember维护的状态值发生变化的时候框架会重新执行对应的Composable函数根据最新的状态重新渲染UI这个过程就叫重组不需要开发者手动修改控件。解读重组是Jetpack Compose声明式UI运行的基础写代码的时候需要尽量避免在Composable顶层直接执行耗时运算。本节课知识点总结Compose采用声明式UI状态驱动重组区别于传统Android命令式View开发。Row、Column、Box三大基础布局Modifier链式修饰注意顺序。状态APIrememberrememberSaveablemutableStateListOf实体修改优先copy()不可变更新模式。LaunchedEffect用于协程副作用LazyColumn/LazyRow实现高性能滚动列表。Scaffold脚手架一定要处理innerPaddingAnimatedVisibility实现组件显隐动画。组件拆分、状态提升State‑Hoisting是写出高质量Compose代码的核心思想。基础篇课程到此结束后续进阶方向Jetpack Compose导航 NavigationViewModel LiveData / Flow网络请求与异步处理实战完整App如果你需要我可以继续开始写【进阶篇第1课Navigation导航】。
