鸿蒙 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.length0){Text(this.condition).fontSize(12).fontColor(this.accentColor).backgroundColor(this.accentColor1A).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.length0){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.length0){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.etsimport{router}fromkit.ArkUI;import{EquationCard}from../common/EquationCard;/** * 化合反应学习页多变一通式A B → AB */EntryComponentstruct 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 高效。六、化合反应速记要点内容定义多种物质 → 一种物质A B → AB判定只看生成物是否唯一常见现象Mg 耀眼白光、S 蓝紫色火焰、Fe 火星四射、P 白烟、H₂ 淡蓝色火焰典型易错铁丝燃烧生成 Fe₃O₄ 而非 Fe₂O₃点燃前氢气必须验纯口诀多变一化合记生成物只看一种