前言本节课学习 Card 卡片容器与 Checkbox 复选框并且把前面学过的状态、Column‑Row布局、Modifier修饰器结合完成一个简易多选项表单实战。知识点清单Card卡片容器圆角、阴影用来包裹一组相关内容Checkbox复选框布尔状态Checkbox Text 组合实现可点击选项多个表单状态同时维护页面组合实战完整示例源码ComposablefunCardCheckboxFormDemo(){// 维护3个复选框的状态varagreeReadbyremember{mutableStateOf(false)}varsubscribeNewsbyremember{mutableStateOf(false)}varacceptPushbyremember{mutableStateOf(false)}Column(modifierModifier.fillMaxSize().padding(24.dp),verticalArrangementArrangement.spacedBy(16.dp)){// Card卡片容器Card(modifierModifier.fillMaxWidth(),elevationCardDefaults.cardElevation(defaultElevation6.dp),shapeRoundedCornerShape(12.dp)){Column(modifierModifier.padding(18.dp),verticalArrangementArrangement.spacedBy(12.dp)){Text(text用户设置,fontSize20.sp,fontWeightFontWeight.Bold)// 复选框1Row(verticalAlignmentAlignment.CenterVertically){Checkbox(checkedagreeRead,onCheckedChange{agreeReadit})Text(text我已阅读用户协议)}// 复选框2Row(verticalAlignmentAlignment.CenterVertically){Checkbox(checkedsubscribeNews,onCheckedChange{subscribeNewsit})Text(text订阅产品资讯)}// 复选框3Row(verticalAlignmentAlignment.CenterVertically){Checkbox(checkedacceptPush,onCheckedChange{acceptPushit})Text(text允许消息推送)}}}// 底部显示当前选择结果Text(text已选协议:$agreeRead资讯:$subscribeNews推送:$acceptPush,modifierModifier.padding(top8.dp))}}逐行解读CardCard 是一个带有阴影和圆角的容器组件CardDefaults.cardElevation() 设置阴影高度shape RoundedCornerShape(12.dp) 设置卡片圆角Card内部放置Column把标题和多行复选框全部包裹视觉上形成一块独立面板。Checkbox复选框checked 布尔值受控状态onCheckedChange 点击回调接收 Boolean Checkbox本身不带文字所以必须搭配Row Text组成一行选项。多状态维护这里声明了3个 remember { mutableStateOf(false) } 独立状态变量。要点表单里面每一个复选框各自拥有一份布尔状态修改任意一个状态整个可组合函数会重组刷新页面底部的结果文本自动更新。Row布局 verticalAlignment Alignment.CenterVertically让复选框和文字垂直居中对齐避免文字偏高或者偏低。容易踩坑❌ 不要直接给Text写点击忘记同步Checkbox状态应当优先使用 onCheckedChange 回调。❌ Card内部不要忘记padding否则内容紧贴卡片边缘很难看。✅ 多个表单控件每一个控件维护自己的状态后期复杂表单可以封装数据类统一保存表单数据。多元化习题每道题后紧跟答案解读习题1【基础‑改错题】题目下面这段Card代码存在视觉缺陷请找出问题并且修正。Card(modifierModifier.fillMaxWidth(),elevationCardDefaults.cardElevation(defaultElevation4.dp)){Text(测试卡片内容)}答案Card(modifierModifier.fillMaxWidth(),elevationCardDefaults.cardElevation(defaultElevation4.dp)){Text(测试卡片内容,modifierModifier.padding(16.dp))}解读Card本身不会提供内边距。原代码文字紧贴卡片边框观感很差需要手动给内部元素增加 padding 内边距。习题2【基础‑代码修改题】题目基于课程示例把卡片圆角修改为20.dp卡片阴影修改为3dp。答案Card(modifierModifier.fillMaxWidth(),elevationCardDefaults.cardElevation(defaultElevation3.dp),shapeRoundedCornerShape(20.dp))解读elevation 控制阴影 shape RoundedCornerShape 专门控制卡片圆角两个参数互不影响可以独立调整。习题3【进阶‑补充代码题】题目在原有表单基础之上新增第4条复选框选项“接受收集匿名统计数据”同时底部结果文本同步展示该选项状态。答案先新增状态变量varacceptAnalyticsbyremember{mutableStateOf(false)}增加Row行UIRow(verticalAlignmentAlignment.CenterVertically){Checkbox(checkedacceptAnalytics,onCheckedChange{acceptAnalyticsit})Text(text接受收集匿名统计数据)}修改底部显示文本Text(text已选协议:$agreeRead资讯:$subscribeNews推送:$acceptPush统计:$acceptAnalytics)解读新增表单选项就要新增一条remember状态Compose依靠状态驱动UI状态值改变之后底部文本会自动重组刷新不需要手动赋值更新控件。习题4【综合‑逻辑应用题】题目业务逻辑约束只有勾选“我已阅读用户协议”之后其余复选框才可以点击协议未勾选剩下复选框处于禁用灰色不可选状态。 写出关键Checkbox代码。答案Row(verticalAlignmentAlignment.CenterVertically){Checkbox(checkedsubscribeNews,onCheckedChange{subscribeNewsit},enabledagreeRead)Text(text订阅产品资讯)}Row(verticalAlignmentAlignment.CenterVertically){Checkbox(checkedacceptPush,onCheckedChange{acceptPushit},enabledagreeRead)Text(text允许消息推送)}解读enabled 属性用来控制组件是否可用这里直接绑定布尔状态 agreeRead 。当协议复选框取消勾选时enabledfalse复选框置灰用户无法点击不需要额外写if‑else判断分支。习题5【概念简答题】题目为什么Checkbox组件旁边的文字不能直接写在Checkbox内部答案Checkbox只绘制勾选方框没有内置文本参数官方设计意图就是使用Row横向布局一边放Checkbox一边放Text。解读这样拆分组件更加灵活文字可以自定义字号、颜色如果框架内部写死文字反而限制自定义表单样式。本节课知识点总结Card是带阴影、圆角的面板容器Card不会自带内边距内部内容务必补充padding。Checkbox仅渲染勾选方框表单选项一般使用RowCheckboxText组合一行。Checkbox三个核心属性 checked 受控布尔状态 onCheckedChange 点击回调 enabled 控制是否禁用。多表单场景下每一个选项维护独立remember状态状态发生变化触发重组界面自动刷新。可以直接把状态变量赋值给enabled属性简单实现表单联动禁用逻辑。下一课预告第12课 Button、OutlinedButton、TextButton三种按钮点击事件实战。
前言本节课学习 Card 卡片容器与 Checkbox 复选框并且把前面学过的状态、Column‑Row布局、Modifier修饰器结合完成一个简易多选项表单实战。知识点清单Card卡片容器圆角、阴影用来包裹一组相关内容Checkbox复选框布尔状态Checkbox Text 组合实现可点击选项多个表单状态同时维护页面组合实战完整示例源码ComposablefunCardCheckboxFormDemo(){// 维护3个复选框的状态varagreeReadbyremember{mutableStateOf(false)}varsubscribeNewsbyremember{mutableStateOf(false)}varacceptPushbyremember{mutableStateOf(false)}Column(modifierModifier.fillMaxSize().padding(24.dp),verticalArrangementArrangement.spacedBy(16.dp)){// Card卡片容器Card(modifierModifier.fillMaxWidth(),elevationCardDefaults.cardElevation(defaultElevation6.dp),shapeRoundedCornerShape(12.dp)){Column(modifierModifier.padding(18.dp),verticalArrangementArrangement.spacedBy(12.dp)){Text(text用户设置,fontSize20.sp,fontWeightFontWeight.Bold)// 复选框1Row(verticalAlignmentAlignment.CenterVertically){Checkbox(checkedagreeRead,onCheckedChange{agreeReadit})Text(text我已阅读用户协议)}// 复选框2Row(verticalAlignmentAlignment.CenterVertically){Checkbox(checkedsubscribeNews,onCheckedChange{subscribeNewsit})Text(text订阅产品资讯)}// 复选框3Row(verticalAlignmentAlignment.CenterVertically){Checkbox(checkedacceptPush,onCheckedChange{acceptPushit})Text(text允许消息推送)}}}// 底部显示当前选择结果Text(text已选协议:$agreeRead资讯:$subscribeNews推送:$acceptPush,modifierModifier.padding(top8.dp))}}逐行解读CardCard 是一个带有阴影和圆角的容器组件CardDefaults.cardElevation() 设置阴影高度shape RoundedCornerShape(12.dp) 设置卡片圆角Card内部放置Column把标题和多行复选框全部包裹视觉上形成一块独立面板。Checkbox复选框checked 布尔值受控状态onCheckedChange 点击回调接收 Boolean Checkbox本身不带文字所以必须搭配Row Text组成一行选项。多状态维护这里声明了3个 remember { mutableStateOf(false) } 独立状态变量。要点表单里面每一个复选框各自拥有一份布尔状态修改任意一个状态整个可组合函数会重组刷新页面底部的结果文本自动更新。Row布局 verticalAlignment Alignment.CenterVertically让复选框和文字垂直居中对齐避免文字偏高或者偏低。容易踩坑❌ 不要直接给Text写点击忘记同步Checkbox状态应当优先使用 onCheckedChange 回调。❌ Card内部不要忘记padding否则内容紧贴卡片边缘很难看。✅ 多个表单控件每一个控件维护自己的状态后期复杂表单可以封装数据类统一保存表单数据。多元化习题每道题后紧跟答案解读习题1【基础‑改错题】题目下面这段Card代码存在视觉缺陷请找出问题并且修正。Card(modifierModifier.fillMaxWidth(),elevationCardDefaults.cardElevation(defaultElevation4.dp)){Text(测试卡片内容)}答案Card(modifierModifier.fillMaxWidth(),elevationCardDefaults.cardElevation(defaultElevation4.dp)){Text(测试卡片内容,modifierModifier.padding(16.dp))}解读Card本身不会提供内边距。原代码文字紧贴卡片边框观感很差需要手动给内部元素增加 padding 内边距。习题2【基础‑代码修改题】题目基于课程示例把卡片圆角修改为20.dp卡片阴影修改为3dp。答案Card(modifierModifier.fillMaxWidth(),elevationCardDefaults.cardElevation(defaultElevation3.dp),shapeRoundedCornerShape(20.dp))解读elevation 控制阴影 shape RoundedCornerShape 专门控制卡片圆角两个参数互不影响可以独立调整。习题3【进阶‑补充代码题】题目在原有表单基础之上新增第4条复选框选项“接受收集匿名统计数据”同时底部结果文本同步展示该选项状态。答案先新增状态变量varacceptAnalyticsbyremember{mutableStateOf(false)}增加Row行UIRow(verticalAlignmentAlignment.CenterVertically){Checkbox(checkedacceptAnalytics,onCheckedChange{acceptAnalyticsit})Text(text接受收集匿名统计数据)}修改底部显示文本Text(text已选协议:$agreeRead资讯:$subscribeNews推送:$acceptPush统计:$acceptAnalytics)解读新增表单选项就要新增一条remember状态Compose依靠状态驱动UI状态值改变之后底部文本会自动重组刷新不需要手动赋值更新控件。习题4【综合‑逻辑应用题】题目业务逻辑约束只有勾选“我已阅读用户协议”之后其余复选框才可以点击协议未勾选剩下复选框处于禁用灰色不可选状态。 写出关键Checkbox代码。答案Row(verticalAlignmentAlignment.CenterVertically){Checkbox(checkedsubscribeNews,onCheckedChange{subscribeNewsit},enabledagreeRead)Text(text订阅产品资讯)}Row(verticalAlignmentAlignment.CenterVertically){Checkbox(checkedacceptPush,onCheckedChange{acceptPushit},enabledagreeRead)Text(text允许消息推送)}解读enabled 属性用来控制组件是否可用这里直接绑定布尔状态 agreeRead 。当协议复选框取消勾选时enabledfalse复选框置灰用户无法点击不需要额外写if‑else判断分支。习题5【概念简答题】题目为什么Checkbox组件旁边的文字不能直接写在Checkbox内部答案Checkbox只绘制勾选方框没有内置文本参数官方设计意图就是使用Row横向布局一边放Checkbox一边放Text。解读这样拆分组件更加灵活文字可以自定义字号、颜色如果框架内部写死文字反而限制自定义表单样式。本节课知识点总结Card是带阴影、圆角的面板容器Card不会自带内边距内部内容务必补充padding。Checkbox仅渲染勾选方框表单选项一般使用RowCheckboxText组合一行。Checkbox三个核心属性 checked 受控布尔状态 onCheckedChange 点击回调 enabled 控制是否禁用。多表单场景下每一个选项维护独立remember状态状态发生变化触发重组界面自动刷新。可以直接把状态变量赋值给enabled属性简单实现表单联动禁用逻辑。下一课预告第12课 Button、OutlinedButton、TextButton三种按钮点击事件实战。
