前言上一课学习了副作用API SideEffect 与 LaunchedEffect 掌握协程异步任务理解组件生命周期内的代码执行控制。前面我们只用了简单Button点击本课学习状态联动以Dropdown下拉菜单作为案例。下拉菜单是典型的“点击切换显隐 选中项保存”场景能完整练习布尔状态、点击事件、条件渲染的组合使用。前置完成1~9课掌握状态、重组、条件渲染、基础布局一、完整可运行示例源码packagecom.example.composefirstimportandroid.os.Bundleimportandroidx.activity.ComponentActivityimportandroidx.activity.compose.setContentimportandroidx.compose.foundation.layout.Columnimportandroidx.compose.foundation.layout.Spacerimportandroidx.compose.foundation.layout.heightimportandroidx.compose.foundation.layout.paddingimportandroidx.compose.material3.Buttonimportandroidx.compose.material3.DropdownMenuItemimportandroidx.compose.material3.ExperimentalMaterial3Apiimportandroidx.compose.material3.ExposedDropdownMenuBoximportandroidx.compose.material3.ExposedDropdownMenuDefaultsimportandroidx.compose.material3.Textimportandroidx.compose.material3.TextFieldimportandroidx.compose.runtime.Composableimportandroidx.compose.runtime.getValueimportandroidx.compose.runtime.mutableStateOfimportandroidx.compose.runtime.rememberimportandroidx.compose.runtime.setValueimportandroidx.compose.ui.Modifierimportandroidx.compose.ui.tooling.preview.Previewimportandroidx.compose.ui.unit.dpclassMainActivity:ComponentActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContent{DropdownDemoPage()}}}OptIn(ExperimentalMaterial3Api::class)ComposablefunDropdownDemoPage(){// 控制下拉框展开/收起varexpandedbyremember{mutableStateOf(false)}// 保存选中的文本varselectedTextbyremember{mutableStateOf(请选择城市)}// 下拉选项列表valoptionslistOf(北京,上海,青岛,杭州)Column(modifierModifier.padding(20.dp)){ExposedDropdownMenuBox(expandedexpanded,onExpandedChange{expanded!expanded}){TextField(valueselectedText,onValueChange{},readOnlytrue,label{Text(城市选择)},trailingIcon{ExposedDropdownMenuDefaults.TrailingIcon(expandedexpanded)},modifierModifier.menuAnchor())ExposedDropdownMenu(expandedexpanded,onDismissRequest{expandedfalse}){options.forEach{item-DropdownMenuItem(text{Text(item)},onClick{selectedTextitem expandedfalse})}}}Spacer(modifierModifier.height(20.dp))Text(text你选中的城市$selectedText)}}PreviewComposablefunDropdownPreview(){DropdownDemoPage()}二、逐行代码解读两个核心状态varexpandedbyremember{mutableStateOf(false)}varselectedTextbyremember{mutableStateOf(请选择城市)}expanded 布尔类型控制下拉菜单是否展开。 true 展开 false 收起。点击输入框时取反切换。selectedText 字符串保存用户最终选中的选项。ExposedDropdownMenuBox下拉菜单的外层容器Material3推荐的下拉组件。expanded 绑定展开状态onExpandedChange 点击输入框区域触发用来切换展开布尔值。.menuAnchor() 修饰器标记锚点告诉菜单弹出时相对于这个输入框定位。只读TextFieldreadOnly true 不能手动输入文字只用来展示选中结果作为下拉的触发器。trailingIcon 自动根据expanded状态渲染上下箭头图标。ExposedDropdownMenu下拉弹出面板。expanded 和外层状态绑定onDismissRequest 点击空白区域自动回调我们在这里把 expanded 设为false关闭下拉。DropdownMenuItem 下拉条目遍历选项列表生成每一行选项。点击条目时做两件事将选中内容赋值给 selectedText 把 expanded 置为false关闭下拉菜单。状态改变触发重组页面下方的Text同步刷新选中结果。OptIn(ExperimentalMaterial3Api::class)Material3的下拉组件目前属于实验性API需要加上这个注解消除编译警告。三、核心知识点状态联动逻辑整个下拉菜单是典型的多状态联动点击输入框 → 修改 expanded → 菜单展开。点击菜单项 → 修改 selectedText 同时把 expanded 关闭 → 面板收起展示选中内容。点击空白处 → onDismissRequest 触发 expanded 置false面板收起。重点所有UI变化全部由状态驱动不是直接操作控件符合Compose声明式思想。四、综合练习题填空题控制下拉菜单展开/收起的状态一般使用______类型。Material3下拉菜单外层容器组件是________。点击空白区域关闭下拉菜单由________回调处理。答案与解析Boolean解析展开只有true/false两种状态布尔类型最合适。ExposedDropdownMenuBox 解析Material3下拉组件外层容器。onDismissRequest 解析点击空白、返回键时触发用来关闭弹出菜单。判断题ExposedDropdownMenuBox的menuAnchor修饰器用于标记弹出菜单的锚点位置。答案正确。理由menuAnchor标记锚点下拉面板会相对于这个组件弹出。DropdownMenuItem点击后会自动关闭下拉菜单不需要手动修改expanded。答案错误。理由点击条目不会自动关闭代码里必须手动设置expandedfalse收起面板。readOnly为true的TextField用户无法手动输入文字仅用于展示。答案正确。理由只读输入框禁止键盘输入只用来展示选择结果。简答题简述下拉菜单的完整状态联动流程。参考答案点击输入框触发onExpandedChangeexpanded状态取反为true下拉面板展开点击某一个选项更新选中文本selectedText同时将expanded设为false面板关闭点击页面空白区域触发onDismissRequestexpanded置false面板关闭状态变更触发重组界面自动刷新。代码实操题改造示例增加一个重置按钮点击后恢复默认提示文字「请选择城市」并且关闭下拉菜单。写出按钮代码。参考答案Button(onClick{selectedText请选择城市expandedfalse}){Text(重置选择)}解析点击重置按钮重置选中文本同时把expanded设置为false确保下拉菜单关闭。五、本课小结ExposedDropdownMenu是Material3推荐下拉组件属于实验API需要OptIn注解。布尔状态expanded控制面板显隐选中内容单独保存到另一个状态变量。弹出组件需要处理onDismissRequest支持点击空白关闭。核心思想界面所有变化由状态驱动属于状态联动的综合练习。下一课Card卡片、Checkbox复选框多表单元素组合实战。