鸿蒙 ArkTS 实战｜List 搜索实现方程式速查：47 个必背方程式

一、设计思路把 47 个必背方程式建模为带分类标签的结构化数据用ListForEach渲染成可滚动速查表叠加TextInput搜索框通过State keyword驱动filter()实时过滤——“边输入边定位”。这既是学化学的速查工具也是 ArkTS 列表 搜索的完整示例。二、数据模型与过滤逻辑EquationData.ets/** * 方程式数据模型分类 方程式 条件 现象 */exportinterfaceEquation{category:string;// 分类化合 / 分解 / 置换 / 复分解 / 燃烧氧化equation:string;// 化学方程式condition:string;// 反应条件phenomenon:string;// 现象 / 备注}/** * 47 个必背方程式完整数据 */exportconstALL_EQUATIONS:Equation[][// —— 化合反应11 个多变一 ——{category:化合,equation:2Mg O₂ → 2MgO,condition:点燃,phenomenon:耀眼白光白色固体},{category:化合,equation:4P 5O₂ → 2P₂O₅,condition:点燃,phenomenon:大量白烟},{category:化合,equation:3Fe 2O₂ → Fe₃O₄,condition:点燃,phenomenon:火星四射黑色固体},{category:化合,equation:C O₂ → CO₂,condition:点燃,phenomenon:白光CO₂ 使石灰水变浑浊},{category:化合,equation:2C O₂ → 2CO,condition:点燃(O₂不足),phenomenon:蓝色火焰CO 有毒},{category:化合,equation:S O₂ → SO₂,condition:点燃,phenomenon:蓝紫色火焰刺激性气味},{category:化合,equation:2H₂ O₂ → 2H₂O,condition:点燃,phenomenon:淡蓝色火焰点燃前验纯},{category:化合,equation:2CO O₂ → 2CO₂,condition:点燃,phenomenon:蓝色火焰},{category:化合,equation:CO₂ H₂O → H₂CO₃,condition:常温,phenomenon:石蕊变红加热恢复},{category:化合,equation:CaO H₂O → Ca(OH)₂,condition:常温,phenomenon:放热生石灰干燥剂},{category:化合,equation:2Na Cl₂ → 2NaCl,condition:点燃,phenomenon:黄色火焰白烟},// —— 分解反应8 个一变多 ——{category:分解,equation:2H₂O → 2H₂↑ O₂↑,condition:通电,phenomenon:正氧负氢1:2},{category:分解,equation:2KMnO₄ → K₂MnO₄ MnO₂ O₂↑,condition:加热,phenomenon:固固加热型制氧},{category:分解,equation:2KClO₃ → 2KCl 3O₂↑,condition:MnO₂加热,phenomenon:催化剂加快分解},{category:分解,equation:2H₂O₂ → 2H₂O O₂↑,condition:MnO₂ 催化,phenomenon:常温制氧木条复燃},{category:分解,equation:CaCO₃ → CaO CO₂↑,condition:高温,phenomenon:工业制生石灰},{category:分解,equation:H₂CO₃ → H₂O CO₂↑,condition:加热,phenomenon:碳酸不稳定},{category:分解,equation:Cu₂(OH)₂CO₃ → 2CuO H₂O CO₂↑,condition:加热,phenomenon:绿色固体变黑},{category:分解,equation:2HgO → 2Hg O₂↑,condition:加热,phenomenon:拉瓦锡测空气成分},// —— 置换反应10 个单质换单质 ——{category:置换,equation:Zn H₂SO₄ → ZnSO₄ H₂↑,condition:常温,phenomenon:实验室制氢气},{category:置换,equation:Zn 2HCl → ZnCl₂ H₂↑,condition:常温,phenomenon:制氢气},{category:置换,equation:Fe H₂SO₄ → FeSO₄ H₂↑,condition:常温,phenomenon:溶液变浅绿色},{category:置换,equation:Fe 2HCl → FeCl₂ H₂↑,condition:常温,phenomenon:溶液变浅绿色},{category:置换,equation:Mg 2HCl → MgCl₂ H₂↑,condition:常温,phenomenon:反应剧烈},{category:置换,equation:2Al 6HCl → 2AlCl₃ 3H₂↑,condition:常温,phenomenon:需先打磨去氧化膜},{category:置换,equation:Fe CuSO₄ → FeSO₄ Cu,condition:常温,phenomenon:铁钉变红溶液变浅绿},{category:置换,equation:Zn CuSO₄ → ZnSO₄ Cu,condition:常温,phenomenon:析出红色铜},{category:置换,equation:Cu 2AgNO₃ → Cu(NO₃)₂ 2Ag,condition:常温,phenomenon:析出银白色银},{category:置换,equation:2Na 2H₂O → 2NaOH H₂↑,condition:常温,phenomenon:钠浮水面游动},// —— 复分解反应15 个交换成分价不变 ——{category:复分解,equation:HCl NaOH → NaCl H₂O,condition:常温,phenomenon:中和反应},{category:复分解,equation:H₂SO₄ 2NaOH → Na₂SO₄ 2H₂O,condition:常温,phenomenon:中和反应},{category:复分解,equation:2HCl Ca(OH)₂ → CaCl₂ 2H₂O,condition:常温,phenomenon:改良酸性土壤},{category:复分解,equation:2HCl Mg(OH)₂ → MgCl₂ 2H₂O,condition:常温,phenomenon:治疗胃酸过多},{category:复分解,equation:HCl AgNO₃ → AgCl↓ HNO₃,condition:常温,phenomenon:白沉淀检验 Cl⁻},{category:复分解,equation:H₂SO₄ BaCl₂ → BaSO₄↓ 2HCl,condition:常温,phenomenon:白沉淀检验 SO₄²⁻},{category:复分解,equation:2HCl Na₂CO₃ → 2NaCl H₂O CO₂↑,condition:常温,phenomenon:冒气泡检验 CO₃²⁻},{category:复分解,equation:CaCO₃ 2HCl → CaCl₂ H₂O CO₂↑,condition:常温,phenomenon:实验室制 CO₂},{category:复分解,equation:H₂SO₄ Na₂CO₃ → Na₂SO₄ H₂O CO₂↑,condition:常温,phenomenon:冒气泡},{category:复分解,equation:Na₂CO₃ Ca(OH)₂ → CaCO₃↓ 2NaOH,condition:常温,phenomenon:工业制烧碱},{category:复分解,equation:CuSO₄ 2NaOH → Cu(OH)₂↓ Na₂SO₄,condition:常温,phenomenon:蓝色沉淀检验 Cu²⁺},{category:复分解,equation:FeCl₃ 3NaOH → Fe(OH)₃↓ 3NaCl,condition:常温,phenomenon:红褐色沉淀检验 Fe³⁺},{category:复分解,equation:NaCl AgNO₃ → AgCl↓ NaNO₃,condition:常温,phenomenon:白色沉淀},{category:复分解,equation:Na₂CO₃ BaCl₂ → BaCO₃↓ 2NaCl,condition:常温,phenomenon:白色沉淀},{category:复分解,equation:Na₂SO₄ BaCl₂ → BaSO₄↓ 2NaCl,condition:常温,phenomenon:白沉淀不溶于硝酸},// —— 燃烧与氧化5 个——{category:燃烧氧化,equation:CH₄ 2O₂ → CO₂ 2H₂O,condition:点燃,phenomenon:天然气燃烧蓝色火焰},{category:燃烧氧化,equation:C₂H₅OH 3O₂ → 2CO₂ 3H₂O,condition:点燃,phenomenon:酒精燃烧},{category:燃烧氧化,equation:2CO O₂ → 2CO₂,condition:点燃,phenomenon:CO 燃烧蓝色火焰},{category:燃烧氧化,equation:C₆H₁₂O₆ 6O₂ → 6CO₂ 6H₂O,condition:缓慢氧化,phenomenon:呼吸作用释放能量},{category:燃烧氧化,equation:4Fe 3O₂ 6H₂O → 2Fe₂O₃·xH₂O,condition:缓慢氧化,phenomenon:铁生锈红棕色}];// 过滤逻辑按关键词匹配方程式 / 现象 / 分类纯函数exportfunctionfilterEquations(keyword:string,source:Equation[]):Equation[]{constkkeyword.trim();if(k.length0){returnsource;}returnsource.filter((e:Equation)e.equation.includes(k)||e.phenomenon.includes(k)||e.category.includes(k));}三、速查表页面EquationCollection.etsimport{router}fromkit.ArkUI;import{ALL_EQUATIONS,filterEquations,Equation}from../common/EquationData;/** * 47 个必背方程式速查表List 搜索过滤 */EntryComponentstruct EquationCollection{Statekeyword:string;// 搜索关键词State 驱动过滤privatecategoryColors:Recordstring,string{化合:#4C7DFF,分解:#0F766E,置换:#D97706,复分解:#7C3AED,燃烧氧化:#DC2626};build(){Column(){// 顶部标题栏Row(){Text(‹).fontSize(34).fontColor(Color.White).onClick(()router.back())Text(方程式速查47 个).fontSize(18).fontWeight(FontWeight.Bold).fontColor(Color.White)Blank()}.width(100%).height(56).padding({left:10,right:16}).backgroundColor(#4C7DFF)// 搜索框onChange 实时更新 State keywordTextInput({placeholder: 搜索方程式 / 现象 / 分类…,text:this.keyword}).height(44).margin({left:14,right:14,top:12}).onChange((value:string){this.keywordvalue;})// 分类快捷筛选按钮Row({space:8}){ForEach([全部,化合,分解,置换,复分解,燃烧氧化],(c:string){Button(c).height(32).fontSize(12).backgroundColor(c全部?#4C7DFF:#EAF0FF).fontColor(c全部?Color.White:#4C7DFF).onClick((){this.keywordc全部?:c;})},(c:string)c)}.margin({top:10,left:14,right:14})// 结果列表List 懒加载 ForEach 渲染过滤结果List({space:10}){ForEach(filterEquations(this.keyword,ALL_EQUATIONS),(item:Equation){ListItem(){Column({space:6}){Row({space:8}){Text(【item.category】).fontSize(12).fontColor(this.categoryColors[item.category]??#4C7DFF).backgroundColor((this.categoryColors[item.category]??#4C7DFF)1A).padding({left:8,right:8,top:2,bottom:2}).borderRadius(8)Text(item.condition).fontSize(12).fontColor(#9CA3AF)}.width(100%)Text(item.equation).fontSize(17).fontWeight(FontWeight.Bold).fontColor(#111827).width(100%).textAlign(TextAlign.Center).lineHeight(26)Text( item.phenomenon).fontSize(13).fontColor(#4B5563).width(100%).lineHeight(20)}.width(100%).padding(14).borderRadius(14).backgroundColor(Color.White).border({width:1,color:#E5EAF2})}},(item:Equation)item.equationitem.category)}.layoutWeight(1).margin({top:10,left:14,right:14}).scrollBar(BarState.Off)}.height(100%).width(100%).backgroundColor(#F4F6FA)}}四、代码要点数据与 UI 分离47 条数据集中在EquationData.ets页面只做渲染与交互方便维护和扩充。纯函数过滤filterEquations()不修改原始数组不可变返回新数组符合 ArkTS 状态管理最佳实践。实时搜索State keyword变化自动触发build()重绘TextInput.onChange实现边输入边过滤。List 懒加载相比Scroll ColumnList对长列表性能更优滚动流畅。分类着色Recordstring, string映射五类颜色视觉快速区分反应类型。五、47 个方程式分类统计与口诀分类数量判定标准口诀化合反应11生成物只有一种多变一化合记分解反应8反应物只有一种一变多分解记置换反应10单质 化合物 → 新单质 新化合物前置后盐可溶复分解反应15两种化合物交换成分价不变沉淀气体水三者占一燃烧氧化5剧烈 / 缓慢氧化三要素缺一不可必背口诀内容金属活动性钾钙钠镁铝锌铁锡铅氢铜汞银铂金常见化合价一价钾钠氯氢银二价氧钙钡镁锌三铝四硅五价磷二三铁、二四碳二四六硫都齐全盐的溶解性钾钠铵硝皆可溶盐酸盐除银硫酸盐除钡碳酸盐只溶钾钠铵复分解条件沉淀气体水三者占一才可行反应物可溶酸除外实验顺序查装定点收移熄先移导管后熄灯水电解正氧负氢氢二氧一燃烧与灭火可燃物、氧气、着火点隔离、隔绝、降温铁生锈铁生锈要氧和水防锈干燥、涂油、刷漆、镀层、合金六、结语化学方程式是化学的语言47 个方程式按化合、分解、置换、复分解、燃烧氧化五类记忆配合现象联想与口诀速背。本系列六篇文章的完整工程实现都可在鸿蒙项目中运行——每篇一个主题页面化合卡片、分解步骤状态机、置换判断器、复分解三步判断器、燃烧模拟器、方程式搜索速查表。学知识的同时练 ArkTS一举两得。