一、设计思路置换反应的判断规则完全基于金属活动性顺序表“氢前金属与酸反应置换氢气”、“前面金属置换盐溶液中后面的金属”。顺序表是静态数据数组规则是动态逻辑函数。把两者封装成canReactWithAcid()/canDisplace()两个纯函数再接上 UI 就得到金属活动性判断器——选择金属与目标页面实时给出结论。二、判断规则封装MetalRules.ets/** * 金属活动性顺序与置换判断规则 * K Ca Na Mg Al Zn Fe Sn Pb (H) Cu Hg Ag Pt Au */constMETAL_ORDER:string[][K,Ca,Na,Mg,Al,Zn,Fe,Sn,Pb,H,Cu,Hg,Ag,Pt,Au];// 规则一金属能否与稀盐酸/稀硫酸反应生成氢气——金属排在氢前exportfunctioncanReactWithAcid(metal:string):boolean{constidxMETAL_ORDER.indexOf(metal);if(idx-1){returnfalse;// 不是已知金属}returnidxMETAL_ORDER.indexOf(H);// 在氢前面 → 能反应}// 规则二金属 A 能否置换盐溶液中的金属 B —— A 在 B 前且 A 不是 K/Ca/NaexportfunctioncanDisplace(a:string,b:string):boolean{constidxAMETAL_ORDER.indexOf(a);constidxBMETAL_ORDER.indexOf(b);if(idxA-1||idxB-1){returnfalse;}if(idxAMETAL_ORDER.indexOf(Na)){returnfalse;// K/Ca/Na 太活泼先与水反应不能置换盐中的金属}returnidxAidxB;// A 在 B 前面 → 能置换}// 规则三比较两种金属的活动性强弱exportfunctioncompareActivity(a:string,b:string):string{constidxAMETAL_ORDER.indexOf(a);constidxBMETAL_ORDER.indexOf(b);if(idxA-1||idxB-1){return输入了未知金属;}if(idxAidxB){return${a}与${b}活动性相同;}returnidxAidxB?${a}比${b}活泼:${b}比${a}活泼;}// 单元测试式验证console.info(canReactWithAcid(Zn));// true 锌在氢前console.info(canReactWithAcid(Cu));// false 铜在氢后console.info(canDisplace(Fe,Cu));// true 铁能置换出铜console.info(canDisplace(Na,Cu));// false 钠先与水反应console.info(compareActivity(Mg,Fe));// Mg 比 Fe 活泼三、交互式判断器页面ActivityChecker.etsimport{canReactWithAcid,canDisplace}from../common/MetalRules;/** * 金属活动性交互判断器 * 用户选择金属 A 与目标酸 H / 盐溶液中的金属 B点击判断 */EntryComponentstruct ActivityChecker{StatemetalA:stringZn;Statetarget:stringCu;// H 代表酸否则为目标金属Stateresult:string;// 执行判断调用封装的纯函数privatecheck():void{if(this.targetH){this.resultcanReactWithAcid(this.metalA)?${this.metalA}能与稀盐酸/稀硫酸反应生成盐和氢气:${this.metalA}不能与稀盐酸/稀硫酸反应;}else{this.resultcanDisplace(this.metalA,this.target)?${this.metalA}能把${this.target}从它的盐溶液中置换出来:${this.metalA}不能置换${this.target};}}build(){Column({space:16}){Text( 金属活动性判断器).fontSize(20).fontWeight(FontWeight.Bold)// 金属 A 选择器Row({space:8}){Text(金属 A).fontSize(15)ForEach([Zn,Fe,Mg,Al,Cu,Ag,Na],(m:string){Button(m).height(34).fontSize(13).backgroundColor(mthis.metalA?#0F766E:#E5EAF2).fontColor(mthis.metalA?Color.White:#374151).onClick((){this.metalAm;})},(m:string)m)}// 目标选择酸 或 盐溶液中的金属Row({space:8}){Text(目标).fontSize(15)Button(酸(H)).height(34).fontSize(13).backgroundColor(this.targetH?#0F766E:#E5EAF2).fontColor(this.targetH?Color.White:#374151).onClick((){this.targetH;})ForEach([Cu,Fe,Ag],(m:string){Button(m盐).height(34).fontSize(13).backgroundColor(this.targetm?#0F766E:#E5EAF2).fontColor(this.targetm?Color.White:#374151).onClick((){this.targetm;})},(m:string)m)}Button(开始判断).width(80%).height(44).backgroundColor(#0F766E).onClick(()this.check())// 结论卡片Text(this.result.length0?this.result:请选择金属与目标后开始判断).fontSize(14).fontColor(#0F766E).lineHeight(22).textAlign(TextAlign.Center).width(90%).padding(14).borderRadius(12).backgroundColor(#E6FFF9)}.padding(20)}}四、代码要点规则数据化METAL_ORDER数组即活动性顺序表的数字表达indexOf天然给出位置比较。纯函数封装canReactWithAcid/canDisplace/compareActivity无副作用、可测试、可复用UI 只负责调用与展示。交互驱动按钮点击修改State metalA/target判断结果写入State result声明式刷新结论卡片。五、置换反应核心知识点要点内容定义单质 化合物 → 新单质 新化合物A BC → AC B活动性顺序K Ca Na Mg Al Zn Fe Sn Pb (H) Cu Hg Ag Pt Au口诀钾钙钠镁铝锌铁锡铅氢铜汞银铂金与酸反应氢前金属 稀盐酸/稀硫酸 → 盐 H₂↑氢后金属不反应与盐溶液反应前金属置换后金属盐必须可溶K/Ca/Na 先与水反应不能置换典型现象Fe CuSO₄铁钉变红、溶液由蓝变浅绿生成 Fe²⁺ 亚铁盐易错铁与酸生成 2 价亚铁盐FeSO₄/FeCl₂浅绿色不是 3 价铁盐