鸿蒙 ArkTS 实战｜用卡片组件重构化合反应学习

一、设计思路

化合反应"多变一"的知识点结构化程度高，非常适合 ArkTS 的数据驱动 + 组件化开发。我们把每个方程式建模为interface，用@Prop属性传递、ForEach批量渲染成统一卡片，四个反应类型页面复用同一个EquationCard组件。

二、数据模型（Equation 接口）

// 化合反应数据模型interfaceEquation{equation:string;// 化学方程式condition:string;// 反应条件：点燃 / 加热 / 常温phenomenon:string;// 实验现象note:string;// 易错点 / 考点备注}

三、公共卡片组件（EquationCard.ets）

/** * 化学方程式展示卡片（公共组件） * 化合 / 分解 / 置换 / 复分解四个页面复用 */@Componentexportstruct EquationCard{@Propequation:string='';@Propcondition:string='';@Propphenomenon:string='';@Propnote:string='';@PropaccentColor:string='#4C7DFF';build(){Column({space:10}){// 方程式主体Text(this.equation).fontSize(17).fontWeight(FontWeight.Bold).fontColor('#111827').width('100%').textAlign(TextAlign.Center).lineHeight(26)// 反应条件标签（空则不显示）if(this.condition.length>0){Text(this.condition).fontSize(12).fontColor(this.accentColor).backgroundColor(this.accentColor+'1A').padding({left:12,right:12,top:3,bottom:3}).borderRadius(10).margin({top:2})}Divider().color('#EEF2F7').strokeWidth(1).margin({top:4,bottom:4})// 实验现象if(this.phenomenon.length>0){Row({space:6}){Text('🎯').fontSize(14)Text(this.phenomenon).fontSize(13).fontColor('#4B5563').layoutWeight(1).lineHeight(20)}.width('100%').alignItems(VerticalAlign.Top)}// 备注if(this.note.length>0){Row({space:6}){Text('💡').fontSize(14)Text(this.note).fontSize(13).fontColor('#6B7280').layoutWeight(1).lineHeight(20)}.width('100%').alignItems(VerticalAlign.Top)}}.width('100%').padding(16).borderRadius(16).backgroundColor(Color.White).border({width:1,color:'#E5EAF2'})}}

四、化合反应页面（CombinationReaction.ets）

import{router}from'@kit.ArkUI';import{EquationCard}from'../common/EquationCard';/** * 化合反应学习页（多变一）通式：A + B → AB */@Entry@Componentstruct CombinationReaction{privatethemeColor:string='#4C7DFF';privateequations:Equation[]=[{equation:'2Mg + O₂ → 2MgO',condition:'点燃',phenomenon:'发出耀眼白光，放出大量热',note:'生成白色固体氧化镁，镁带燃烧是中考常考点'},{equation:'4P + 5O₂ → 2P₂O₅',condition:'点燃',phenomenon:'产生大量白烟，放出热量',note:'红磷燃烧可用于测定空气中氧气含量'},{equation:'3Fe + 2O₂ → Fe₃O₄',condition:'点燃',phenomenon:'剧烈燃烧，火星四射，放热',note:'集气瓶底放少量水或细沙，防止高温熔落物炸裂瓶底'},{equation:'C + O₂ → CO₂',condition:'点燃',phenomenon:'发出白光，放热',note:'生成能使澄清石灰水变浑浊的气体'},{equation:'2C + O₂ → 2CO',condition:'点燃（氧气不充足）',phenomenon:'发出蓝色火焰，放热',note:'碳不完全燃烧生成一氧化碳，CO 有毒，注意通风'},{equation:'S + O₂ → SO₂',condition:'点燃',phenomenon:'发出明亮的蓝紫色火焰，放热',note:'SO₂ 有刺激性气味，是空气污染物'},{equation:'2H₂ + O₂ → 2H₂O',condition:'点燃',phenomenon:'发出淡蓝色火焰，放热',note:'点燃氢气前必须先验纯，防止爆炸'},{equation:'2CO + O₂ → 2CO₂',condition:'点燃',phenomenon:'发出蓝色火焰，放热',note:'CO 是可燃性有毒气体，尾气需处理'},{equation:'CO₂ + H₂O → H₂CO₃',condition:'常温',phenomenon:'无明显现象',note:'碳酸使紫色石蕊变红，加热后又恢复紫色'},{equation:'CaO + H₂O → Ca(OH)₂',condition:'常温（放热）',phenomenon:'放出大量热',note:'生石灰作食品干燥剂，产物为熟石灰'},{equation:'2Na + Cl₂ → 2NaCl',condition:'点燃',phenomenon:'剧烈燃烧，发出黄色火焰',note:'钠在氯气中燃烧，生成白烟（氯化钠固体小颗粒）'}];build(){Column(){// 顶部标题栏Row(){Text('‹').fontSize(34).fontColor(Color.White).onClick(()=>router.back())Text('化合反应').fontSize(20).fontWeight(FontWeight.Bold).fontColor(Color.White).margin({left:8})Blank()}.width('100%').height(56).padding({left:10,right:16}).backgroundColor(this.themeColor)Scroll(){Column({space:14}){// 定义卡片Column({space:8}){Text('📖 什么是化合反应').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#111827').width('100%')Text('由两种或两种以上的物质生成另一种物质的反应。').fontSize(14).fontColor('#4B5563').lineHeight(22).width('100%')Text('特征：多变一。判断时只看生成物是否只有一种。').fontSize(13).fontColor(this.themeColor).width('100%')}.width('100%').padding(16).borderRadius(16).backgroundColor('#EAF0FF').border({width:1,color:'#D4E2FF'})// 通式卡片Column({space:6}){Text('通式').fontSize(12).fontColor('#9CA3AF').width('100%')Text('A + B → AB').fontSize(22).fontWeight(FontWeight.Bold).fontColor(this.themeColor).width('100%').textAlign(TextAlign.Center)}.width('100%').padding(16).borderRadius(16).backgroundColor(Color.White).border({width:1,color:'#E5EAF2'})// ForEach 批量渲染方程式卡片ForEach(this.equations,(item:Equation)=>{EquationCard({equation:item.equation,condition:item.condition,phenomenon:item.phenomenon,note:item.note,accentColor:this.themeColor})},(item:Equation)=>item.equation)// 口诀卡片Column({space:8}){Text('🗣️ 记忆口诀').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#111827').width('100%')Text('多变一，化合记；生成物只看一种，别把燃烧混进来。').fontSize(14).fontColor('#4B5563').lineHeight(24).width('100%')}.width('100%').padding(16).borderRadius(16).backgroundColor('#FFF7E6').border({width:1,color:'#FDEBC8'})}.padding(14)}.layoutWeight(1).scrollBar(BarState.Off)}.height('100%').width('100%').backgroundColor('#F4F6FA')}}

五、代码要点

• 组件复用：EquationCard用@Prop接收数据，四个反应类型页面共享同一卡片样式，只改accentColor换主题色。
• 数据驱动：interface Equation定义结构化数据，ForEach遍历渲染，增删方程式只需改数组。
• 唯一渲染键：ForEach第三个参数(item) => item.equation保证列表 diff 高效。

六、化合反应速记