摘要題庫應(yīng)用的首頁不是把所有功能堆在一屏而是要回答三個問題用戶上次學(xué)到哪里、現(xiàn)在最值得做什么、怎樣用最短路徑進入目標題庫。本文基于“中國方言題庫”真實 ArkTS 源碼拆解HomePage、Index、MockBanks與BankCard的協(xié)作方式展示如何用 ArkUI 組織六個地區(qū)題庫、七類題型、本地學(xué)習(xí)統(tǒng)計、快速入口以及 phone、tablet、2in1 的斷點布局。所有題量和學(xué)習(xí)進度都來自當前題庫與本地記錄不虛構(gòu)在線熱度、排行榜或云端推薦。一、首頁的目標不是“內(nèi)容多”而是降低下一步?jīng)Q策成本中國方言題庫當前包名為com.example.one11版本配置為1.0.2模塊聲明支持phone、tablet和2in1。應(yīng)用首頁面對的不是普通資訊瀏覽而是反復(fù)學(xué)習(xí)場景新用戶需要快速理解題庫覆蓋范圍老用戶需要馬上看到自己的進度明確下一次點擊。源碼中的首頁按以下順序組織品牌與搜索 - 今日練習(xí)概覽 - 繼續(xù)練習(xí)與快速操作 - 題型分類 - 推薦題庫這個順序有明確的信息優(yōu)先級。標題負責(zé)建立產(chǎn)品身份Hero 區(qū)給出題量和用戶狀態(tài)快速操作把“繼續(xù)學(xué)習(xí)”放到最短路徑分類適合按題型探索推薦題庫則按地區(qū)提供完整入口。用戶不必先理解應(yīng)用所有頁面就能開始一次答題。本文的唯一標記是首頁統(tǒng)計必須由本地學(xué)習(xí)記錄實時推導(dǎo)。題量、已答、正確率、考試次數(shù)和收藏數(shù)都應(yīng)能回到實際數(shù)據(jù)源不能用裝飾性數(shù)字填滿界面。二、主導(dǎo)航先解決跨設(shè)備結(jié)構(gòu)Index.ets定義五個主入口private tabs: TabItem[] [ { title: 首頁, iconNormal: $r(app.media.ic_tab_home), iconSelected: $r(app.media.ic_tab_home_selected) }, { title: 題庫, iconNormal: $r(app.media.ic_tab_bank), iconSelected: $r(app.media.ic_tab_bank_selected) }, { title: 報考, iconNormal: $r(app.media.ic_tab_exam), iconSelected: $r(app.media.ic_tab_exam_selected) }, { title: 收藏, iconNormal: $r(app.media.ic_tab_favorite), iconSelected: $r(app.media.ic_tab_favorite_selected) }, { title: 我的, iconNormal: $r(app.media.ic_tab_mine), iconSelected: $r(app.media.ic_tab_mine_selected) } ]當前選中項通過StorageLink(currentTabIndex)共享。首頁中的“更多”“繼續(xù)練習(xí)”“錯題復(fù)習(xí)”等入口可以直接切換主 Tab而搜索、分類等二級功能使用router.pushUrl()進入獨立頁面。這形成兩個清晰層級主功能切換修改currentTabIndex不增加頁面棧。二級任務(wù)使用 Router 跳轉(zhuǎn)支持系統(tǒng)返回。在窄窗口中Index使用底部導(dǎo)航在更寬斷點中改為左側(cè)導(dǎo)航欄。底部導(dǎo)航高度并非寫死在系統(tǒng)手勢區(qū)上方而是讀取navigationIndicatorHeightPx經(jīng)過px2vp()轉(zhuǎn)換后與最小安全距離取最大值private bottomSafePadding(): number { return Math.max( Sizes.BOTTOM_NAV_MIN_PADDING, this.getUIContext().px2vp(this.navigationIndicatorHeightPx) ) }這種做法比固定增加一段 padding 更可靠因為不同設(shè)備、導(dǎo)航模式和窗口狀態(tài)的避讓高度可能不同。三、首頁狀態(tài)只連接“需要顯示的數(shù)據(jù)”HomePage通過StorageLink訂閱四類學(xué)習(xí)記錄StorageLink(bankProgress) progressList: BankProgress[] [] StorageLink(examHistory) examHistory: ExamHistory[] [] StorageLink(favoriteRecords) favRecords: FavoriteRecord[] [] StorageLink(wrongRecords) wrongRecords: WrongRecord[] []首頁沒有直接操作 Preferences也沒有自己解析數(shù)據(jù)庫文件而是把已有狀態(tài)交給StatService.summarize()private myStats() { return StatService.summarize( this.progressList, this.examHistory, this.favRecords, this.wrongRecords ) }這條邊界很重要。頁面負責(zé)展示統(tǒng)計規(guī)則應(yīng)在服務(wù)層持久化讀取應(yīng)在數(shù)據(jù)管理層。否則每個頁面都各自計算正確率很容易出現(xiàn)首頁、題庫詳情和“我的”頁面數(shù)字不一致。對于 ArkUI 狀態(tài)還要注意數(shù)組更新方式。如果服務(wù)只是修改原數(shù)組中對象的字段卻沒有觸發(fā)可觀察狀態(tài)更新頁面可能不會刷新。穩(wěn)妥做法是在數(shù)據(jù)服務(wù)完成寫入后以明確的新數(shù)組或統(tǒng)一狀態(tài)發(fā)布方式更新 AppStorage讓 Hero、題庫卡片和徽標一起變化。四、題庫目錄來自真實題目集合MockBanks.ets中定義六個地區(qū)export const REGIONS: Region[] [ { id: sichuan, name: 四川話, shortName: 川, cover: $r(app.media.img_bank_cover_sichuan) }, { id: yue, name: 粵語, shortName: 粵, cover: $r(app.media.img_bank_cover_yue) }, { id: northeast, name: 東北話, shortName: 東, cover: $r(app.media.img_bank_cover_northeast) }, { id: shanghai, name: 上海話, shortName: 滬, cover: $r(app.media.img_bank_cover_shanghai) }, { id: minnan, name: 閩南語, shortName: 閩, cover: $r(app.media.img_bank_cover_minnan) }, { id: hakka, name: 客家話, shortName: 客, cover: $r(app.media.img_bank_cover_hakka) } ]題型包含詞匯、看義猜詞、方言差異、情景對話、方言文化、俗語歇后語和地區(qū)特色。源碼不是把目錄卡片上的題量永久寫成一個常數(shù)而是在syncCatalogCounts()中從題目集合回填每個題庫、章節(jié)和分類的數(shù)量。function syncCatalogCounts(): void { const categoryCounts: Mapstring, number new Mapstring, number() for (const bank of BANKS) { const questions getQuestions(bank.id) bank.totalCount questions.length for (const chapter of bank.chapters) { chapter.total questions.filter( (question: Question) question.chapterId chapter.id ).length } for (const question of questions) { categoryCounts.set( question.type, (categoryCounts.get(question.type) || 0) 1 ) } } }由此導(dǎo)出的TOTAL_QUESTIONS和TOTAL_REGIONS才能用于首頁 Hero。題庫內(nèi)容調(diào)整后首頁總量會跟隨變化避免“介紹寫 1500 題實際包內(nèi)只有另一數(shù)量”的審核風(fēng)險。源碼還對題干去重并把已經(jīng)下線的聽音題重新歸類為詞匯題而不是直接丟棄。這說明首頁分類數(shù)字必須在轉(zhuǎn)換與去重之后計算不能拿原始素材條數(shù)當作用戶真正能答的題量。五、Hero 區(qū)展示目錄規(guī)模與個人狀態(tài)首頁 Hero 由兩類信息組成目錄事實總題量與覆蓋地區(qū)數(shù)。用戶事實已答題數(shù)、正確率、考試次數(shù)和收藏數(shù)。Text(${TOTAL_QUESTIONS.toLocaleString()} 題) Text(覆蓋 ${TOTAL_REGIONS} 個地區(qū)方言) this.HeroStat(${this.myStats().totalAnswered}, 已答) this.HeroStat(${this.myStats().accuracyPercent}%, 正確率) this.HeroStat(${this.myStats().examCount}, 考試) this.HeroStat(${this.myStats().favoriteCount}, 收藏)這里沒有把“熱門度”當成學(xué)習(xí)成果也沒有寫一個靜態(tài)正確率。新用戶沒有記錄時應(yīng)自然顯示 0而不是用樣例數(shù)據(jù)制造“應(yīng)用很活躍”的錯覺。若正確率分母為 0統(tǒng)計服務(wù)應(yīng)返回 0不能出現(xiàn)NaN%。Hero 的地圖圖片使用固定視覺尺寸并配合objectFit(ImageFit.Cover)文字區(qū)域則由Blank()分隔。適配時要特別測試系統(tǒng)字體放大因為 32vp 的題量和右側(cè) 108vp 圖片在窄屏上可能競爭空間。若長數(shù)字或本地化文案導(dǎo)致?lián)頂D可以讓圖片縮小、限制文字行數(shù)或在極窄寬度切換為上下結(jié)構(gòu)。六、快速操作要對應(yīng)真實可達路徑首頁的主行動“繼續(xù)練習(xí)”通過切換到題庫 Tab 實現(xiàn).onClick(() { this.currentTabIndex 1 })第二行提供“真實題量計時測試”和“錯題復(fù)習(xí)”。錯題復(fù)習(xí)會同時設(shè)置收藏頁內(nèi)部 Tabthis.favoriteTabIndex 2 this.currentTabIndex 3這種聯(lián)動很適合主導(dǎo)航內(nèi)的跨模塊入口但必須保證目標頁面也使用同一個StorageLink(favoriteTabIndex)否則首頁寫入了狀態(tài)收藏頁卻仍停留在默認分欄?；貧w測試至少覆蓋無錯題時點擊“錯題復(fù)習(xí)”出現(xiàn)明確空態(tài)。有錯題時進入收藏頁的錯題分欄。從錯題頁返回首頁后主導(dǎo)航狀態(tài)正確。連續(xù)快速點擊不會疊加路由或丟失選中狀態(tài)?！袄^續(xù)練習(xí)”當前只是進入題庫列表并沒有讀取最近一次題庫直接恢復(fù)章節(jié)因此文案使用“從熱門題庫開始”是合理的。如果未來要真正實現(xiàn)續(xù)學(xué)應(yīng)保存最近題庫和章節(jié) ID并在目標不存在時降級到題庫列表不能只把按鈕改名為“繼續(xù)上次”。七、分類入口使用可復(fù)核的參數(shù)契約首頁顯示七個題型和一個“查看全部”每個分類通過 Router 傳遞類型與名稱router.pushUrl({ url: pages/SearchPage, params: { categoryType: cat.type, categoryName: cat.name } })這里的契約是categoryType用于篩選categoryName用于展示。目標頁應(yīng)對參數(shù)缺失、未知類型和舊版本書簽做兜底。如果直接斷言參數(shù)一定存在外部恢復(fù)頁面或路由重建時可能白屏。分類項寬度為23%四列換行并設(shè)置單行省略。它能在常見手機寬度上形成規(guī)整網(wǎng)格但“俗語歇后語”這類長名稱可能被省略。省略雖然避免布局破壞卻可能降低可辨認性?？蛇x改進包括允許兩行并給容器穩(wěn)定高度。使用更短但準確的顯示名。在平板寬度下增加列數(shù)或提升項目寬度。為圖標提供明確的無障礙描述。不要通過把字體縮到不可讀來維持四列。AppGallery 的正文和關(guān)鍵文字對比、字號與可觸達性比“每行必須四個”更重要。八、推薦題庫不是網(wǎng)絡(luò)推薦算法首頁“推薦題庫”實際遍歷本地BANKSForEach(BANKS, (bank: Bank) { BankCard({ bank: bank }) }, (bank: Bank) bank.id)因此這里的“推薦”含義是產(chǎn)品預(yù)設(shè)的地區(qū)入口而不是基于賬號畫像、云端行為或全網(wǎng)熱度的個性化推薦。商店介紹和隱私政策不應(yīng)把它描述成 AI 推薦。題庫模型中有hot字段卡片將數(shù)值疊加到封面左下角。但當前源碼沒有證明它來自在線訪問統(tǒng)計。更穩(wěn)妥的產(chǎn)品處理有兩種把字段明確解釋為編輯排序權(quán)重不向用戶展示成真實熱度。若要展示“熱度”說明它是本地預(yù)設(shè)推薦指數(shù)而非實時用戶數(shù)。最不應(yīng)做的是把 98、95 等靜態(tài)值寫成“98 萬人在學(xué)”。任何用戶量、下載量、排名或趨勢都需要真實平臺數(shù)據(jù)。九、BankCard 將題庫事實和用戶進度合并BankCard同時顯示題庫封面、題量、正確率、已答數(shù)量和進度條。它不是直接采用題庫模型里的默認準確率而是優(yōu)先讀取用戶真實進度private realAccuracy(): number { const p UserDataManager.getProgress(this.progressList, this.bank.id) if (p p.finished 0) return p.correct / p.finished return this.bank.accuracy } private progressRatio(): number { if (this.bank.totalCount 0) return 0 return Math.min(this.realFinished() / this.bank.totalCount, 1) }這里有兩個細節(jié)值得保留分母為 0 時返回 0避免異常值。使用Math.min(..., 1)避免題庫調(diào)整后舊進度超過新題量導(dǎo)致進度條溢出。還可以進一步處理下限若損壞數(shù)據(jù)出現(xiàn)負數(shù)建議把比例限制在[0, 1]。正確率也應(yīng)驗證correct finished數(shù)據(jù)修復(fù)應(yīng)在服務(wù)層完成而不是讓每張卡片各自猜測。十、卡片按自身寬度切換而不是只看設(shè)備名題庫卡片通過onAreaChange記錄實際寬度State cardWidth: number 360 private useCompactLayout(): boolean { return this.cardWidth 0 this.cardWidth 280 }寬度小于 280vp 時使用縱向緊湊卡片否則使用橫向卡片。這個策略比“平板永遠橫向、手機永遠縱向”更適合多窗口同一臺 2in1 設(shè)備在窄窗口和寬窗口中可以采用不同卡片。首頁的推薦區(qū)也根據(jù)斷點和頁面實際寬度決定布局private useGridLayout(): boolean { return this.currentBp lg this.pageWidth 700 }寬布局中每張卡片占32%形成三列其他情況使用單列。這是“頁面決定列數(shù)、卡片決定內(nèi)部形態(tài)”的兩級自適應(yīng)頁面容器決定一行放幾張?？ㄆ鶕?jù)自己得到的寬度決定橫向或緊湊布局。這種職責(zé)分配可復(fù)用性更高。BankCard 不必知道自己位于首頁、搜索結(jié)果還是收藏頁只需要響應(yīng)可用空間。十一、為何首頁末尾仍保留 92vp 空白HomePage的內(nèi)容末尾有Blank().height(92)這是為了讓最后一張題庫卡片在底部導(dǎo)航上方仍能滾動到可見位置。但固定 92vp 與Index中動態(tài)計算的導(dǎo)航安全高度存在潛在重復(fù)如果手勢區(qū)更高空白可能仍不足如果側(cè)邊導(dǎo)航模式?jīng)]有底部欄空白又顯得過多。更一致的方案是把底部內(nèi)容 inset 作為共享狀態(tài)或布局參數(shù)傳給頁面Scroll() { // content } .contentEndOffset(this.bottomContentInset)具體 API 需按項目 SDK 可用性選取也可以讓 Index 的內(nèi)容容器統(tǒng)一留出空間。關(guān)鍵是底部導(dǎo)航與頁面末尾不要分別維護兩個互不相干的常數(shù)。十二、搜索入口要保持功能邊界清楚Header 右側(cè)搜索按鈕進入pages/SearchPage。搜索屬于二級任務(wù)因此使用路由而不是主 Tab。按鈕當前用Stack包裹圖片并提供 46vp 的觸控區(qū)域滿足常用觸控尺寸。發(fā)布前還應(yīng)驗證搜索圖標在淺色和深色背景下有足夠?qū)Ρ?。無輸入時有推薦或歷史而不是空白頁。不存在匹配項時顯示明確空態(tài)。輸入法彈出后搜索結(jié)果和返回按鈕仍可觸達。從分類入口進入時標題和篩選條件正確。如果搜索僅針對本地題庫就不應(yīng)因為模塊聲明了INTERNET而偷偷改成在線聯(lián)想網(wǎng)絡(luò)權(quán)限的實際用途必須單獨從源碼核實并在隱私材料中準確說明。十三、性能重點不是“少寫組件”而是控制重復(fù)計算首頁每次重建都會調(diào)用myStats()多次推薦卡片也會查找對應(yīng)進度。當前數(shù)據(jù)規(guī)模不大但隨著題庫和歷史增長重復(fù)遍歷可能影響滑動和狀態(tài)更新?？梢詮娜齻€方向優(yōu)化在服務(wù)層把進度數(shù)組轉(zhuǎn)換為按bankId索引的 Map。在學(xué)習(xí)記錄變化時計算一次首頁統(tǒng)計快照。題庫目錄計數(shù)只在題庫初始化或內(nèi)容變更時同步不在每個卡片構(gòu)建周期重復(fù)掃描。優(yōu)化前要用真實測量判斷瓶頸。不要為了六個題庫引入復(fù)雜緩存框架也不要把所有狀態(tài)塞進全局單例。首頁真正需要的是穩(wěn)定的統(tǒng)計快照與低成本查找。十四、狀態(tài)、空態(tài)和異常態(tài)都要能解釋首頁正常態(tài)很完整但工程交付還應(yīng)顯式覆蓋狀態(tài)頁面表現(xiàn)首次啟動統(tǒng)計全部為 0推薦題庫仍可進入無收藏/錯題對應(yīng)計數(shù)為 0點擊后顯示空態(tài)題庫為空總題量為 0練習(xí)入口禁用或說明原因本地數(shù)據(jù)損壞使用安全默認值并記錄診斷信息路由參數(shù)錯誤回退到題庫列表不白屏圖片資源失敗保持卡片尺寸顯示替代背景當前目錄內(nèi)容來自包內(nèi)數(shù)據(jù)不需要把題庫加載包裝成虛假的網(wǎng)絡(luò) Loading。若初始化確實有異步 Preferences 恢復(fù)可以在首屏使用穩(wěn)定骨架或延遲展示個人統(tǒng)計但地區(qū)入口不必等待用戶數(shù)據(jù)后才能出現(xiàn)。十五、無障礙和國際化不能最后補方言學(xué)習(xí)應(yīng)用包含大量具有文化語境的文本。首頁至少要為搜索圖標、題庫封面和可點擊卡片提供可理解的無障礙信息。只顯示“川”“粵”等短字時讀屏描述應(yīng)是“四川話題庫”“粵語題庫”而不是單個字符。雖然當前產(chǎn)品以中文為主也應(yīng)避免通過字符串拼接破壞后續(xù)本地化。例如Text(${TOTAL_QUESTIONS.toLocaleString()} 題)在單一中文版本中可用但更完整的工程可以使用字符串資源和占位符。應(yīng)用名、模塊說明、隱私文案與 AppGallery 素材也應(yīng)統(tǒng)一引用當前品牌“中國方言題庫”。十六、首頁測試應(yīng)圍繞數(shù)據(jù)變化和窗口變化建議把首頁回歸拆成以下用例數(shù)據(jù)用例新用戶統(tǒng)計為 0。完成一道題后已答和正確率變化。收藏一道題后收藏計數(shù)變化。產(chǎn)生錯題后主導(dǎo)航徽標與錯題入口同步。刪除歷史后考試次數(shù)更新。題庫總量變更后總題量和卡片題量一致。交互用例搜索按鈕進入搜索頁并可返回。每個分類傳遞正確categoryType?！案唷鼻袚Q到題庫 Tab?！坝嫊r測試”切換到報考 Tab?！板e題復(fù)習(xí)”打開收藏頁錯題分欄。六張題庫卡片進入各自詳情頁。適配用例手機底部導(dǎo)航不進入手勢區(qū)。平板/2in1 使用側(cè)邊導(dǎo)航。700vp 附近窗口縮放時推薦區(qū)切換穩(wěn)定。卡片寬度跨過 280vp 時內(nèi)部布局不閃爍。系統(tǒng)字體放大后標題、統(tǒng)計和長題型名仍可讀。十七、從首頁源碼能得出的邊界結(jié)論基于當前真實實現(xiàn)可以準確描述首頁覆蓋六個地區(qū)方言題庫。首頁提供七類題型入口和全部分類入口?？傤}量來自去重、歸類后的本地題目集合。已答、正確率、考試和收藏來自本地用戶記錄匯總。推薦題庫是本地產(chǎn)品排序不是云端個性化推薦。支持 phone、tablet、2in1并在不同寬度使用底部或側(cè)邊導(dǎo)航。題庫卡片按實際寬度切換橫向與緊湊結(jié)構(gòu)。不能從首頁源碼直接聲稱有多少真實在線用戶。題庫熱度是實時平臺統(tǒng)計。支持云同步、賬號漫游或 AI 推薦。所有聲明設(shè)備都已經(jīng)完成真機測試。當前工作區(qū)版本已經(jīng)在 AppGallery 公開。技術(shù)文章和上架文案都應(yīng)守住這條事實邊界。十八、總結(jié)中國方言題庫首頁的核心設(shè)計不是視覺裝飾而是把目錄事實、學(xué)習(xí)狀態(tài)和下一步行動壓縮到一屏Index負責(zé)多設(shè)備主導(dǎo)航HomePage負責(zé)信息順序MockBanks負責(zé)真實目錄與題量StatService負責(zé)學(xué)習(xí)匯總BankCard負責(zé)題庫事實與用戶進度的響應(yīng)式呈現(xiàn)。對于 HarmonyOS 5.0 以上的多設(shè)備應(yīng)用這套結(jié)構(gòu)有三個可復(fù)用經(jīng)驗主 Tab 與二級路由分層避免頁面棧混亂。頁面列數(shù)與卡片內(nèi)部布局分別響應(yīng)可用空間。所有統(tǒng)計都從真實本地記錄推導(dǎo)不用靜態(tài)數(shù)字偽造活躍度。首頁不是數(shù)據(jù)倉庫也不是業(yè)務(wù)規(guī)則中心。它應(yīng)當是一張可靠的學(xué)習(xí)儀表盤用戶看到的每個數(shù)字都能解釋每個入口都能到達每種窗口都能繼續(xù)完成核心任務(wù)。---AI 輔助聲明本文由 AI 輔助整理所有技術(shù)結(jié)論基于中國方言題庫當前可讀取的 ArkTS、模塊配置、題庫目錄和組件源碼復(fù)核未運行的真機測試、平臺數(shù)據(jù)和公開發(fā)布狀態(tài)均未寫成已通過。