企业官网建设流程全解析

前言

本节课学习单选组件 RadioButton 以及弹窗 AlertDialog 。单选和复选不一样，同一组里面只能选择其中一项；弹窗常用于确认提示。结合状态、点击事件完成选择后弹出确认对话框的小实战。

知识点清单

1. RadioButton单选框的基础用法
2. RadioGroup逻辑（Compose没有现成RadioGroup组件，需要自己维护互斥逻辑）
3. AlertDialog弹窗的显示与隐藏，依靠布尔状态控制弹窗
4. 弹窗内部确认、取消按钮处理回调
5. 单选选择完成之后唤起弹窗的业务实战

完整示例源码

@ComposablefunRadioDialogDemoPage(){// 当前选中的选项varselectedOptionbyremember{mutableStateOf("")}// 控制弹窗显示隐藏varshowDialogbyremember{mutableStateOf(false)}Column(modifier=Modifier.fillMaxSize().padding(24.dp),verticalArrangement=Arrangement.spacedBy(16.dp)){Text(text="请选择你的学历",fontSize=20.sp,fontWeight=FontWeight.Bold)Column{Row(verticalAlignment=Alignment.CenterVertically){RadioButton(selected=selectedOption=="high",onClick={selectedOption="high"})Text(text="高中")}Row(verticalAlignment=Alignment.CenterVertically){RadioButton(selected=selectedOption=="college",onClick={selectedOption="college"})Text(text="大专")}Row(verticalAlignment=Alignment.CenterVertically){RadioButton(selected=selectedOption=="bachelor",onClick={selectedOption="bachelor"})Text(text="本科")}}Button(onClick={if(selectedOption.isNotEmpty()){showDialog=true}}){Text("提交选择，弹出确认")}// AlertDialog弹窗if(showDialog){AlertDialog(onDismissRequest={showDialog=false},title={Text("确认提交")},text={Text("你选择的学历：$selectedOption")},confirmButton={Button(onClick={showDialog=false}){Text("确定")}},dismissButton={TextButton(onClick={showDialog=false}){Text("取消")}})}}}

逐行解读

1. RadioButton单选框

• selected:Boolean ：标记当前这一项是否处于选中；
• onClick ：点击回调，给状态变量赋值；
• ⚠️ Jetpack Compose没有官方RadioGroup容器！互斥逻辑必须自己写。
  通过同一个状态变量 selectedOption 进行判断；点击不同选项给它赋予不同字符串，自然就实现同一组只能选一项。

2. AlertDialog弹窗
   弹窗不是一直渲染在界面上！通过外层if条件控制是否渲染弹窗组件。

• showDialog 布尔状态：true显示弹窗，false关闭弹窗；
• onDismissRequest ：点击弹窗外面空白区域或者返回键时触发，一般用来关闭弹窗；
• title 插槽：弹窗标题； text 插槽：弹窗正文内容；
• confirmButton 确认按钮； dismissButton 取消按钮；点击后务必把 showDialog=false 关闭弹窗。

3. 业务逻辑：
   点击提交按钮的时候先判断用户是否已经做出选择；不为空才打开弹窗。

容易踩坑

1. ❌ 不要以为存在RadioGroup组件；原生需要手动维护互斥选择逻辑。
2. ❌ 弹窗关闭忘记设置 showDialog=false ，弹窗无法消失。
3. ❌ onDismissRequest 回调里面必须关闭弹窗；否则按返回键弹窗还留在页面上。
4. ✅ 弹窗本质也是Compose组件；依靠if条件+状态来控制它的存在与消失，不是命令式show() / hide()。

多元化习题（每道题后紧跟答案+解读）

习题1【基础‑改错题】

题目：下面单选代码片段无法实现互斥，请找出问题并且修复。

varopt1byremember{mutableStateOf(false)}varopt2byremember{mutableStateOf(false)}RadioButton(selected=opt1,onClick={opt1=true})RadioButton(selected=opt2,onClick={opt2=true})

答案：

varselectValbyremember{mutableStateOf("a")}RadioButton(selected=selectVal=="a",onClick={selectVal="a"})RadioButton(selected=selectVal=="b",onClick={selectVal="b"})

解读：
每一项单独维护布尔状态，就可以同时多选，失去单选互斥效果；同一组单选框必须共用同一个状态变量，使用等值判断selected，以此实现互斥。

习题2【基础‑代码修改题】

题目：修改示例弹窗，当点击弹窗外部空白区域的时候不能关闭弹窗（禁止外部点击消失）。
答案：

AlertDialog(onDismissRequest={},//其余参数不变title={Text("确认提交")},text={Text("你选择的学历：$selectedOption")},confirmButton={Button(onClick={showDialog=false}){Text("确定")}},dismissButton={TextButton(onClick={showDialog=false}){Text("取消")}})

解读：
onDismissRequest 留空，点击弹窗外围空白不会触发关闭；但是系统返回按键依然可以触发onDismissRequest；想要彻底拦截返回还需要另外处理。

习题3【进阶‑补充代码题】

题目：在示例基础上增加一项单选：“硕士”；提交弹窗中能够正确显示该选项。只需要补充对应的Row‑RadioButton‑Text代码。
答案：

Row(verticalAlignment=Alignment.CenterVertically){RadioButton(selected=selectedOption=="master",onClick={selectedOption="master"})Text(text="硕士")}

解读：
新增单选条目只需要增加一组Row；使用同一个共享状态变量selectedOption，新增一个字符串标记"master"；不需要修改弹窗逻辑，弹窗直接读取状态变量，页面重组之后文本自动更新。

习题4【综合‑逻辑应用题】

题目：增加校验逻辑：如果用户还没有选择任何学历，点击提交按钮直接弹出提示弹窗，提示“请先选择学历！”；已经选择学历才弹出确认提交弹窗。写出核心状态与弹窗判断逻辑。
答案：

varshowTipDialogbyremember{mutableStateOf(false)}Button(onClick={if(selectedOption.isEmpty()){showTipDialog=true}else{showDialog=true}}){Text("提交选择，弹出确认")}if(showTipDialog){AlertDialog(onDismissRequest={showTipDialog=false},title={Text("提示")},text={Text("请先选择学历！")},confirmButton={Button(onClick={showTipDialog=false}){Text("知道了")}})}

解读：
增加新的布尔状态 showTipDialog 控制提示弹窗；在按钮点击的业务分支里面做if判断；不同业务分支打开不同弹窗；每一个弹窗单独一套显示控制状态。

习题5【概念简答题】

题目：Compose的AlertDialog弹窗，是如何实现显示和隐藏的？和传统Android调用show()方法弹窗有什么区别？
答案：
Compose使用布尔状态+if条件，条件成立渲染AlertDialog组件；条件不成立该组件直接不渲染。传统Android是命令式调用dialog.show()、dialog.dismiss()方法控制弹窗对象。
解读：
Compose遵循声明式UI思想；一切UI的出现消失都由状态驱动，而不是直接调用控件对象的方法。

本节课知识点总结

1. RadioButton是单选框组件；Compose没有内置RadioGroup，互斥逻辑需要开发者自己实现；同一组单选框共用一个状态变量，利用等值判断selected实现互斥。
2. RadioButton同样需要Row搭配Text，文字需要单独写Text组件。
3. AlertDialog弹窗本身是普通可组合组件；依靠外层if + Boolean状态变量控制渲染与否。
4. onDismissRequest 回调：点击弹窗外侧空白、系统返回键都会执行；这里一般执行关闭弹窗。
5. 声明式弹窗和传统命令式弹窗不一样，不要调用show/dismiss；修改状态值触发重组来控制弹窗显示隐藏。

下一课预告：第14课 LazyColumn列表，滚动长列表基础实战