項目3 樂購圈應(yīng)用

項目3樂購圈應(yīng)用目錄1項目描述2學習目標3知識圖譜4技術(shù)準備5項目實施6項目小結(jié)7AI賦能1項目描述

創(chuàng)建一個樂購圈應(yīng)用，主要包含3個核心界面，登錄界面：提供賬號密碼登錄、忘記密碼和第三方登錄（微信、QQ、微博）選項。主界面：展示輪播商品和好物推薦。我的界面：顯示用戶賬號信息，提供我的訂單、我的資訊、關(guān)注的人、好物收藏、我的優(yōu)惠券和關(guān)于我們等設(shè)置選項。應(yīng)用運行效果如圖3-1、圖3-2、圖3-3所示。圖3-1登錄效果圖圖3-3我的界面效果圖圖3-2首頁界面效果圖2學習目標知識目標1.熟悉ArkUI基礎(chǔ)組件的類型和使用方法2.掌握容器組件的布局方式3.理解路由的基本原理技能目標1.能夠使用基礎(chǔ)組件構(gòu)建簡單界面2.能夠靈活使用容器組件進行布局素質(zhì)目標1.具有良好的軟件編碼規(guī)范素養(yǎng)2.提升問題解決能力3知識圖譜本項目所涉及的知識圖譜，以“樂購圈APP”為核心，系統(tǒng)梳理了構(gòu)建該項目的核心知識體系。圖譜采用中心輻射式結(jié)構(gòu)，在核心主題節(jié)點下延伸出三大模塊，直觀呈現(xiàn)了從ArkUI基礎(chǔ)組件、ArkUI容器到ArkUI路由的完整學習路徑。項目知識圖譜如圖3-4所示。圖3-4

項目知識圖譜4技術(shù)準備3.4.1ArkUI基礎(chǔ)組件1.Text（文本組件）組件簡介：Text組件是ArkUI中最基礎(chǔ)、最常用的組件之一，用于在界面上展示各種文本信息。無論是頁面標題、商品名稱、價格標簽，還是提示語、按鈕文字，都離不開Text組件的支持。Text組件支持豐富的樣式定制，包括字體、顏色、大小、粗細、對齊方式等，能夠滿足不同場景下的文本展示需求。其常見使用場景如下：?標題區(qū)：頁面主標題/副標題?商品區(qū)：名稱、價格、描述?交互區(qū)：按鈕文字、標簽、提示語?列表區(qū)：列表項內(nèi)容、統(tǒng)計數(shù)字Text常用屬性/事件說明如表3-1所示。4技術(shù)準備3.4.1ArkUI基礎(chǔ)組件1.Text（文本組件）代碼參見教材以下代碼展示了Text組件的使用。它設(shè)置了文本內(nèi)容“歡迎來到樂購圈”，并配置了字體大小（24）、加粗（Bold）、字體顏色（黑色）、最大顯示行數(shù)（1行）和居中對齊，其運行效果圖如圖3-5所示。圖3-5Text組件示例運行效果4技術(shù)準備2.Image（圖片組件）組件簡介：Image組件用于在界面上展示圖片資源，是實現(xiàn)豐富視覺效果的關(guān)鍵。支持本地圖片、網(wǎng)絡(luò)圖片、資源圖片等多種來源。通過設(shè)置寬高、圓角、適應(yīng)方式等屬性，可以靈活適配各種UI需求。其常見使用場景如下：?品牌展示：AppLogo、閃屏頁?內(nèi)容呈現(xiàn)：商品主圖、輪播圖?用戶互動：頭像、圖標按鈕?視覺裝飾：背景圖、分割線、占位圖Image組件常用屬性/事件說明如表3-2所示。4技術(shù)準備3.4.1ArkUI基礎(chǔ)組件2.Image（圖片組件）代碼參見教材以下代碼展示了Image組件的使用。Image組件通過$r接口加載本地資源圖片startIcon，位于resources/base/media目錄下。其運行效果圖如圖3-6所示。圖3-6

Image組件示例運行效果4技術(shù)準備3.Button（按鈕組件）組件簡介：Button組件用于觸發(fā)用戶操作，是交互設(shè)計的核心。支持多種樣式和類型，如Circle（圓形按鈕）、Normal（普通按鈕）、Capsule（膠囊按鈕）等。可自定義顏色、圓角、圖標等，滿足不同業(yè)務(wù)場景，ArkUI提供三種內(nèi)置類型與完全自定義樣式，可在登錄、購買、彈窗確認等高頻場景中快速落地。常見場景：?核心流程：登錄、注冊、提交、支付 ?導(dǎo)航操作：頁面跳轉(zhuǎn)、返回、刷新 ?列表交互：單項操作、批量處理 ?彈窗確認：保存、刪除、取消Button組件常用屬性/事件說明如表3-3所示。4技術(shù)準備3.4.1ArkUI基礎(chǔ)組件3.Button（按鈕組件）代碼參見教材以下代碼展示了Button組件的使用。Button組件顯示為“登錄”，設(shè)置了膠囊形狀（ButtonType.Capsule），寬度為100%，高度為48，字體顏色為白色，背景顏色為#0052D9。點擊按鈕時調(diào)用login方法，模擬異步登錄操作，并在登錄過程中禁用按鈕（enabled屬性設(shè)置為false）。其運行效果圖如圖3-7所示。圖3-7Button組件示例運行效果4技術(shù)準備4.TextInput（輸入框組件）組件簡介：TextInput組件用于接收用戶輸入，是表單、搜索、登錄等場景的基礎(chǔ)。支持多種輸入類型（文本、數(shù)字、密碼等），可設(shè)置占位符、最大長度、校驗規(guī)則等。常見場景：?身份認證：登錄、注冊、找回密碼 ?信息檢索：頂部搜索欄、篩選條件 ?資料編輯：昵稱、手機號、收貨地址 ?內(nèi)容互動：留言、評論、即時聊天TextInput組件常用屬性/事件說明如表3-4所示。4技術(shù)準備3.4.1ArkUI基礎(chǔ)組件4.TextInput（輸入框組件）代碼參見教材以下代碼展示了TextInput組件的使用，主要用于輸入用戶名和密碼。用戶名輸入框設(shè)置了普通輸入類型（InputType.Normal），最大長度為20，寬度為100%，高度為48，占滿整個容器寬度。密碼輸入框根據(jù)showPwd狀態(tài)動態(tài)切換輸入類型為普通或密碼（InputType.Password），最大長度為16，同樣設(shè)置寬度為100%，高度為48，并且支持一鍵切換密碼可見性（showPasswordIcon(true)）。兩個輸入框均綁定了onChange事件，分別用于實時打印用戶名和更新密碼狀態(tài)，實現(xiàn)動態(tài)交互功能。其運行效果圖如圖3-8所示。圖3-8TextInput組件示例運行效果4技術(shù)準備3.4.2ArkUI容器組件1.Column、Row容器組件簡介：Column和Row是ArkUI中最基礎(chǔ)的布局容器，分別用于垂直和水平方向排列子組件。二者API完全一致，支持間距、對齊、邊距等屬性，是頁面結(jié)構(gòu)設(shè)計的基石。常見場景:?頁面整體：登錄頁、設(shè)置頁?卡片內(nèi)部：頭像、標題、按鈕?表單：標簽、輸入框、提示?工具欄：圖標、文字Column、Row組件常用屬性/事件說明如表3-5所示。4技術(shù)準備1.Column、Row容器(代碼參見教材)以下代碼展示了如何通過Row和Column組件構(gòu)建了一個用戶資料卡片。Column作為主體布局，垂直堆疊卡片的頭部、詳細信息和操作按鈕，整體寬度設(shè)為100%，并為Column設(shè)置了內(nèi)邊距和圓角背景。頭部區(qū)域使用Row水平排列用戶名和等級，通過space設(shè)置間距，alignItems實現(xiàn)垂直居中。詳細信息通過嵌套的Column垂直排列文本，展示積分、注冊時間和簡介。操作按鈕區(qū)域再次使用Row，通過layoutWeight等分按鈕寬度，并設(shè)置間距，實現(xiàn)緊湊布局。其運行效果圖如圖3-9所示。圖3-9Column、Row組件示例運行效果4技術(shù)準備2.Grid布局組件組件簡介：Grid組件是ArkUI中用于實現(xiàn)二維網(wǎng)格布局的核心組件，可將一塊矩形區(qū)域按行列切割成若干等大的“豆腐塊”，每個塊內(nèi)可自由放置任意子組件。相比傳統(tǒng)嵌套Row+Column，Grid僅需一次聲明即可實現(xiàn)二維布局，Grid組件用于實現(xiàn)多行多列的網(wǎng)格布局，適合展示商品、快捷入口、功能分區(qū)等。支持自定義行列數(shù)、間距、邊距等。常見場景：?「發(fā)現(xiàn)」頁快捷入口：2列×N行，圖標+文字；?功能分區(qū)：3×2宮格，每個格子放按鈕+描述文字。Grid組件常用屬性/事件說明如表3-6所示。4技術(shù)準備2.Grid布局組件

(代碼參見教材)以下代碼展示了Grid組件的兩種布局方式：基礎(chǔ)布局和不規(guī)則布局。基礎(chǔ)布局通過columnsTemplate和rowsTemplate將網(wǎng)格劃分為3列3行等寬等高，使用columnsGap和rowsGap設(shè)置行列間距。ForEach循環(huán)生成9個GridItem，每個GridItem包含一個居中的文本，背景色為藍色。不規(guī)則布局則通過columnStart、columnEnd、rowStart和rowEnd屬性，手動指定每個GridItem的行列范圍，實現(xiàn)不同大小的格子，背景色分別為綠、橙、紅。整個頁面由Column包裹，設(shè)置了寬度和內(nèi)邊距。其運行效果圖如圖3-10所示。圖3-10Grid組件布局示例運行效果4技術(shù)準備3.List組件List組件是ArkUI中用于展示縱向或橫向可滾動數(shù)據(jù)列表的核心組件，廣泛應(yīng)用于商品列表、消息列表、訂單列表等場景。它支持分割線、懶加載、下拉刷新等功能，能夠滿足不同業(yè)務(wù)需求，提供流暢的滾動體驗。常見場景：?商品列表：展示商品信息，支持點擊查看詳情。?訂單列表：展示用戶訂單，支持分頁加載。?消息通知：展示系統(tǒng)消息或好友動態(tài)，支持懶加載。List組件常用屬性/事件說明如表3-7所示。4技術(shù)準備3.List組件

(代碼參見教材)以下代碼展示了List組件的使用，構(gòu)建了一個設(shè)置菜單列表。List組件通過ForEach循環(huán)渲染itemList數(shù)組中的每一項為一個ListItem。每個列表項由一個Row布局組成，包含一個圓形圖標（顯示序號）、文本（顯示設(shè)置項名稱）和一個右側(cè)箭頭。列表項設(shè)置了寬度、內(nèi)邊距、背景色、圓角和陰影，通過margin實現(xiàn)了分隔效果。其運行效果圖如圖3-11所示。圖3-11List組件布局示例運行效果4技術(shù)準備4.Tabs組件組件簡介：Tabs組件用于實現(xiàn)多頁面切換，常見于底部導(dǎo)航欄或頂部分類切換，僅可包含子組件TabContent，以及渲染控制類型if/else和ForEach，并且if/else和ForEach下也僅支持TabContent，不支持自定義組件。每個Tab可自定義文字、圖標、樣式，并支持動態(tài)切換和事件監(jiān)聽功能。常見場景：?App底部主導(dǎo)航：如“發(fā)現(xiàn)”、“我的”?分類頁：如電商分類導(dǎo)航?功能分區(qū)：如設(shè)置頁的功能分區(qū)Tabs組件常用屬性/事件說明表3-8所示。4技術(shù)準備4.Tabs組件續(xù)表4技術(shù)準備4.Tabs組件

(代碼參見教材)以下代碼展示了Tabs組件的使用，通過該組件構(gòu)建了一個包含三個標簽頁（首頁、分類、我的）的橫向?qū)Ш綑凇abs組件通過tabBar屬性定義了每個標簽頁的標題，并通過TabContent定義了每個標簽頁的內(nèi)容區(qū)域。每個TabContent包含一個Column布局，用于顯示標題和詳細內(nèi)容。Tabs組件設(shè)置了固定模式的導(dǎo)航欄（BarMode.Fixed），其寬度為100%，高度為56，并設(shè)置了300毫秒的動畫時長。通過onChange事件，Tabs組件可以動態(tài)更新當前激活的標簽頁索引（currentIndex）。Tabs組件占滿整個屏幕，整個頁面背景色為淺灰色。其運行效果圖如圖3-12所示。圖3-12Tabs組件布局示例運行效果4技術(shù)準備5.Swiper輪播圖組件組件介紹：Swiper是一個用于展示輪播圖或卡片切換的組件，支持自動播放、手動滑動、分頁器顯示等功能。它廣泛應(yīng)用于首頁輪播廣告、產(chǎn)品推薦、圖片展示等場景，能夠提供流暢的滑動體驗和豐富的視覺效果。常見場景：首頁輪播廣告：展示多個廣告圖片，支持自動播放和手動切換。產(chǎn)品推薦：展示多個產(chǎn)品卡片，支持分頁器指示當前頁。圖片展示：展示多個圖片，支持循環(huán)播放和分頁器。Swiper組件常用屬性/事件說明如表3-9所示。4技術(shù)準備5.Swiper輪播圖組件

(代碼參見教材)以下代碼展示了Swiper組件的使用，用于實現(xiàn)圖片輪播功能。Swiper組件通過ForEach循環(huán)渲染images數(shù)組中的每張圖片，每張圖片使用Image組件顯示，并設(shè)置了圓角（borderRadius）。Swiper組件配置了自動播放（autoPlay）、播放間隔（interval）、循環(huán)播放（loop）和指示器（indicator），并綁定了onChange事件來記錄當前輪播的索引。整個Swiper組件被包裹在一個Column布局中，占滿整個屏幕寬度和高度，頂部有10的外邊距。其運行效果圖如圖3-13所示。圖3-13Swiper組件布局示例運行效果4技術(shù)準備3.4.3ArkUI路由1.ArkUI路由機制簡介在ArkU開發(fā)中，路由用于管理頁面的跳轉(zhuǎn)與導(dǎo)航。每個頁面都可以通過路由API進行跳轉(zhuǎn)、返回、替換等操作，實現(xiàn)App的多頁面流程控制。ArkUI的路由機制本質(zhì)上是對頁面棧的管理，開發(fā)者可以靈活控制頁面的入棧、出棧、參數(shù)傳遞等操作。2.路由配置文件說明在鴻蒙應(yīng)用中，路由配置是通過JSON文件來定義的。路由配置文件指定了應(yīng)用中所有頁面的路徑信息，是頁面跳轉(zhuǎn)的基礎(chǔ)。main_pages.json文件定義了應(yīng)用中所有頁面的路徑，src數(shù)組中的每個元素代表一個頁面的相對路徑，系統(tǒng)會根據(jù)這個配置自動建立路由映射關(guān)系。{"src":["pages/Index",//首頁路徑"pages/Detail",//詳情頁路徑"pages/Profile",//個人資料頁路徑"pages/Settings"http://設(shè)置頁路徑] }4技術(shù)準備3.頁面跳轉(zhuǎn)實現(xiàn)//1.pushUrl-最基本的頁面跳轉(zhuǎn)方法//會將新頁面壓入路由棧，保留當前頁面router.pushUrl({url:'pages/Detail',params:{id:123}//可選參數(shù)})//2.replaceUrl-替換當前頁面//會替換路由棧頂?shù)捻撁妫Ｓ糜诘卿涰摰葓鼍皉outer.replaceUrl({url:'pages/Login'})//3.back-返回上一頁//可以返回到指定頁面，或簡單的返回上一頁router.back()//簡單返回router.back({url:'pages/Home'})//返回到指定頁面//4.clear-清空路由棧//清空所有頁面，常用于退出登錄等場景router.clear()//5.getLength-獲取路由棧深度//返回當前路由棧中的頁面數(shù)量conststackLength=router.getLength()//6.getState-獲取路由狀態(tài)//返回包含路由棧信息的對象conststate=router.getState()4技術(shù)準備4.路由參數(shù)與頁面通信（代碼參見教材）ArkUI支持通過路由傳遞參數(shù)，實現(xiàn)頁面間的數(shù)據(jù)通信。第一頁(Index)包含文本輸入框，用戶輸入內(nèi)容后點擊按鈕跳轉(zhuǎn)到第二頁(Index2)，并將輸入的文字作為參數(shù)傳遞；第二頁接收并顯示用戶輸入的消息，并提供返回按鈕。效果如圖3-14所示圖3-14通過路由傳遞參數(shù)示例運行效果5項目實施3.5.1項目目錄結(jié)構(gòu)項目目錄結(jié)構(gòu)如圖3-15所示。5項目實施3.5.2準備項目資源（代碼實現(xiàn)參見教材）項目實施過程中，需要用到各種圖片、顏色、尺寸、字符串資源，為了提高項目的可維護性和用戶體驗，本項目提前將這些資源準備并定義好，主要涉及以下1個文件夾和3個文件。1.圖片資源將提供的圖片文件復(fù)制到本項目的entry/src/main/resources/base/media文件夾下。2.顏色資源其所在文件為entry/src/main/resources/base/element/color.json。3.尺寸資源其所在文件為entry/src/main/resources/base/element/float.json。4.字符串資源其所在文件為entry/src/main/resources/base/element/string.json。5項目實施3.5.3創(chuàng)建常量和數(shù)據(jù)模型（代碼實現(xiàn)參見教材）1.常量entry/src/main/ets/common/constants/CommonConstants.ets——常量2．數(shù)據(jù)模型（1）entry/src/main/ets/viewmodel/ItemData.ets——數(shù)據(jù)類型定義（2）entry/src/main/ets/viewmodel/MainViewModel.ets——獲取數(shù)據(jù)5項目實施3.5.4構(gòu)建自定義組件（代碼實現(xiàn)參見教材）1.src/main/ets/view/Home.ets——主界面組件其效果如圖3-16中的紅框處所示。2.src/main/ets/view/Setting.ets——“我的”頁面組件其效果圖對應(yīng)關(guān)系如圖3-17中的紅框處所示。圖3-16主界面組件效果

圖3-17我的界面組件效果5項目實施3.5.5項目實現(xiàn)1．登錄界面實現(xiàn)entry/src/main/ets/pages/LoginPage.ets——實現(xiàn)樂購圈應(yīng)