企业官网建设流程全解析

一、设计思路

把 47 个必背方程式建模为带分类标签的结构化数据，用List+ForEach渲染成可滚动速查表，叠加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[]{constk=keyword.trim();if(k.length===0){returnsource;}returnsource.filter((e:Equation)=>e.equation.includes(k)||e.phenomenon.includes(k)||e.category.includes(k));}

三、速查表页面（EquationCollection.ets）

import{router}from'@kit.ArkUI';import{ALL_EQUATIONS,filterEquations,Equation}from'../common/EquationData';/** * 47 个必背方程式速查表：List + 搜索过滤 */@Entry@Componentstruct EquationCollection{@Statekeyword:string='';// 搜索关键词（@State 驱动过滤）privatecategoryColors:Record<string,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.keyword=value;})// 分类快捷筛选按钮Row({space:8}){ForEach(['全部','化合','分解','置换','复分解','燃烧氧化'],(c:string)=>{Button(c).height(32).fontSize(12).backgroundColor(c==='全部'?'#4C7DFF':'#EAF0FF').fontColor(c==='全部'?Color.White:'#4C7DFF').onClick(()=>{this.keyword=c==='全部'?'':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.equation+item.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 + Column，List对长列表性能更优，滚动流畅。
• 分类着色：Record<string, string>映射五类颜色，视觉快速区分反应类型。

五、47 个方程式分类统计与口诀

六、结语

化学方程式是化学的语言，47 个方程式按"化合、分解、置换、复分解、燃烧氧化"五类记忆，配合现象联想与口诀速背。本系列六篇文章的完整工程实现都可在鸿蒙项目中运行——每篇一个主题页面：化合卡片、分解步骤状态机、置换判断器、复分解三步判断器、燃烧模拟器、方程式搜索速查表。学知识的同时练 ArkTS，一举两得。