鸿蒙 ArkTS 实战｜List 搜索实现方程式速查：47 个必背方程式

小雨天気.

337人浏览 · 2026-08-24 11:33:47

小雨天気. · 2026-08-24 11:33:47 发布

在这里插入图片描述

一、设计思路

把 47 个必背方程式建模为带分类标签的结构化数据，用 List + ForEach 渲染成可滚动速查表，叠加 TextInput 搜索框，通过 @State keyword 驱动 filter() 实时过滤——“边输入边定位”。这既是学化学的速查工具，也是 ArkTS 列表 + 搜索的完整示例。

二、数据模型与过滤逻辑（EquationData.ets）

/**
 * 方程式数据模型：分类 + 方程式 + 条件 + 现象
 */
export interface Equation {
  category: string;    // 分类：化合 / 分解 / 置换 / 复分解 / 燃烧氧化
  equation: string;    // 化学方程式
  condition: string;   // 反应条件
  phenomenon: string;  // 现象 / 备注
}

/**
 * 47 个必背方程式（完整数据）
 */
export const ALL_EQUATIONS: Equation[] = [
  // —— 化合反应（11 个）：多变一 ——
  { category: '化合', equation: '2Mg + O₂ → 2MgO', condition: '点燃',
    phenomenon: '耀眼白光，白色固体' },
  { category: '化合', equation: '4P + 5O₂ → 2P₂O₅', condition: '点燃',
    phenomenon: '大量白烟' },
  { category: '化合', equation: '3Fe + 2O₂ → Fe₃O₄', condition: '点燃',
    phenomenon: '火星四射，黑色固体' },
  { category: '化合', equation: 'C + O₂ → CO₂', condition: '点燃',
    phenomenon: '白光，CO₂ 使石灰水变浑浊' },
  { category: '化合', equation: '2C + O₂ → 2CO', condition: '点燃(O₂不足)',
    phenomenon: '蓝色火焰，CO 有毒' },
  { category: '化合', equation: 'S + O₂ → SO₂', condition: '点燃',
    phenomenon: '蓝紫色火焰，刺激性气味' },
  { category: '化合', equation: '2H₂ + O₂ → 2H₂O', condition: '点燃',
    phenomenon: '淡蓝色火焰，点燃前验纯' },
  { category: '化合', equation: '2CO + O₂ → 2CO₂', condition: '点燃',
    phenomenon: '蓝色火焰' },
  { category: '化合', equation: 'CO₂ + H₂O → H₂CO₃', condition: '常温',
    phenomenon: '石蕊变红，加热恢复' },
  { category: '化合', equation: 'CaO + H₂O → Ca(OH)₂', condition: '常温',
    phenomenon: '放热，生石灰干燥剂' },
  { category: '化合', equation: '2Na + Cl₂ → 2NaCl', condition: '点燃',
    phenomenon: '黄色火焰，白烟' },

  // —— 分解反应（8 个）：一变多 ——
  { category: '分解', equation: '2H₂O → 2H₂↑ + O₂↑', condition: '通电',
    phenomenon: '正氧负氢，1:2' },
  { category: '分解', equation: '2KMnO₄ → K₂MnO₄ + MnO₂ + O₂↑', condition: '加热',
    phenomenon: '固固加热型制氧' },
  { category: '分解', equation: '2KClO₃ → 2KCl + 3O₂↑', condition: 'MnO₂+加热',
    phenomenon: '催化剂加快分解' },
  { category: '分解', equation: '2H₂O₂ → 2H₂O + O₂↑', condition: 'MnO₂ 催化',
    phenomenon: '常温制氧，木条复燃' },
  { category: '分解', equation: 'CaCO₃ → CaO + CO₂↑', condition: '高温',
    phenomenon: '工业制生石灰' },
  { category: '分解', equation: 'H₂CO₃ → H₂O + CO₂↑', condition: '加热',
    phenomenon: '碳酸不稳定' },
  { category: '分解', equation: 'Cu₂(OH)₂CO₃ → 2CuO + H₂O + CO₂↑', condition: '加热',
    phenomenon: '绿色固体变黑' },
  { category: '分解', equation: '2HgO → 2Hg + O₂↑', condition: '加热',
    phenomenon: '拉瓦锡测空气成分' },

  // —— 置换反应（10 个）：单质换单质 ——
  { category: '置换', equation: 'Zn + H₂SO₄ → ZnSO₄ + H₂↑', condition: '常温',
    phenomenon: '实验室制氢气' },
  { category: '置换', equation: 'Zn + 2HCl → ZnCl₂ + H₂↑', condition: '常温',
    phenomenon: '制氢气' },
  { category: '置换', equation: 'Fe + H₂SO₄ → FeSO₄ + H₂↑', condition: '常温',
    phenomenon: '溶液变浅绿色' },
  { category: '置换', equation: 'Fe + 2HCl → FeCl₂ + H₂↑', condition: '常温',
    phenomenon: '溶液变浅绿色' },
  { category: '置换', equation: 'Mg + 2HCl → MgCl₂ + H₂↑', condition: '常温',
    phenomenon: '反应剧烈' },
  { category: '置换', equation: '2Al + 6HCl → 2AlCl₃ + 3H₂↑', condition: '常温',
    phenomenon: '需先打磨去氧化膜' },
  { category: '置换', equation: 'Fe + CuSO₄ → FeSO₄ + Cu', condition: '常温',
    phenomenon: '铁钉变红，溶液变浅绿' },
  { category: '置换', equation: 'Zn + CuSO₄ → ZnSO₄ + Cu', condition: '常温',
    phenomenon: '析出红色铜' },
  { category: '置换', equation: 'Cu + 2AgNO₃ → Cu(NO₃)₂ + 2Ag', condition: '常温',
    phenomenon: '析出银白色银' },
  { category: '置换', equation: '2Na + 2H₂O → 2NaOH + H₂↑', condition: '常温',
    phenomenon: '钠浮水面游动' },

  // —— 复分解反应（15 个）：交换成分价不变 ——
  { category: '复分解', equation: 'HCl + NaOH → NaCl + H₂O', condition: '常温',
    phenomenon: '中和反应' },
  { category: '复分解', equation: 'H₂SO₄ + 2NaOH → Na₂SO₄ + 2H₂O', condition: '常温',
    phenomenon: '中和反应' },
  { category: '复分解', equation: '2HCl + Ca(OH)₂ → CaCl₂ + 2H₂O', condition: '常温',
    phenomenon: '改良酸性土壤' },
  { category: '复分解', equation: '2HCl + Mg(OH)₂ → MgCl₂ + 2H₂O', condition: '常温',
    phenomenon: '治疗胃酸过多' },
  { category: '复分解', equation: 'HCl + AgNO₃ → AgCl↓ + HNO₃', condition: '常温',
    phenomenon: '白沉淀，检验 Cl⁻' },
  { category: '复分解', equation: 'H₂SO₄ + BaCl₂ → BaSO₄↓ + 2HCl', condition: '常温',
    phenomenon: '白沉淀，检验 SO₄²⁻' },
  { category: '复分解', equation: '2HCl + Na₂CO₃ → 2NaCl + H₂O + CO₂↑', condition: '常温',
    phenomenon: '冒气泡，检验 CO₃²⁻' },
  { category: '复分解', equation: 'CaCO₃ + 2HCl → CaCl₂ + H₂O + CO₂↑', condition: '常温',
    phenomenon: '实验室制 CO₂' },
  { category: '复分解', equation: 'H₂SO₄ + Na₂CO₃ → Na₂SO₄ + H₂O + CO₂↑', condition: '常温',
    phenomenon: '冒气泡' },
  { category: '复分解', equation: 'Na₂CO₃ + Ca(OH)₂ → CaCO₃↓ + 2NaOH', condition: '常温',
    phenomenon: '工业制烧碱' },
  { category: '复分解', equation: 'CuSO₄ + 2NaOH → Cu(OH)₂↓ + Na₂SO₄', condition: '常温',
    phenomenon: '蓝色沉淀，检验 Cu²⁺' },
  { category: '复分解', equation: 'FeCl₃ + 3NaOH → Fe(OH)₃↓ + 3NaCl', condition: '常温',
    phenomenon: '红褐色沉淀，检验 Fe³⁺' },
  { category: '复分解', equation: 'NaCl + AgNO₃ → AgCl↓ + NaNO₃', condition: '常温',
    phenomenon: '白色沉淀' },
  { category: '复分解', equation: 'Na₂CO₃ + BaCl₂ → BaCO₃↓ + 2NaCl', condition: '常温',
    phenomenon: '白色沉淀' },
  { category: '复分解', equation: 'Na₂SO₄ + BaCl₂ → BaSO₄↓ + 2NaCl', condition: '常温',
    phenomenon: '白沉淀，不溶于硝酸' },

  // —— 燃烧与氧化（5 个）——
  { category: '燃烧氧化', equation: 'CH₄ + 2O₂ → CO₂ + 2H₂O', condition: '点燃',
    phenomenon: '天然气燃烧，蓝色火焰' },
  { category: '燃烧氧化', equation: 'C₂H₅OH + 3O₂ → 2CO₂ + 3H₂O', condition: '点燃',
    phenomenon: '酒精燃烧' },
  { category: '燃烧氧化', equation: '2CO + O₂ → 2CO₂', condition: '点燃',
    phenomenon: 'CO 燃烧，蓝色火焰' },
  { category: '燃烧氧化', equation: 'C₆H₁₂O₆ + 6O₂ → 6CO₂ + 6H₂O', condition: '缓慢氧化',
    phenomenon: '呼吸作用释放能量' },
  { category: '燃烧氧化', equation: '4Fe + 3O₂ + 6H₂O → 2Fe₂O₃·xH₂O', condition: '缓慢氧化',
    phenomenon: '铁生锈，红棕色' }
];

// 过滤逻辑：按关键词匹配方程式 / 现象 / 分类（纯函数）
export function filterEquations(keyword: string,
                                source: Equation[]): Equation[] {
  const k = keyword.trim();
  if (k.length === 0) {
    return source;
  }
  return source.filter((e: Equation) =>
    e.equation.includes(k) || e.phenomenon.includes(k) || e.category.includes(k)
  );
}

三、速查表页面（EquationCollection.ets）

import { router } from '@kit.ArkUI';
import { ALL_EQUATIONS, filterEquations, Equation } from '../common/EquationData';

/**
 * 47 个必背方程式速查表：List + 搜索过滤
 */
@Entry
@Component
struct EquationCollection {
  @State keyword: string = '';          // 搜索关键词（@State 驱动过滤）
  private categoryColors: Record<string, string> = {
    '化合': '#4C7DFF', '分解': '#0F766E',
    '置换': '#D97706', '复分解': '#7C3AED', '燃烧氧化': '#DC2626'
  };

  build() {
    Column() {
      // 顶部标题栏
      Row() {
        Text('‹').fontSize(34).fontColor(Color.White)
          .onClick(() => router.back())
        Text('方程式速查（47 个）')
          .fontSize(18).fontWeight(FontWeight.Bold).fontColor(Color.White)
        Blank()
      }
      .width('100%').height(56).padding({ left: 10, right: 16 })
      .backgroundColor('#4C7DFF')

      // 搜索框：onChange 实时更新 @State keyword
      TextInput({ placeholder: '🔍 搜索方程式 / 现象 / 分类…', text: this.keyword })
        .height(44).margin({ left: 14, right: 14, top: 12 })
        .onChange((value: string) => { this.keyword = value; })

      // 分类快捷筛选按钮
      Row({ space: 8 }) {
        ForEach(['全部', '化合', '分解', '置换', '复分解', '燃烧氧化'],
          (c: string) => {
            Button(c).height(32).fontSize(12)
              .backgroundColor(c === '全部' ? '#4C7DFF' : '#EAF0FF')
              .fontColor(c === '全部' ? Color.White : '#4C7DFF')
              .onClick(() => { this.keyword = c === '全部' ? '' : c; })
          }, (c: string) => c)
      }
      .margin({ top: 10, left: 14, right: 14 })

      // 结果列表：List 懒加载 + ForEach 渲染过滤结果
      List({ space: 10 }) {
        ForEach(filterEquations(this.keyword, ALL_EQUATIONS), (item: Equation) => {
          ListItem() {
            Column({ space: 6 }) {
              Row({ space: 8 }) {
                Text('【' + item.category + '】')
                  .fontSize(12).fontColor(this.categoryColors[item.category] ?? '#4C7DFF')
                  .backgroundColor((this.categoryColors[item.category] ?? '#4C7DFF') + '1A')
                  .padding({ left: 8, right: 8, top: 2, bottom: 2 })
                  .borderRadius(8)
                Text(item.condition).fontSize(12).fontColor('#9CA3AF')
              }.width('100%')

              Text(item.equation)
                .fontSize(17).fontWeight(FontWeight.Bold)
                .fontColor('#111827').width('100%').textAlign(TextAlign.Center)
                .lineHeight(26)

              Text('🎯 ' + item.phenomenon)
                .fontSize(13).fontColor('#4B5563').width('100%').lineHeight(20)
            }
            .width('100%').padding(14).borderRadius(14)
            .backgroundColor(Color.White).border({ width: 1, color: '#E5EAF2' })
          }
        }, (item: Equation) => item.equation + item.category)
      }
      .layoutWeight(1).margin({ top: 10, left: 14, right: 14 })
      .scrollBar(BarState.Off)
    }
    .height('100%').width('100%').backgroundColor('#F4F6FA')
  }
}

四、代码要点

数据与 UI 分离：47 条数据集中在 EquationData.ets，页面只做渲染与交互，方便维护和扩充。
纯函数过滤：filterEquations() 不修改原始数组（不可变），返回新数组，符合 ArkTS 状态管理最佳实践。
实时搜索：@State keyword 变化自动触发 build() 重绘，TextInput.onChange 实现"边输入边过滤"。
List 懒加载：相比 Scroll + Column，List 对长列表性能更优，滚动流畅。
分类着色：Record<string, string> 映射五类颜色，视觉快速区分反应类型。

五、47 个方程式分类统计与口诀

分类	数量	判定标准	口诀
化合反应	11	生成物只有一种	多变一，化合记
分解反应	8	反应物只有一种	一变多，分解记
置换反应	10	单质 + 化合物 → 新单质 + 新化合物	前置后，盐可溶
复分解反应	15	两种化合物交换成分，价不变	沉淀气体水，三者占一
燃烧氧化	5	剧烈 / 缓慢氧化	三要素缺一不可

必背口诀	内容
金属活动性	钾钙钠镁铝，锌铁锡铅氢，铜汞银铂金
常见化合价	一价钾钠氯氢银，二价氧钙钡镁锌，三铝四硅五价磷，二三铁、二四碳，二四六硫都齐全
盐的溶解性	钾钠铵硝皆可溶，盐酸盐除银，硫酸盐除钡，碳酸盐只溶钾钠铵
复分解条件	沉淀气体水，三者占一才可行；反应物可溶（酸除外）
实验顺序	查装定点收移熄，先移导管后熄灯
水电解	正氧负氢，氢二氧一
燃烧与灭火	可燃物、氧气、着火点；隔离、隔绝、降温
铁生锈	铁生锈要氧和水；防锈：干燥、涂油、刷漆、镀层、合金

六、结语

化学方程式是化学的语言，47 个方程式按"化合、分解、置换、复分解、燃烧氧化"五类记忆，配合现象联想与口诀速背。本系列六篇文章的完整工程实现都可在鸿蒙项目中运行——每篇一个主题页面：化合卡片、分解步骤状态机、置换判断器、复分解三步判断器、燃烧模拟器、方程式搜索速查表。学知识的同时练 ArkTS，一举两得。