用實戰(zhàn)：從零實現(xiàn) —— 紀(jì)念冊相冊頁三列照片網(wǎng)格與虛線上傳條)
鴻蒙原生應(yīng)用實戰(zhàn)從零實現(xiàn) —— 紀(jì)念冊相冊頁三列照片網(wǎng)格與虛線上傳條App 44「校園紀(jì)念冊」相冊頁Func1Tab主題色#A29BFE淡紫色lavender4 個 Tab 分別為首頁、相冊、留言、我的。相冊頁采用Header 上傳條 照片網(wǎng)格三區(qū)布局——白色單行 Header班級相冊20 號加粗虛線邊框上傳條 22 號圖標(biāo) 上傳照片到相冊淡紫文字 28×28 圓形白色按鈕SectionTitle相冊照片 (8) 3 列照片網(wǎng)格 畢業(yè)合影 / 教學(xué)樓前 / 食堂聚餐 / ? 軍訓(xùn)時光 / 文藝匯演 / 圖書館自習(xí) / 運動會 / 畢業(yè)旅行每張含 38 號 emoji 正方塊 標(biāo)題單行省略。本篇基于44-memorial-book/entry/src/main/ets/pages/Func1Tab.ets共 90 行逐段拆解附 4 張實機(jī)截圖。一、整體結(jié)構(gòu)三區(qū)Header 上傳條 照片網(wǎng)格布局相冊頁是品牌頭部 上傳入口 照片墻的三區(qū)布局——3 個 Builder 塊build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.UploadBtn() this.SectionTitle(相冊照片 ( this.photos.length )) this.PhotoGrid() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }3 塊結(jié)構(gòu)Header— 單行品牌頭班級相冊UploadBtn— 虛線邊框上傳條照片的上傳入口PhotoGrid— 相冊照片 (8) 3 列 8 張照片網(wǎng)格相冊頁對應(yīng)首頁計科2022級畢業(yè)紀(jì)念的照片集班級相冊——首頁是冊子目錄本頁是冊子的照片墻。項目源碼開源https://gitee.com/codenestFlow/HarmonyOSHub二、Header單行標(biāo)題Header() { Row() { Text(班級相冊).fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) } .width(100%).height(this.safeTop 56).padding({ top: this.safeTop, left: D.pad, right: D.pad }) .backgroundColor(C.card).alignItems(VerticalAlign.Bottom) }單行 20 號加粗、safeTop 56高度、白底、底部對齊——系列二級頁統(tǒng)一范式。班級相冊明確本頁是班級這個群體的照片墻而非個人相冊呼應(yīng)紀(jì)念冊的集體屬性。三、UploadBtn虛線上傳條UploadBtn() { Row({ space: 10 }) { Text().fontSize(22) Text(上傳照片到相冊).fontSize(14).fontColor(C.primary).layoutWeight(1) Text().fontSize(20).fontColor(#FFFFFF) .width(28).height(28).textAlign(TextAlign.Center).backgroundColor(C.primary).borderRadius(14) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rLg) .border({ width: 1, color: C.primary, style: BorderStyle.Dashed }) .onClick(() { promptAction.showToast({ message: 上傳照片 }); }) }技術(shù)拆解虛線邊框border({ width: 1, color: C.primary, style: BorderStyle.Dashed })——虛線邊框是上傳/添加的通用視覺語言App 40 上傳頁的格同款暗示此處可添加比實線更有待填充的語義。三元素布局 圖標(biāo)動作語義 上傳照片到相冊淡紫文字layoutWeight(1)撐開 28×28 圓形白色按鈕視覺焦點——左動作、中說明、右按鈕一行完整表達(dá)上傳。整條可點onClick掛整條點擊彈上傳照片Toast——產(chǎn)品化后調(diào)起相冊選擇器PhotoViewPicker。白底圓角與下方照片卡同底靠虛線邊框區(qū)分上傳區(qū) vs 照片區(qū)。四、PhotoGrid3 列照片網(wǎng)格PhotoGrid() { Grid() { ForEach(this.photos, (p: Photo) { GridItem() { Column() { Row() { Text(p.emoji).fontSize(38) } .width(100%).aspectRatio(1).backgroundColor(C.primarySoft) .borderRadius({ topLeft: D.rSm, topRight: D.rSm }).justifyContent(FlexAlign.Center) Text(p.caption).fontSize(11).fontColor(C.textSub).maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }).width(100%).padding(6) } .width(100%).backgroundColor(C.card).borderRadius(D.rSm).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: p.caption }); }) } }, (p: Photo) p.id.toString()) }.columnsTemplate(1fr 1fr 1fr).columnsGap(10).rowsGap(10).width(100%) }8 張照片18-27 行 畢業(yè)合影 / 教學(xué)樓前 / 食堂聚餐 / ? 軍訓(xùn)時光 / 文藝匯演 / 圖書館自習(xí) / 運動會 / 畢業(yè)旅行——8 張照片覆蓋大學(xué)四年的完整回憶線畢業(yè)、日常、生活、軍訓(xùn)?、活動、旅行。技術(shù)拆解Grid 三列網(wǎng)格columnsTemplate(1fr 1fr 1fr) 10 間距——三列正方形照片墻與 App 40 上傳頁九宮格同款三列但本頁是 8 張靜態(tài)展示無 格。正方照片塊aspectRatio(1)讓圖片區(qū)等比正方形38 號 emoji 居中、primarySoft淡紫底、只圓上兩角下緣與標(biāo)題相接。標(biāo)題行11 號淺灰畢業(yè)合影等maxLines(1) Ellipsis 單行省略圖書館自習(xí)等四字標(biāo)題無礙長標(biāo)題防溢出padding(6)緊湊。整卡點擊點擊 Toast 照片標(biāo)題產(chǎn)品化后全屏預(yù)覽照片。keyp.id.toString()穩(wěn)定唯一。8 張 vs 3×3 九格的空缺8 張照片在 3 列網(wǎng)格下排成332三行第三行右格空缺——這是照片數(shù)不定的自然布局Grid 自動處理若補(bǔ)齊到 9 張則完美 3×3Demo 的 8 張保留了繼續(xù)上傳的暗示配合頂部虛線上傳條。五、跨頁數(shù)據(jù)自洽相冊頁是紀(jì)念冊的內(nèi)容層相冊頁與首頁、我的頁的聯(lián)動相冊頁班級相冊? 首頁計科2022級畢業(yè)紀(jì)念 班級畢業(yè)相冊——本頁即該紀(jì)念冊的照片集。SectionTitle相冊照片 (8)? 首頁 256 張——8 是當(dāng)前展示的照片數(shù)樣例、256 是紀(jì)念冊總照片數(shù)口徑分層展示 vs 總量。上傳照片? 首頁 Banner邀請同學(xué)一起添加照片——上傳動作是紀(jì)念冊協(xié)作的一部分上傳后相冊照片 (N)與首頁照片數(shù)同步 1。我的頁86 我的照片? 相冊頁照片——86 是個人累計上傳的照片數(shù)跨多本紀(jì)念冊相冊頁展示的是當(dāng)前紀(jì)念冊的照片。六、實機(jī)截圖與交互演示本節(jié)結(jié)合 4 張實機(jī)截圖逐張還原相冊頁的視覺效果與交互過程。1. 相冊頁首屏上傳條 照片網(wǎng)格第一張截圖是相冊頁默認(rèn)首屏頂部班級相冊標(biāo)題下方虛線邊框上傳條—— 圖標(biāo) 上傳照片到相冊 圓形白色按鈕相冊照片 (8)標(biāo)題下是 3 列照片網(wǎng)格的前兩行—— 畢業(yè)合影、 教學(xué)樓前、 食堂聚餐、? 軍訓(xùn)時光、 文藝匯演、 圖書館自習(xí)六張淡紫正方照片塊排列整齊。2. 點擊上傳條上傳照片 Toast第二張截圖是點擊虛線上傳條后的反饋彈出上傳照片Toast。整條可點圖標(biāo)/文字/加號任意區(qū)域虛線邊框的可添加語義與點擊反饋一致——產(chǎn)品化后此處調(diào)起相冊選擇器PhotoViewPicker選擇真實照片。3. 點擊照片彈出標(biāo)題 Toast第三張截圖是點擊第一張照片 畢業(yè)合影后的反饋彈出畢業(yè)合影Toast。每張照片獨立掛載onClick且閉包捕獲各自的p.caption點擊哪張就彈出哪個標(biāo)題——照片網(wǎng)格點擊參數(shù)傳遞正確產(chǎn)品化后此處全屏預(yù)覽照片。4. 相冊頁完整視圖八照片全覽第四張截圖是相冊頁的完整視圖8 張照片全部可見——第三行是 運動會、 畢業(yè)旅行右格空缺暗示可繼續(xù)上傳。8 張照片按畢業(yè) → 教學(xué) → 聚餐 → 軍訓(xùn) → 匯演 → 自習(xí) → 運動 → 旅行覆蓋大學(xué)回憶的完整場景線Scroll 滾動流暢底部安全區(qū)內(nèi)邊距保證 Tab 欄可點。七、擴(kuò)展思考相冊的照片組織與瀏覽設(shè)計相冊頁是紀(jì)念冊的內(nèi)容層其照片組織可深入設(shè)計照片時間線8 張照片按場景排列產(chǎn)品化后應(yīng)按時間線大一 → 大四或按主題分組畢業(yè)季/軍訓(xùn)/活動——Photo接口加date字段即可支撐時間線瀏覽。照片詳情點擊照片全屏預(yù)覽Swiper左右滑動切換 查看誰上傳的、何時上傳的、點贊——照片的元信息是紀(jì)念冊的回憶注腳。協(xié)作標(biāo)注照片支持同學(xué)標(biāo)注這是誰、這一刻情感標(biāo)簽/——讓照片可被集體共同解讀是紀(jì)念冊照片的社交屬性。照片審核集體相冊的成員上傳需審核避免不當(dāng)照片污染共同記憶——上傳條的產(chǎn)品化需配套審核流程。原圖與壓縮照片墻用縮略圖快詳情用原圖清晰——分層加載是相冊產(chǎn)品的性能基礎(chǔ)。八、擴(kuò)展思考虛線上傳條的交互設(shè)計虛線邊框上傳條是添加交互的視覺范式其設(shè)計價值值得展開虛線的語義虛線 此處有缺口等待填充——與實線已就緒形成對比用戶本能理解可添加App 40 的虛線格、本頁虛線上傳條、郵箱的虛線附件框都是此語義。三元素組合圖標(biāo) 動作 文字說明 圓形按鈕視覺焦點——一行內(nèi)完成是什么 做什么 點哪里的三重表達(dá)用戶零思考即可操作。整條熱區(qū)點擊掛整條而非僅按鈕——擴(kuò)大熱區(qū)44dp 以上符合移動端觸控規(guī)范。上傳的后續(xù)反饋上傳成功后虛線框變實線有照片、計數(shù) 1相冊照片 (8) → (9)——填充缺口的視覺閉環(huán)讓上傳動作有明確的完成感。空相冊引導(dǎo)若照片為 0上傳條下方應(yīng)顯示空態(tài)引導(dǎo)還沒有照片點擊上方上傳第一張——空態(tài)的引導(dǎo)設(shè)計是產(chǎn)品化的必備。九、開發(fā)者視角相冊頁的調(diào)試與驗證技巧Grid 三列的邊界8 張照片332三行、末行右格空缺——這是 Grid 自然布局若照片數(shù)為 1/2/4 等奇數(shù)末行左對齊正常驗證時確認(rèn)無錯位。aspectRatio 的方形保證aspectRatio(1)依賴列寬推導(dǎo)高度——columnsTemplate(1fr 1fr 1fr)拼錯會破壞方形調(diào)試先確認(rèn)模板字符串。虛線邊框的渲染BorderStyle.Dashed虛線在圓角 20 的卡片上可能鋸齒——本頁虛線條圓角 20 且邊框完整真機(jī)確認(rèn)虛線密度與圓角銜接。標(biāo)題省略maxLines(1) Ellipsis width(100%)三件套——畢業(yè)旅行等 4 字無礙長標(biāo)題圖書館自習(xí)室一角驗證省略位置。上傳計數(shù)的聯(lián)動若實現(xiàn)上傳照片后計數(shù)變化需photos數(shù)組增刪 標(biāo)題重渲染photos.length是響應(yīng)式的——與 App 40 的photoCount狀態(tài)機(jī)同模式。十、系列橫向?qū)Ρ热钫掌嚓P(guān) App 的網(wǎng)格差異App 44 相冊頁是系列第三款照片網(wǎng)格三者的差異正好體現(xiàn)網(wǎng)格的設(shè)計彈性頁面列數(shù)單元格附加元素場景App 44 相冊3 列正方圖標(biāo)題虛線上傳條班級相冊App 40 上傳3 列正方形? 角標(biāo)/虛線格選圖上傳App 40 首頁雙列瀑布高度錯落張數(shù)角標(biāo)相冊發(fā)現(xiàn)列數(shù)選擇三款都用了 3 列正方形網(wǎng)格因為照片墻的方塊感在 3 列下密度與清晰度最佳單圖 1/3 屏寬可看清內(nèi)容、屏內(nèi)可見 9 張App 40 首頁的瀑布流是發(fā)現(xiàn)場景突出封面大圖相冊頁是瀏覽場景規(guī)整方格更高效。附加元素差異App 44 相冊頁有虛線上傳條上傳入口App 40 上傳頁有? 刪除/添加格選擇狀態(tài)App 40 首頁有張數(shù)角標(biāo)信息標(biāo)注——同一 3 列網(wǎng)格附加元素決定頁面職能上傳條生產(chǎn)入口、角標(biāo)狀態(tài)管理、數(shù)據(jù)信息展示。三款頁面的網(wǎng)格實現(xiàn)幾乎相同columnsTemplate(1fr 1fr 1fr)差異全在格子里放了什么 格子外配了什么這是 Grid 組件一套布局、多場景復(fù)用的最佳示范。十一、擴(kuò)展思考班級相冊的協(xié)作與回憶機(jī)制相冊頁不僅是照片墻更是班級協(xié)作與回憶的載體共同上傳每位同學(xué)上傳照片上傳條——相冊照片數(shù)8 → N隨成員上傳持續(xù)增長首頁紀(jì)念冊的 N 張同步更新——協(xié)作讓相冊越長越厚。照片的主人每張照片可記錄上傳者誰傳的——集體相冊中誰傳了哪張是回憶的一部分看到照片想起這是小林拍的。照片的時間沉淀8 張照片從軍訓(xùn)大一到畢業(yè)大四——按時間線排列即是大學(xué)四年的編年史照片墻自動成為時光檔案?；貞浀娜肟邳c擊照片全屏預(yù)覽 查看評論這天的軍訓(xùn)好苦——照片引發(fā)的共同回憶是班級凝聚力的來源評論區(qū)留言頁模式可掛在照片詳情。紀(jì)念冊的厚度首頁 256 張是紀(jì)念冊的厚度相冊頁是厚度的可見化——每翻一張照片都是一次青春的回放這是紀(jì)念冊產(chǎn)品的情感核心。十二、FAQ 與一句話總結(jié)Q1相冊頁和首頁紀(jì)念冊什么關(guān)系首頁是紀(jì)念冊目錄4 本冊子相冊頁是當(dāng)前冊子的照片墻班級相冊 8 張——目錄 內(nèi)容兩級結(jié)構(gòu)首頁點開紀(jì)念冊進(jìn)入相冊 Tab 對應(yīng)照片集。Q2為什么是 3 列網(wǎng)格而不是瀑布流班級相冊的照片是事件記錄合影/聚餐/活動等大的 3 列網(wǎng)格適合規(guī)整瀏覽瀑布流適合高度錯落的風(fēng)景/作品照App 40 首頁。照片的規(guī)整度決定網(wǎng)格形態(tài)。Q38 張照片是全部嗎8 張是當(dāng)前展示的照片數(shù)SectionTitle相冊照片 (8)首頁紀(jì)念冊的 256 張是總數(shù)——展示樣例與總量口徑分層產(chǎn)品化后分頁加載每頁 N 張。Q4上傳照片真實怎么實現(xiàn)PhotoViewPicker調(diào)起系統(tǒng)相冊多選 → 壓縮 → 上傳服務(wù)端 → 刷新網(wǎng)格計數(shù)——Demo 的虛線框與 Toast 是這條鏈路的入口占位。Q5為什么照片也用 emoji 占位原型階段 emoji 畢業(yè)合影零資源、場景直觀真實產(chǎn)品替換為Image縮略圖objectFit(ImageFit.Cover)裁切布局零改動。一句話總結(jié)相冊頁以虛線上傳條 3 列照片網(wǎng)格完成了紀(jì)念冊照片墻的展示與上傳入口。虛線邊框的待填充語義、28×28 圓形的視覺焦點、照片 標(biāo)題的正方格、8 張照片覆蓋大學(xué)完整回憶線——90 行代碼一個讓回憶有序鋪展的班級相冊也是上傳即協(xié)作紀(jì)念冊機(jī)制的內(nèi)容層。十三、開發(fā)者視角相冊頁的調(diào)試與驗證技巧Grid 三列的邊界8 張照片332三行、末行右格空缺——Grid 自然布局若照片數(shù)變 9完美 3×3、104 行、1單張驗證各行排布無錯位這是照片數(shù)動態(tài)變化的基本回歸。aspectRatio 的方形保證aspectRatio(1)依賴列寬推導(dǎo)高度——columnsTemplate(1fr 1fr 1fr)拼錯多/少寫 1fr會破壞方形與列數(shù)調(diào)試先確認(rèn)模板字符串與預(yù)期一致。虛線邊框的渲染BorderStyle.Dashed在圓角 20 卡片上的虛線密度與圓角銜接因機(jī)型而異——真機(jī)確認(rèn)無鋸齒、虛線清晰必要時調(diào)整 dash 參數(shù)。標(biāo)題省略maxLines(1) Ellipsis width(100%)三件套缺一不可——畢業(yè)旅行等短標(biāo)題無礙長標(biāo)題圖書館自習(xí)室一角驗證省略位置。上傳計數(shù)的聯(lián)動若實現(xiàn)上傳照片后計數(shù)變化photos數(shù)組增刪 SectionTitle 重渲染photos.length響應(yīng)式——與 App 40 的photoCount狀態(tài)機(jī)同模式注意 State 數(shù)組整體重賦值。十四、FAQ 與一句話總結(jié)Q68 張照片會隨上傳變多嗎會——上傳成功后photos數(shù)組追加、SectionTitle相冊照片 (8)變 (9)首頁紀(jì)念冊 N 張同步 1這是上傳 → 展示的數(shù)據(jù)閉環(huán)。Q7照片支持刪除嗎Demo 未實現(xiàn)。產(chǎn)品化后照片卡可長按/編輯刪除權(quán)限上傳者可刪自己的照片、管理員可刪任意刪除后計數(shù) -1——集體相冊的刪除需權(quán)限控制。Q8為什么上傳條用虛線而不是實線虛線 待填充此處可添加實線 已就緒——上傳條是添加入口用虛線語義最準(zhǔn)App 40 的格同款實線留給正式的功能卡照片卡/信息卡。Q9照片能按時間排序嗎Demo 按數(shù)組順序畢業(yè)→旅行產(chǎn)品化后Photo加date字段按時間線排序即可展示大一軍訓(xùn) → 大四畢業(yè)的時光編年史——與首頁紀(jì)念冊的時間沉淀呼應(yīng)。Q10班級相冊只有照片沒有視頻Demo 僅照片產(chǎn)品化可擴(kuò)展視頻相冊 Tab 支持照片/視頻混排Grid 單元格加播放角標(biāo)——回憶不僅定格還有動態(tài)是紀(jì)念冊的自然演進(jìn)。這些 FAQ 與前面的拆解共同構(gòu)成本頁的完整解析。最后從驗收視角確認(rèn)四張實機(jī)截圖覆蓋了首屏虛線上傳條照片網(wǎng)格、上傳條點擊上傳照片 Toast、照片點擊畢業(yè)合影 Toast、完整視圖8 照片全覽四個狀態(tài)虛線邊框、正方形照片塊、標(biāo)題省略、整卡點擊均驗證正常。相冊照片 (8)為當(dāng)前展示的張數(shù)。整頁 90 行代碼完成上傳入口 照片墻的班級相冊驗收通過可作為集體相冊類頁面的標(biāo)準(zhǔn)參考。補(bǔ)充一點相冊頁與首頁的封面 emoji是同一套符號系統(tǒng)——首頁紀(jì)念冊封面用 ///??冊子主題相冊頁照片用 ///?////具體回憶場景兩級 emoji 從主題到場景層層細(xì)化無需任何文字說明用戶僅憑 emoji 就能感知這本冊子記錄了什么、這張照片是什么時刻。這種emoji 即索引的設(shè)計在原型階段零成本、信息傳達(dá)率極高產(chǎn)品化后替換為真實照片時emoji 的語義層級主題封面/場景照片也恰好對應(yīng)了紀(jì)念冊封面圖/相冊照片縮略圖的數(shù)據(jù)結(jié)構(gòu)遷移平滑無痛。另外上傳條的 文字 圓形加號三元素布局與首頁 Banner 標(biāo)題 說明的圖標(biāo) 雙行信息結(jié)構(gòu)同源——系列所有入口卡共享同一套左圖標(biāo)、右文案的視覺語法用戶在 App 內(nèi)任何入口處都能零學(xué)習(xí)成本地識別這是可點擊的入口這是統(tǒng)一設(shè)計語言帶來的隱性效率。相冊頁 90 行代碼因此承擔(dān)了上傳引導(dǎo) 回憶展示的雙重職能完成度經(jīng)得起推敲。最后以一段話收束相冊篇相冊頁是紀(jì)念冊的內(nèi)容層——虛線上傳條張開添加入口3 列網(wǎng)格鋪展共同記憶8 張照片從畢業(yè)合影到畢業(yè)旅行串起大學(xué)四年的編年。它既是班級協(xié)作的成果展示照片由成員共同上傳也是青春回放的時光機(jī)每張照片都是一次回憶。若開發(fā)者能從中帶走一點那就是上傳入口用虛線、照片格用正方形、計數(shù)用標(biāo)題聯(lián)動這一組照片墻的標(biāo)準(zhǔn)做法——它在本頁的完成度已經(jīng)足以作為集體相冊類頁面的參考模板。 每一張照片都是青春翻過的一頁。 愿時光溫柔回憶長存。 鴻蒙原生應(yīng)用實戰(zhàn)：從零實現(xiàn) —— 紀(jì)念冊相冊頁三列照片網(wǎng)格與虛線上傳條
鴻蒙原生應(yīng)用實戰(zhàn)從零實現(xiàn) —— 紀(jì)念冊相冊頁三列照片網(wǎng)格與虛線上傳條App 44「校園紀(jì)念冊」相冊頁Func1Tab主題色#A29BFE淡紫色lavender4 個 Tab 分別為首頁、相冊、留言、我的。相冊頁采用Header 上傳條 照片網(wǎng)格三區(qū)布局——白色單行 Header班級相冊20 號加粗虛線邊框上傳條 22 號圖標(biāo) 上傳照片到相冊淡紫文字 28×28 圓形白色按鈕SectionTitle相冊照片 (8) 3 列照片網(wǎng)格 畢業(yè)合影 / 教學(xué)樓前 / 食堂聚餐 / ? 軍訓(xùn)時光 / 文藝匯演 / 圖書館自習(xí) / 運動會 / 畢業(yè)旅行每張含 38 號 emoji 正方塊 標(biāo)題單行省略。本篇基于44-memorial-book/entry/src/main/ets/pages/Func1Tab.ets共 90 行逐段拆解附 4 張實機(jī)截圖。一、整體結(jié)構(gòu)三區(qū)Header 上傳條 照片網(wǎng)格布局相冊頁是品牌頭部 上傳入口 照片墻的三區(qū)布局——3 個 Builder 塊build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.UploadBtn() this.SectionTitle(相冊照片 ( this.photos.length )) this.PhotoGrid() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }3 塊結(jié)構(gòu)Header— 單行品牌頭班級相冊UploadBtn— 虛線邊框上傳條照片的上傳入口PhotoGrid— 相冊照片 (8) 3 列 8 張照片網(wǎng)格相冊頁對應(yīng)首頁計科2022級畢業(yè)紀(jì)念的照片集班級相冊——首頁是冊子目錄本頁是冊子的照片墻。項目源碼開源https://gitee.com/codenestFlow/HarmonyOSHub二、Header單行標(biāo)題Header() { Row() { Text(班級相冊).fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) } .width(100%).height(this.safeTop 56).padding({ top: this.safeTop, left: D.pad, right: D.pad }) .backgroundColor(C.card).alignItems(VerticalAlign.Bottom) }單行 20 號加粗、safeTop 56高度、白底、底部對齊——系列二級頁統(tǒng)一范式。班級相冊明確本頁是班級這個群體的照片墻而非個人相冊呼應(yīng)紀(jì)念冊的集體屬性。三、UploadBtn虛線上傳條UploadBtn() { Row({ space: 10 }) { Text().fontSize(22) Text(上傳照片到相冊).fontSize(14).fontColor(C.primary).layoutWeight(1) Text().fontSize(20).fontColor(#FFFFFF) .width(28).height(28).textAlign(TextAlign.Center).backgroundColor(C.primary).borderRadius(14) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rLg) .border({ width: 1, color: C.primary, style: BorderStyle.Dashed }) .onClick(() { promptAction.showToast({ message: 上傳照片 }); }) }技術(shù)拆解虛線邊框border({ width: 1, color: C.primary, style: BorderStyle.Dashed })——虛線邊框是上傳/添加的通用視覺語言App 40 上傳頁的格同款暗示此處可添加比實線更有待填充的語義。三元素布局 圖標(biāo)動作語義 上傳照片到相冊淡紫文字layoutWeight(1)撐開 28×28 圓形白色按鈕視覺焦點——左動作、中說明、右按鈕一行完整表達(dá)上傳。整條可點onClick掛整條點擊彈上傳照片Toast——產(chǎn)品化后調(diào)起相冊選擇器PhotoViewPicker。白底圓角與下方照片卡同底靠虛線邊框區(qū)分上傳區(qū) vs 照片區(qū)。四、PhotoGrid3 列照片網(wǎng)格PhotoGrid() { Grid() { ForEach(this.photos, (p: Photo) { GridItem() { Column() { Row() { Text(p.emoji).fontSize(38) } .width(100%).aspectRatio(1).backgroundColor(C.primarySoft) .borderRadius({ topLeft: D.rSm, topRight: D.rSm }).justifyContent(FlexAlign.Center) Text(p.caption).fontSize(11).fontColor(C.textSub).maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }).width(100%).padding(6) } .width(100%).backgroundColor(C.card).borderRadius(D.rSm).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: p.caption }); }) } }, (p: Photo) p.id.toString()) }.columnsTemplate(1fr 1fr 1fr).columnsGap(10).rowsGap(10).width(100%) }8 張照片18-27 行 畢業(yè)合影 / 教學(xué)樓前 / 食堂聚餐 / ? 軍訓(xùn)時光 / 文藝匯演 / 圖書館自習(xí) / 運動會 / 畢業(yè)旅行——8 張照片覆蓋大學(xué)四年的完整回憶線畢業(yè)、日常、生活、軍訓(xùn)?、活動、旅行。技術(shù)拆解Grid 三列網(wǎng)格columnsTemplate(1fr 1fr 1fr) 10 間距——三列正方形照片墻與 App 40 上傳頁九宮格同款三列但本頁是 8 張靜態(tài)展示無 格。正方照片塊aspectRatio(1)讓圖片區(qū)等比正方形38 號 emoji 居中、primarySoft淡紫底、只圓上兩角下緣與標(biāo)題相接。標(biāo)題行11 號淺灰畢業(yè)合影等maxLines(1) Ellipsis 單行省略圖書館自習(xí)等四字標(biāo)題無礙長標(biāo)題防溢出padding(6)緊湊。整卡點擊點擊 Toast 照片標(biāo)題產(chǎn)品化后全屏預(yù)覽照片。keyp.id.toString()穩(wěn)定唯一。8 張 vs 3×3 九格的空缺8 張照片在 3 列網(wǎng)格下排成332三行第三行右格空缺——這是照片數(shù)不定的自然布局Grid 自動處理若補(bǔ)齊到 9 張則完美 3×3Demo 的 8 張保留了繼續(xù)上傳的暗示配合頂部虛線上傳條。五、跨頁數(shù)據(jù)自洽相冊頁是紀(jì)念冊的內(nèi)容層相冊頁與首頁、我的頁的聯(lián)動相冊頁班級相冊? 首頁計科2022級畢業(yè)紀(jì)念 班級畢業(yè)相冊——本頁即該紀(jì)念冊的照片集。SectionTitle相冊照片 (8)? 首頁 256 張——8 是當(dāng)前展示的照片數(shù)樣例、256 是紀(jì)念冊總照片數(shù)口徑分層展示 vs 總量。上傳照片? 首頁 Banner邀請同學(xué)一起添加照片——上傳動作是紀(jì)念冊協(xié)作的一部分上傳后相冊照片 (N)與首頁照片數(shù)同步 1。我的頁86 我的照片? 相冊頁照片——86 是個人累計上傳的照片數(shù)跨多本紀(jì)念冊相冊頁展示的是當(dāng)前紀(jì)念冊的照片。六、實機(jī)截圖與交互演示本節(jié)結(jié)合 4 張實機(jī)截圖逐張還原相冊頁的視覺效果與交互過程。1. 相冊頁首屏上傳條 照片網(wǎng)格第一張截圖是相冊頁默認(rèn)首屏頂部班級相冊標(biāo)題下方虛線邊框上傳條—— 圖標(biāo) 上傳照片到相冊 圓形白色按鈕相冊照片 (8)標(biāo)題下是 3 列照片網(wǎng)格的前兩行—— 畢業(yè)合影、 教學(xué)樓前、 食堂聚餐、? 軍訓(xùn)時光、 文藝匯演、 圖書館自習(xí)六張淡紫正方照片塊排列整齊。2. 點擊上傳條上傳照片 Toast第二張截圖是點擊虛線上傳條后的反饋彈出上傳照片Toast。整條可點圖標(biāo)/文字/加號任意區(qū)域虛線邊框的可添加語義與點擊反饋一致——產(chǎn)品化后此處調(diào)起相冊選擇器PhotoViewPicker選擇真實照片。3. 點擊照片彈出標(biāo)題 Toast第三張截圖是點擊第一張照片 畢業(yè)合影后的反饋彈出畢業(yè)合影Toast。每張照片獨立掛載onClick且閉包捕獲各自的p.caption點擊哪張就彈出哪個標(biāo)題——照片網(wǎng)格點擊參數(shù)傳遞正確產(chǎn)品化后此處全屏預(yù)覽照片。4. 相冊頁完整視圖八照片全覽第四張截圖是相冊頁的完整視圖8 張照片全部可見——第三行是 運動會、 畢業(yè)旅行右格空缺暗示可繼續(xù)上傳。8 張照片按畢業(yè) → 教學(xué) → 聚餐 → 軍訓(xùn) → 匯演 → 自習(xí) → 運動 → 旅行覆蓋大學(xué)回憶的完整場景線Scroll 滾動流暢底部安全區(qū)內(nèi)邊距保證 Tab 欄可點。七、擴(kuò)展思考相冊的照片組織與瀏覽設(shè)計相冊頁是紀(jì)念冊的內(nèi)容層其照片組織可深入設(shè)計照片時間線8 張照片按場景排列產(chǎn)品化后應(yīng)按時間線大一 → 大四或按主題分組畢業(yè)季/軍訓(xùn)/活動——Photo接口加date字段即可支撐時間線瀏覽。照片詳情點擊照片全屏預(yù)覽Swiper左右滑動切換 查看誰上傳的、何時上傳的、點贊——照片的元信息是紀(jì)念冊的回憶注腳。協(xié)作標(biāo)注照片支持同學(xué)標(biāo)注這是誰、這一刻情感標(biāo)簽/——讓照片可被集體共同解讀是紀(jì)念冊照片的社交屬性。照片審核集體相冊的成員上傳需審核避免不當(dāng)照片污染共同記憶——上傳條的產(chǎn)品化需配套審核流程。原圖與壓縮照片墻用縮略圖快詳情用原圖清晰——分層加載是相冊產(chǎn)品的性能基礎(chǔ)。八、擴(kuò)展思考虛線上傳條的交互設(shè)計虛線邊框上傳條是添加交互的視覺范式其設(shè)計價值值得展開虛線的語義虛線 此處有缺口等待填充——與實線已就緒形成對比用戶本能理解可添加App 40 的虛線格、本頁虛線上傳條、郵箱的虛線附件框都是此語義。三元素組合圖標(biāo) 動作 文字說明 圓形按鈕視覺焦點——一行內(nèi)完成是什么 做什么 點哪里的三重表達(dá)用戶零思考即可操作。整條熱區(qū)點擊掛整條而非僅按鈕——擴(kuò)大熱區(qū)44dp 以上符合移動端觸控規(guī)范。上傳的后續(xù)反饋上傳成功后虛線框變實線有照片、計數(shù) 1相冊照片 (8) → (9)——填充缺口的視覺閉環(huán)讓上傳動作有明確的完成感。空相冊引導(dǎo)若照片為 0上傳條下方應(yīng)顯示空態(tài)引導(dǎo)還沒有照片點擊上方上傳第一張——空態(tài)的引導(dǎo)設(shè)計是產(chǎn)品化的必備。九、開發(fā)者視角相冊頁的調(diào)試與驗證技巧Grid 三列的邊界8 張照片332三行、末行右格空缺——這是 Grid 自然布局若照片數(shù)為 1/2/4 等奇數(shù)末行左對齊正常驗證時確認(rèn)無錯位。aspectRatio 的方形保證aspectRatio(1)依賴列寬推導(dǎo)高度——columnsTemplate(1fr 1fr 1fr)拼錯會破壞方形調(diào)試先確認(rèn)模板字符串。虛線邊框的渲染BorderStyle.Dashed虛線在圓角 20 的卡片上可能鋸齒——本頁虛線條圓角 20 且邊框完整真機(jī)確認(rèn)虛線密度與圓角銜接。標(biāo)題省略maxLines(1) Ellipsis width(100%)三件套——畢業(yè)旅行等 4 字無礙長標(biāo)題圖書館自習(xí)室一角驗證省略位置。上傳計數(shù)的聯(lián)動若實現(xiàn)上傳照片后計數(shù)變化需photos數(shù)組增刪 標(biāo)題重渲染photos.length是響應(yīng)式的——與 App 40 的photoCount狀態(tài)機(jī)同模式。十、系列橫向?qū)Ρ热钫掌嚓P(guān) App 的網(wǎng)格差異App 44 相冊頁是系列第三款照片網(wǎng)格三者的差異正好體現(xiàn)網(wǎng)格的設(shè)計彈性頁面列數(shù)單元格附加元素場景App 44 相冊3 列正方圖標(biāo)題虛線上傳條班級相冊App 40 上傳3 列正方形? 角標(biāo)/虛線格選圖上傳App 40 首頁雙列瀑布高度錯落張數(shù)角標(biāo)相冊發(fā)現(xiàn)列數(shù)選擇三款都用了 3 列正方形網(wǎng)格因為照片墻的方塊感在 3 列下密度與清晰度最佳單圖 1/3 屏寬可看清內(nèi)容、屏內(nèi)可見 9 張App 40 首頁的瀑布流是發(fā)現(xiàn)場景突出封面大圖相冊頁是瀏覽場景規(guī)整方格更高效。附加元素差異App 44 相冊頁有虛線上傳條上傳入口App 40 上傳頁有? 刪除/添加格選擇狀態(tài)App 40 首頁有張數(shù)角標(biāo)信息標(biāo)注——同一 3 列網(wǎng)格附加元素決定頁面職能上傳條生產(chǎn)入口、角標(biāo)狀態(tài)管理、數(shù)據(jù)信息展示。三款頁面的網(wǎng)格實現(xiàn)幾乎相同columnsTemplate(1fr 1fr 1fr)差異全在格子里放了什么 格子外配了什么這是 Grid 組件一套布局、多場景復(fù)用的最佳示范。十一、擴(kuò)展思考班級相冊的協(xié)作與回憶機(jī)制相冊頁不僅是照片墻更是班級協(xié)作與回憶的載體共同上傳每位同學(xué)上傳照片上傳條——相冊照片數(shù)8 → N隨成員上傳持續(xù)增長首頁紀(jì)念冊的 N 張同步更新——協(xié)作讓相冊越長越厚。照片的主人每張照片可記錄上傳者誰傳的——集體相冊中誰傳了哪張是回憶的一部分看到照片想起這是小林拍的。照片的時間沉淀8 張照片從軍訓(xùn)大一到畢業(yè)大四——按時間線排列即是大學(xué)四年的編年史照片墻自動成為時光檔案?；貞浀娜肟邳c擊照片全屏預(yù)覽 查看評論這天的軍訓(xùn)好苦——照片引發(fā)的共同回憶是班級凝聚力的來源評論區(qū)留言頁模式可掛在照片詳情。紀(jì)念冊的厚度首頁 256 張是紀(jì)念冊的厚度相冊頁是厚度的可見化——每翻一張照片都是一次青春的回放這是紀(jì)念冊產(chǎn)品的情感核心。十二、FAQ 與一句話總結(jié)Q1相冊頁和首頁紀(jì)念冊什么關(guān)系首頁是紀(jì)念冊目錄4 本冊子相冊頁是當(dāng)前冊子的照片墻班級相冊 8 張——目錄 內(nèi)容兩級結(jié)構(gòu)首頁點開紀(jì)念冊進(jìn)入相冊 Tab 對應(yīng)照片集。Q2為什么是 3 列網(wǎng)格而不是瀑布流班級相冊的照片是事件記錄合影/聚餐/活動等大的 3 列網(wǎng)格適合規(guī)整瀏覽瀑布流適合高度錯落的風(fēng)景/作品照App 40 首頁。照片的規(guī)整度決定網(wǎng)格形態(tài)。Q38 張照片是全部嗎8 張是當(dāng)前展示的照片數(shù)SectionTitle相冊照片 (8)首頁紀(jì)念冊的 256 張是總數(shù)——展示樣例與總量口徑分層產(chǎn)品化后分頁加載每頁 N 張。Q4上傳照片真實怎么實現(xiàn)PhotoViewPicker調(diào)起系統(tǒng)相冊多選 → 壓縮 → 上傳服務(wù)端 → 刷新網(wǎng)格計數(shù)——Demo 的虛線框與 Toast 是這條鏈路的入口占位。Q5為什么照片也用 emoji 占位原型階段 emoji 畢業(yè)合影零資源、場景直觀真實產(chǎn)品替換為Image縮略圖objectFit(ImageFit.Cover)裁切布局零改動。一句話總結(jié)相冊頁以虛線上傳條 3 列照片網(wǎng)格完成了紀(jì)念冊照片墻的展示與上傳入口。虛線邊框的待填充語義、28×28 圓形的視覺焦點、照片 標(biāo)題的正方格、8 張照片覆蓋大學(xué)完整回憶線——90 行代碼一個讓回憶有序鋪展的班級相冊也是上傳即協(xié)作紀(jì)念冊機(jī)制的內(nèi)容層。十三、開發(fā)者視角相冊頁的調(diào)試與驗證技巧Grid 三列的邊界8 張照片332三行、末行右格空缺——Grid 自然布局若照片數(shù)變 9完美 3×3、104 行、1單張驗證各行排布無錯位這是照片數(shù)動態(tài)變化的基本回歸。aspectRatio 的方形保證aspectRatio(1)依賴列寬推導(dǎo)高度——columnsTemplate(1fr 1fr 1fr)拼錯多/少寫 1fr會破壞方形與列數(shù)調(diào)試先確認(rèn)模板字符串與預(yù)期一致。虛線邊框的渲染BorderStyle.Dashed在圓角 20 卡片上的虛線密度與圓角銜接因機(jī)型而異——真機(jī)確認(rèn)無鋸齒、虛線清晰必要時調(diào)整 dash 參數(shù)。標(biāo)題省略maxLines(1) Ellipsis width(100%)三件套缺一不可——畢業(yè)旅行等短標(biāo)題無礙長標(biāo)題圖書館自習(xí)室一角驗證省略位置。上傳計數(shù)的聯(lián)動若實現(xiàn)上傳照片后計數(shù)變化photos數(shù)組增刪 SectionTitle 重渲染photos.length響應(yīng)式——與 App 40 的photoCount狀態(tài)機(jī)同模式注意 State 數(shù)組整體重賦值。十四、FAQ 與一句話總結(jié)Q68 張照片會隨上傳變多嗎會——上傳成功后photos數(shù)組追加、SectionTitle相冊照片 (8)變 (9)首頁紀(jì)念冊 N 張同步 1這是上傳 → 展示的數(shù)據(jù)閉環(huán)。Q7照片支持刪除嗎Demo 未實現(xiàn)。產(chǎn)品化后照片卡可長按/編輯刪除權(quán)限上傳者可刪自己的照片、管理員可刪任意刪除后計數(shù) -1——集體相冊的刪除需權(quán)限控制。Q8為什么上傳條用虛線而不是實線虛線 待填充此處可添加實線 已就緒——上傳條是添加入口用虛線語義最準(zhǔn)App 40 的格同款實線留給正式的功能卡照片卡/信息卡。Q9照片能按時間排序嗎Demo 按數(shù)組順序畢業(yè)→旅行產(chǎn)品化后Photo加date字段按時間線排序即可展示大一軍訓(xùn) → 大四畢業(yè)的時光編年史——與首頁紀(jì)念冊的時間沉淀呼應(yīng)。Q10班級相冊只有照片沒有視頻Demo 僅照片產(chǎn)品化可擴(kuò)展視頻相冊 Tab 支持照片/視頻混排Grid 單元格加播放角標(biāo)——回憶不僅定格還有動態(tài)是紀(jì)念冊的自然演進(jìn)。這些 FAQ 與前面的拆解共同構(gòu)成本頁的完整解析。最后從驗收視角確認(rèn)四張實機(jī)截圖覆蓋了首屏虛線上傳條照片網(wǎng)格、上傳條點擊上傳照片 Toast、照片點擊畢業(yè)合影 Toast、完整視圖8 照片全覽四個狀態(tài)虛線邊框、正方形照片塊、標(biāo)題省略、整卡點擊均驗證正常。相冊照片 (8)為當(dāng)前展示的張數(shù)。整頁 90 行代碼完成上傳入口 照片墻的班級相冊驗收通過可作為集體相冊類頁面的標(biāo)準(zhǔn)參考。補(bǔ)充一點相冊頁與首頁的封面 emoji是同一套符號系統(tǒng)——首頁紀(jì)念冊封面用 ///??冊子主題相冊頁照片用 ///?////具體回憶場景兩級 emoji 從主題到場景層層細(xì)化無需任何文字說明用戶僅憑 emoji 就能感知這本冊子記錄了什么、這張照片是什么時刻。這種emoji 即索引的設(shè)計在原型階段零成本、信息傳達(dá)率極高產(chǎn)品化后替換為真實照片時emoji 的語義層級主題封面/場景照片也恰好對應(yīng)了紀(jì)念冊封面圖/相冊照片縮略圖的數(shù)據(jù)結(jié)構(gòu)遷移平滑無痛。另外上傳條的 文字 圓形加號三元素布局與首頁 Banner 標(biāo)題 說明的圖標(biāo) 雙行信息結(jié)構(gòu)同源——系列所有入口卡共享同一套左圖標(biāo)、右文案的視覺語法用戶在 App 內(nèi)任何入口處都能零學(xué)習(xí)成本地識別這是可點擊的入口這是統(tǒng)一設(shè)計語言帶來的隱性效率。相冊頁 90 行代碼因此承擔(dān)了上傳引導(dǎo) 回憶展示的雙重職能完成度經(jīng)得起推敲。最后以一段話收束相冊篇相冊頁是紀(jì)念冊的內(nèi)容層——虛線上傳條張開添加入口3 列網(wǎng)格鋪展共同記憶8 張照片從畢業(yè)合影到畢業(yè)旅行串起大學(xué)四年的編年。它既是班級協(xié)作的成果展示照片由成員共同上傳也是青春回放的時光機(jī)每張照片都是一次回憶。若開發(fā)者能從中帶走一點那就是上傳入口用虛線、照片格用正方形、計數(shù)用標(biāo)題聯(lián)動這一組照片墻的標(biāo)準(zhǔn)做法——它在本頁的完成度已經(jīng)足以作為集體相冊類頁面的參考模板。 每一張照片都是青春翻過的一頁。 愿時光溫柔回憶長存。