一、设计思路

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

二、数据模型（Equation 接口）

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

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

/**
 * 化学方程式展示卡片（公共组件）
 * 化合 / 分解 / 置换 / 复分解四个页面复用
 */
@Component
export struct EquationCard {
  @Prop equation: string = '';
  @Prop condition: string = '';
  @Prop phenomenon: string = '';
  @Prop note: string = '';
  @Prop accentColor: 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
@Component
struct CombinationReaction {
  private themeColor: string = '#4C7DFF';
  private equations: 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 高效。

六、化合反应速记