一、设计思路燃烧三要素——可燃物、氧气、温度达到着火点——缺一不可是三个相互独立的开关。用三个State boolean表达用逻辑判定是否燃烧点击按钮翻转任一开关即破坏条件模拟灭火。ArkUI 的响应式刷新让火焰图标随状态实时变化把抽象规律变成可交互的模拟实验。二、燃烧三要素模拟器CombustionSimulator.ets/** * 燃烧三要素模拟器 * 三个 State 布尔 三个条件开关 判定燃烧破坏任一条件即灭火 */EntryComponentstruct CombustionSimulator{StatehasFuel:booleantrue;// 条件一有可燃物StatehasOxygen:booleantrue;// 条件二有氧气空气StatereachIgnition:booleantrue;// 条件三温度达到着火点// 核心判定三条件同时满足才燃烧isBurning():boolean{returnthis.hasFuelthis.hasOxygenthis.reachIgnition;}// 提示当前被破坏的条件对应灭火原理missingReason():string{if(!this.hasFuel)return 已清除可燃物 → 隔离可燃物灭火森林隔离带;if(!this.hasOxygen)return 已隔绝氧气 → 盖锅盖 / 灭火器 / 沙土覆盖;if(!this.reachIgnition)return❄️ 温度降至着火点以下 → 浇水降温水蒸发吸热;return三个条件都满足正在剧烈燃烧;}// 计算满足条件的个数用于进度条satisfiedCount():number{return(this.hasFuel?1:0)(this.hasOxygen?1:0)(this.reachIgnition?1:0);}build(){Column({space:18}){// 状态大标题火焰 / 熄灭Text(this.isBurning()? 正在燃烧:⭕ 已熄灭).fontSize(30).fontWeight(FontWeight.Bold).fontColor(this.isBurning()?#EA580C:#6B7280)// 三要素进度满足 N / 3Text(燃烧条件满足${this.satisfiedCount()}/ 3).fontSize(13).fontColor(#9CA3AF)// 条件一可燃物开关Row({space:10}){Text(① 可燃物).fontSize(15).layoutWeight(1)Button(this.hasFuel?有 ✓:无 ✗).height(36).fontSize(13).backgroundColor(this.hasFuel?#16A34A:#9CA3AF).onClick((){this.hasFuel!this.hasFuel;})}.width(90%)// 条件二氧气开关Row({space:10}){Text(② 氧气 / 空气).fontSize(15).layoutWeight(1)Button(this.hasOxygen?充足 ✓:隔绝 ✗).height(36).fontSize(13).backgroundColor(this.hasOxygen?#16A34A:#9CA3AF).onClick((){this.hasOxygen!this.hasOxygen;})}.width(90%)// 条件三着火点开关Row({space:10}){Text(③ 温度达着火点).fontSize(15).layoutWeight(1)Button(this.reachIgnition?达到 ✓:降低 ✗).height(36).fontSize(13).backgroundColor(this.reachIgnition?#16A34A:#9CA3AF).onClick((){this.reachIgnition!this.reachIgnition;})}.width(90%)// 灭火原理提示Text(this.missingReason()).fontSize(14).fontColor(#B45309).lineHeight(22).textAlign(TextAlign.Center).width(90%).padding(14).borderRadius(12).backgroundColor(#FFF7E6)// 一键重置Button(重置重新点火 ).width(80%).height(40).backgroundColor(#EA580C).onClick((){this.hasFueltrue;this.hasOxygentrue;this.reachIgnitiontrue;})}.padding(20)}}三、灭火原理映射表配套数据模型/** * 灭火方法与破坏条件的映射数据驱动 */interfaceFireExtinguishMethod{name:string;// 灭火方法broken:string;// 被破坏的燃烧条件example:string;// 生活实例}constEXTINGUISH_METHODS:FireExtinguishMethod[][{name:隔离可燃物,broken:条件①,example:森林砍隔离带、搬走柴草},{name:隔绝氧气,broken:条件②,example:油锅盖锅盖、二氧化碳灭火器、沙土覆盖},{name:降温至着火点以下,broken:条件③,example:浇水、吹灭蜡烛吹气带走热量}];// 渲染代码节选// ForEach(EXTINGUISH_METHODS, (m: FireExtinguishMethod) {// Column({ space: 4 }) {// Text(m.name).fontSize(15).fontWeight(FontWeight.Bold)// Text(破坏 m.broken m.example)// .fontSize(12).fontColor(#6B7280)// }// })四、代码要点与逻辑建模isBurning()一行精确表达缺一不可任一开关为 false 火焰即灭。响应式刷新点击按钮修改State标题、颜色、进度条、提示文案全部自动更新无需手动刷新。状态可推导satisfiedCount()、missingReason()都是状态的纯派生函数UI 保持单一数据源。灭火原理可验证逐个破坏条件对照提示文案即可理解隔离 / 隔绝 / 降温三类灭火原理。五、燃烧与氧化核心知识点要点内容燃烧定义可燃物与氧气发生发光、放热的剧烈氧化反应三要素可燃物、氧气空气、温度达到着火点缺一不可灭火三原理隔离可燃物 / 隔绝氧气 / 降温至着火点以下破坏任一着火点物质本身性质不能改变灭火只是使温度低于着火点缓慢氧化不发光但放热铁生锈、呼吸作用、食物变质、酿造酒醋铁生锈铁 氧气 水共同作用铁锈疏松多孔不保护内部铁防锈方法保持干燥、涂油、刷漆、镀层、制成合金不锈钢自燃与爆炸缓慢氧化放热积聚达着火点→自燃有限空间急速燃烧→爆炸常见燃料CH₄、C₂H₅OH、CO、H₂ 燃烧点燃可燃气体前必须验纯