鸿蒙 ArkTS 实战｜实验步骤状态机模拟分解反应

一、设计思路分解反应的核心考点是实验室制取氧气的三大方法全部是分解反应而制氧实验的关键是操作步骤顺序——“查装定点收移熄”颠倒顺序就会炸裂试管。这类严格有序的状态推进用 ArkTS 的State状态管理来模拟最合适做一个制氧实验步骤状态机点击按钮推进步骤UI 自动刷新当前步骤与注意事项。催化剂反应前后质量不变则用类封装。二、制氧实验步骤状态机OxygenExperiment.ets/** * 高锰酸钾制取氧气 · 实验步骤状态机 * 步骤查(检查气密性) 装(装药) 定(固定) 点(点燃) 收(收集) 移(移管) 熄(熄灯) */interfaceStep{index:number;// 步骤序号title:string;// 步骤名称口诀单字detail:string;// 操作内容tip:string;// 注意事项}EntryComponentstruct OxygenExperiment{StatecurrentStep:number0;// 当前步骤下标 —— 唯一数据源privatesteps:Step[][{index:1,title:查,detail:检查装置气密性,tip:导管口放入水中手握试管外壁观察是否冒气泡},{index:2,title:装,detail:装入高锰酸钾管口塞棉花,tip:棉花防止粉末堵塞导管},{index:3,title:定,detail:固定装置,tip:试管口略向下倾斜防冷凝水倒流炸裂试管},{index:4,title:点,detail:点燃酒精灯加热,tip:先预热再集中加热药品部位},{index:5,title:收,detail:排水法收集氧气,tip:气泡连续均匀冒出时才收集排尽空气},{index:6,title:移,detail:把导管移出水面,tip:先移导管防止水槽中的水倒流进试管},{index:7,title:熄,detail:熄灭酒精灯,tip:先移导管后熄灯顺序颠倒会炸裂试管}];// 核心逻辑推进 / 重播步骤privatenextStep():void{if(this.currentStepthis.steps.length-1){this.currentStep;// 修改 State → UI 自动刷新}else{this.currentStep0;// 循环重播演示}}build(){Column({space:14}){// 进度文本Text(第${this.currentStep1}步 / 共${this.steps.length}步).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#0F766E)// 当前步骤卡片Column({space:8}){Text(this.steps[this.currentStep].title).fontSize(44).fontWeight(FontWeight.Bold).fontColor(#0F766E)Text(this.steps[this.currentStep].detail).fontSize(15).fontColor(#111827)Text(⚠️ this.steps[this.currentStep].tip).fontSize(13).fontColor(#B45309).lineHeight(20)}.width(100%).padding(20).borderRadius(16).backgroundColor(#E6FFF9).border({width:1,color:#99F6E4})// 步骤进度条7 个小圆点当前步骤高亮Row({space:6}){ForEach(this.steps,(s:Step){Circle().width(12).height(12).fill(s.index-1this.currentStep?#0F766E:#D1FAE5)},(s:Step)s.index.toString())}// 下一步按钮Button(下一步 →).width(100%).height(44).fontSize(16).backgroundColor(#0F766E).onClick(()this.nextStep())}.padding(16)}}三、催化剂概念演示Catalyst 类催化剂考点改变反应速率自身质量和化学性质反应前后不变。用类封装反应前后质量并给出校验方法/** * 催化剂概念演示类 * 核心beforeMass afterMass 则质量不变是催化剂 */classCatalyst{name:string;beforeMass:number0;// 反应前质量gafterMass:number0;// 反应后质量gmassUnchanged():boolean{returnthis.beforeMassthis.afterMass;}describe():string{return${this.name}反应前${this.beforeMass}g反应后${this.afterMass}g(this.massUnchanged()?质量不变是催化剂 ✓:质量改变不是催化剂 ✗);}}// 使用示例constmno2:CatalystnewCatalyst();mno2.name二氧化锰;mno2.beforeMass1.0;mno2.afterMass1.0;console.info(mno2.describe());// 输出二氧化锰反应前 1g反应后 1g质量不变是催化剂 ✓四、代码要点状态机模型State currentStep是唯一数据源UI进度文本、步骤卡片、圆点进度条全部由它推导点击按钮只改状态。响应式刷新this.currentStep触发组件重绘无需手动操作 DOM——ArkUI 声明式框架的核心。类封装概念Catalyst类把质量不变的化学性质变成可调用的massUnchanged()方法。五、分解反应核心知识点制氧方法方程式条件装置高锰酸钾2KMnO₄ → K₂MnO₄ MnO₂ O₂↑加热固固加热型氯酸钾2KClO₃ → 2KCl 3O₂↑MnO₂ 催化 加热固固加热型过氧化氢2H₂O₂ → 2H₂O O₂↑MnO₂ 催化常温固液常温型要点内容定义一种物质 → 多种物质AB → A B判定只看反应物是否唯一水电解2H₂O → 2H₂↑ O₂↑通电正氧负氢体积比 1:2催化剂改变速率质量与化学性质不变不改变生成物种类和质量实验顺序查装定点收移熄先移导管后熄灯口诀一变多分解记查装定点收移熄