一、設計思路把 47 個必背方程式建模為帶分類標簽的結構化數據用ListForEach渲染成可滾動速查表疊加TextInput搜索框通過State keyword驅動filter()實時過濾——“邊輸入邊定位”。這既是學化學的速查工具也是 ArkTS 列表 搜索的完整示例。二、數據模型與過濾邏輯EquationData.ets/** * 方程式數據模型分類 方程式 條件 現象 */exportinterfaceEquation{category:string;// 分類化合 / 分解 / 置換 / 復分解 / 燃燒氧化equation:string;// 化學方程式condition:string;// 反應條件phenomenon:string;// 現象 / 備注}/** * 47 個必背方程式完整數據 */exportconstALL_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:工業(yè)制生石灰},{category:分解,equation:H?CO? → H?O CO?↑,condition:加熱,phenomenon:碳酸不穩(wěn)定},{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?2?},{category:復分解,equation:2HCl Na?CO? → 2NaCl H?O CO?↑,condition:常溫,phenomenon:冒氣泡檢驗 CO?2?},{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:工業(yè)制燒堿},{category:復分解,equation:CuSO? 2NaOH → Cu(OH)?↓ Na?SO?,condition:常溫,phenomenon:藍色沉淀檢驗 Cu2?},{category:復分解,equation:FeCl? 3NaOH → Fe(OH)?↓ 3NaCl,condition:常溫,phenomenon:紅褐色沉淀檢驗 Fe3?},{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:鐵生銹紅棕色}];// 過濾邏輯按關鍵詞匹配方程式 / 現象 / 分類純函數exportfunctionfilterEquations(keyword:string,source:Equation[]):Equation[]{constkkeyword.trim();if(k.length0){returnsource;}returnsource.filter((e:Equation)e.equation.includes(k)||e.phenomenon.includes(k)||e.category.includes(k));}三、速查表頁面EquationCollection.etsimport{router}fromkit.ArkUI;import{ALL_EQUATIONS,filterEquations,Equation}from../common/EquationData;/** * 47 個必背方程式速查表List 搜索過濾 */EntryComponentstruct EquationCollection{Statekeyword:string;// 搜索關鍵詞State 驅動過濾privatecategoryColors:Recordstring,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 keywordTextInput({placeholder: 搜索方程式 / 現象 / 分類…,text:this.keyword}).height(44).margin({left:14,right:14,top:12}).onChange((value:string){this.keywordvalue;})// 分類快捷篩選按鈕Row({space:8}){ForEach([全部,化合,分解,置換,復分解,燃燒氧化],(c:string){Button(c).height(32).fontSize(12).backgroundColor(c全部?#4C7DFF:#EAF0FF).fontColor(c全部?Color.White:#4C7DFF).onClick((){this.keywordc全部?: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.equationitem.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 狀態(tài)管理最佳實踐。實時搜索State keyword變化自動觸發(fā)build()重繪TextInput.onChange實現邊輸入邊過濾。List 懶加載相比Scroll ColumnList對長列表性能更優(yōu)滾動流暢。分類著色Recordstring, string映射五類顏色視覺快速區(qū)分反應類型。五、47 個方程式分類統計與口訣分類數量判定標準口訣化合反應11生成物只有一種多變一化合記分解反應8反應物只有一種一變多分解記置換反應10單質 化合物 → 新單質 新化合物前置后鹽可溶復分解反應15兩種化合物交換成分價不變沉淀氣體水三者占一燃燒氧化5劇烈 / 緩慢氧化三要素缺一不可必背口訣內容金屬活動性鉀鈣鈉鎂鋁鋅鐵錫鉛氫銅汞銀鉑金常見化合價一價鉀鈉氯氫銀二價氧鈣鋇鎂鋅三鋁四硅五價磷二三鐵、二四碳二四六硫都齊全鹽的溶解性鉀鈉銨硝皆可溶鹽酸鹽除銀硫酸鹽除鋇碳酸鹽只溶鉀鈉銨復分解條件沉淀氣體水三者占一才可行反應物可溶酸除外實驗順序查裝定點收移熄先移導管后熄燈水電解正氧負氫氫二氧一燃燒與滅火可燃物、氧氣、著火點隔離、隔絕、降溫鐵生銹鐵生銹要氧和水防銹干燥、涂油、刷漆、鍍層、合金六、結語化學方程式是化學的語言47 個方程式按化合、分解、置換、復分解、燃燒氧化五類記憶配合現象聯想與口訣速背。本系列六篇文章的完整工程實現都可在鴻蒙項目中運行——每篇一個主題頁面化合卡片、分解步驟狀態(tài)機、置換判斷器、復分解三步判斷器、燃燒模擬器、方程式搜索速查表。學知識的同時練 ArkTS一舉兩得。