一、設(shè)計(jì)思路把 47 個(gè)必背方程式建模為帶分類標(biāo)簽的結(jié)構(gòu)化數(shù)據(jù)用ListForEach渲染成可滾動(dòng)速查表疊加TextInput搜索框通過(guò)State keyword驅(qū)動(dòng)filter()實(shí)時(shí)過(guò)濾——“邊輸入邊定位”。這既是學(xué)化學(xué)的速查工具也是 ArkTS 列表 搜索的完整示例。二、數(shù)據(jù)模型與過(guò)濾邏輯EquationData.ets/** * 方程式數(shù)據(jù)模型分類 方程式 條件 現(xiàn)象 */exportinterfaceEquation{category:string;// 分類化合 / 分解 / 置換 / 復(fù)分解 / 燃燒氧化equation:string;// 化學(xué)方程式condition:string;// 反應(yīng)條件phenomenon:string;// 現(xiàn)象 / 備注}/** * 47 個(gè)必背方程式完整數(shù)據(jù) */exportconstALL_EQUATIONS:Equation[][// —— 化合反應(yīng)11 個(gè)多變一 ——{category:化合,equation:2Mg O? → 2MgO,condition:點(diǎn)燃,phenomenon:耀眼白光白色固體},{category:化合,equation:4P 5O? → 2P?O?,condition:點(diǎn)燃,phenomenon:大量白煙},{category:化合,equation:3Fe 2O? → Fe?O?,condition:點(diǎn)燃,phenomenon:火星四射黑色固體},{category:化合,equation:C O? → CO?,condition:點(diǎn)燃,phenomenon:白光CO? 使石灰水變渾濁},{category:化合,equation:2C O? → 2CO,condition:點(diǎn)燃(O?不足),phenomenon:藍(lán)色火焰CO 有毒},{category:化合,equation:S O? → SO?,condition:點(diǎn)燃,phenomenon:藍(lán)紫色火焰刺激性氣味},{category:化合,equation:2H? O? → 2H?O,condition:點(diǎn)燃,phenomenon:淡藍(lán)色火焰點(diǎn)燃前驗(yàn)純},{category:化合,equation:2CO O? → 2CO?,condition:點(diǎn)燃,phenomenon:藍(lán)色火焰},{category:化合,equation:CO? H?O → H?CO?,condition:常溫,phenomenon:石蕊變紅加熱恢復(fù)},{category:化合,equation:CaO H?O → Ca(OH)?,condition:常溫,phenomenon:放熱生石灰干燥劑},{category:化合,equation:2Na Cl? → 2NaCl,condition:點(diǎn)燃,phenomenon:黃色火焰白煙},// —— 分解反應(yīng)8 個(gè)一變多 ——{category:分解,equation:2H?O → 2H?↑ O?↑,condition:通電,phenomenon:正氧負(fù)氫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:常溫制氧木條復(fù)燃},{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:拉瓦錫測(cè)空氣成分},// —— 置換反應(yīng)10 個(gè)單質(zhì)換單質(zhì) ——{category:置換,equation:Zn H?SO? → ZnSO? H?↑,condition:常溫,phenomenon:實(shí)驗(yàn)室制氫氣},{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:反應(yīng)劇烈},{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:鈉浮水面游動(dòng)},// —— 復(fù)分解反應(yīng)15 個(gè)交換成分價(jià)不變 ——{category:復(fù)分解,equation:HCl NaOH → NaCl H?O,condition:常溫,phenomenon:中和反應(yīng)},{category:復(fù)分解,equation:H?SO? 2NaOH → Na?SO? 2H?O,condition:常溫,phenomenon:中和反應(yīng)},{category:復(fù)分解,equation:2HCl Ca(OH)? → CaCl? 2H?O,condition:常溫,phenomenon:改良酸性土壤},{category:復(fù)分解,equation:2HCl Mg(OH)? → MgCl? 2H?O,condition:常溫,phenomenon:治療胃酸過(guò)多},{category:復(fù)分解,equation:HCl AgNO? → AgCl↓ HNO?,condition:常溫,phenomenon:白沉淀檢驗(yàn) Cl?},{category:復(fù)分解,equation:H?SO? BaCl? → BaSO?↓ 2HCl,condition:常溫,phenomenon:白沉淀檢驗(yàn) SO?2?},{category:復(fù)分解,equation:2HCl Na?CO? → 2NaCl H?O CO?↑,condition:常溫,phenomenon:冒氣泡檢驗(yàn) CO?2?},{category:復(fù)分解,equation:CaCO? 2HCl → CaCl? H?O CO?↑,condition:常溫,phenomenon:實(shí)驗(yàn)室制 CO?},{category:復(fù)分解,equation:H?SO? Na?CO? → Na?SO? H?O CO?↑,condition:常溫,phenomenon:冒氣泡},{category:復(fù)分解,equation:Na?CO? Ca(OH)? → CaCO?↓ 2NaOH,condition:常溫,phenomenon:工業(yè)制燒堿},{category:復(fù)分解,equation:CuSO? 2NaOH → Cu(OH)?↓ Na?SO?,condition:常溫,phenomenon:藍(lán)色沉淀檢驗(yàn) Cu2?},{category:復(fù)分解,equation:FeCl? 3NaOH → Fe(OH)?↓ 3NaCl,condition:常溫,phenomenon:紅褐色沉淀檢驗(yàn) Fe3?},{category:復(fù)分解,equation:NaCl AgNO? → AgCl↓ NaNO?,condition:常溫,phenomenon:白色沉淀},{category:復(fù)分解,equation:Na?CO? BaCl? → BaCO?↓ 2NaCl,condition:常溫,phenomenon:白色沉淀},{category:復(fù)分解,equation:Na?SO? BaCl? → BaSO?↓ 2NaCl,condition:常溫,phenomenon:白沉淀不溶于硝酸},// —— 燃燒與氧化5 個(gè)——{category:燃燒氧化,equation:CH? 2O? → CO? 2H?O,condition:點(diǎn)燃,phenomenon:天然氣燃燒藍(lán)色火焰},{category:燃燒氧化,equation:C?H?OH 3O? → 2CO? 3H?O,condition:點(diǎn)燃,phenomenon:酒精燃燒},{category:燃燒氧化,equation:2CO O? → 2CO?,condition:點(diǎn)燃,phenomenon:CO 燃燒藍(lán)色火焰},{category:燃燒氧化,equation:C?H??O? 6O? → 6CO? 6H?O,condition:緩慢氧化,phenomenon:呼吸作用釋放能量},{category:燃燒氧化,equation:4Fe 3O? 6H?O → 2Fe?O?·xH?O,condition:緩慢氧化,phenomenon:鐵生銹紅棕色}];// 過(guò)濾邏輯按關(guān)鍵詞匹配方程式 / 現(xiàn)象 / 分類純函數(shù)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));}三、速查表頁(yè)面EquationCollection.etsimport{router}fromkit.ArkUI;import{ALL_EQUATIONS,filterEquations,Equation}from../common/EquationData;/** * 47 個(gè)必背方程式速查表List 搜索過(guò)濾 */EntryComponentstruct EquationCollection{Statekeyword:string;// 搜索關(guān)鍵詞State 驅(qū)動(dòng)過(guò)濾privatecategoryColors:Recordstring,string{化合:#4C7DFF,分解:#0F766E,置換:#D97706,復(fù)分解:#7C3AED,燃燒氧化:#DC2626};build(){Column(){// 頂部標(biāo)題欄Row(){Text(?).fontSize(34).fontColor(Color.White).onClick(()router.back())Text(方程式速查47 個(gè)).fontSize(18).fontWeight(FontWeight.Bold).fontColor(Color.White)Blank()}.width(100%).height(56).padding({left:10,right:16}).backgroundColor(#4C7DFF)// 搜索框onChange 實(shí)時(shí)更新 State keywordTextInput({placeholder: 搜索方程式 / 現(xiàn)象 / 分類…,text:this.keyword}).height(44).margin({left:14,right:14,top:12}).onChange((value:string){this.keywordvalue;})// 分類快捷篩選按鈕Row({space:8}){ForEach([全部,化合,分解,置換,復(fù)分解,燃燒氧化],(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})// 結(jié)果列表List 懶加載 ForEach 渲染過(guò)濾結(jié)果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)}}四、代碼要點(diǎn)數(shù)據(jù)與 UI 分離47 條數(shù)據(jù)集中在EquationData.ets頁(yè)面只做渲染與交互方便維護(hù)和擴(kuò)充。純函數(shù)過(guò)濾filterEquations()不修改原始數(shù)組不可變返回新數(shù)組符合 ArkTS 狀態(tài)管理最佳實(shí)踐。實(shí)時(shí)搜索State keyword變化自動(dòng)觸發(fā)build()重繪TextInput.onChange實(shí)現(xiàn)邊輸入邊過(guò)濾。List 懶加載相比Scroll ColumnList對(duì)長(zhǎng)列表性能更優(yōu)滾動(dòng)流暢。分類著色Recordstring, string映射五類顏色視覺(jué)快速區(qū)分反應(yīng)類型。五、47 個(gè)方程式分類統(tǒng)計(jì)與口訣分類數(shù)量判定標(biāo)準(zhǔn)口訣化合反應(yīng)11生成物只有一種多變一化合記分解反應(yīng)8反應(yīng)物只有一種一變多分解記置換反應(yīng)10單質(zhì) 化合物 → 新單質(zhì) 新化合物前置后鹽可溶復(fù)分解反應(yīng)15兩種化合物交換成分價(jià)不變沉淀氣體水三者占一燃燒氧化5劇烈 / 緩慢氧化三要素缺一不可必背口訣內(nèi)容金屬活動(dòng)性鉀鈣鈉鎂鋁鋅鐵錫鉛氫銅汞銀鉑金常見(jiàn)化合價(jià)一價(jià)鉀鈉氯氫銀二價(jià)氧鈣鋇鎂鋅三鋁四硅五價(jià)磷二三鐵、二四碳二四六硫都齊全鹽的溶解性鉀鈉銨硝皆可溶鹽酸鹽除銀硫酸鹽除鋇碳酸鹽只溶鉀鈉銨復(fù)分解條件沉淀氣體水三者占一才可行反應(yīng)物可溶酸除外實(shí)驗(yàn)順序查裝定點(diǎn)收移熄先移導(dǎo)管后熄燈水電解正氧負(fù)氫氫二氧一燃燒與滅火可燃物、氧氣、著火點(diǎn)隔離、隔絕、降溫鐵生銹鐵生銹要氧和水防銹干燥、涂油、刷漆、鍍層、合金六、結(jié)語(yǔ)化學(xué)方程式是化學(xué)的語(yǔ)言47 個(gè)方程式按化合、分解、置換、復(fù)分解、燃燒氧化五類記憶配合現(xiàn)象聯(lián)想與口訣速背。本系列六篇文章的完整工程實(shí)現(xiàn)都可在鴻蒙項(xiàng)目中運(yùn)行——每篇一個(gè)主題頁(yè)面化合卡片、分解步驟狀態(tài)機(jī)、置換判斷器、復(fù)分解三步判斷器、燃燒模擬器、方程式搜索速查表。學(xué)知識(shí)的同時(shí)練 ArkTS一舉兩得。