一、设计思路

燃烧三要素——可燃物、氧气、温度达到着火点——缺一不可，是三个相互独立的"开关"。用三个 @State boolean 表达，用 && 逻辑判定"是否燃烧"，点击按钮翻转任一开关即"破坏条件"模拟灭火。ArkUI 的响应式刷新让火焰图标随状态实时变化，把抽象规律变成可交互的模拟实验。

二、燃烧三要素模拟器（CombustionSimulator.ets）

/**
 * 燃烧三要素模拟器
 * 三个 @State 布尔 = 三个条件开关；&& 判定燃烧；破坏任一条件即灭火
 */
@Entry
@Component
struct CombustionSimulator {
  @State hasFuel: boolean = true;       // 条件一：有可燃物
  @State hasOxygen: boolean = true;     // 条件二：有氧气（空气）
  @State reachIgnition: boolean = true; // 条件三：温度达到着火点

  // 核心判定：三条件同时满足才燃烧
  isBurning(): boolean {
    return this.hasFuel && this.hasOxygen && this.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 / 3
      Text(`燃烧条件满足 ${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.hasFuel = true;
          this.hasOxygen = true;
          this.reachIgnition = true;
        })
    }
    .padding(20)
  }
}

三、灭火原理映射表（配套数据模型）

/**
 * 灭火方法与破坏条件的映射（数据驱动）
 */
interface FireExtinguishMethod {
  name: string;      // 灭火方法
  broken: string;    // 被破坏的燃烧条件
  example: string;   // 生活实例
}

const EXTINGUISH_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 保持"单一数据源"。
• 灭火原理可验证：逐个破坏条件，对照提示文案即可理解"隔离 / 隔绝 / 降温"三类灭火原理。

五、燃烧与氧化核心知识点