1. 項(xiàng)目涉及知識(shí)點(diǎn)羅列

• 掌握HUAWEI DevEco Studio開(kāi)發(fā)工具
• 掌握創(chuàng)建HarmonyOS應(yīng)用工程
• 掌握ArkUI自定義組件
• 掌握@Entry、@Component、@Builder等裝飾器
• 掌握@State、@Link等狀態(tài)管理裝飾器
• 掌握Column、Row、Flex、List、Text、Image、Tabs、Scroll等系統(tǒng)組件
• 掌握資源的定義和應(yīng)用

2. 項(xiàng)目目錄結(jié)構(gòu)介紹

3. 最終的效果圖

4. 部分源碼展示

import Home from '../components/Home';
import { MainPageConstants } from '../constants/MainPageConstants';
import { TabBarData, tabBarData } from '../viewmodel/MainPageData';/*
* 電商主頁(yè)
*/
@Entry
@Component
struct MainPage {@State currentIndex: number = 0;// 自定義底部導(dǎo)航圖標(biāo)@Builder TabBar(tabBarData: TabBarData) {Column({space: MainPageConstants.TAB_SPACE}) {Image(this.currentIndex === tabBarData.index ? tabBarData.selectImg : tabBarData.img).height($r('app.float.main_page_tab_image_size')).width($r('app.float.main_page_tab_image_size'))Text(tabBarData.title).fontSize($r('app.float.main_page_tab_title_size')).fontColor(this.currentIndex === tabBarData.index ? $r('app.color.main_page_tar_title_select_color') : Color.Black)}}build() {Tabs({index: this.currentIndex,barPosition: BarPosition.End}) {// 首頁(yè)TabContent() {Home()}.tabBar(this.TabBar(tabBarData[0]))// 新品TabContent() {Column() {Text($r('app.string.main_page_tab_product')).fontSize($r('app.float.product_page_text_size'))}.height(MainPageConstants.FULL_HEIGHT).width(MainPageConstants.FULL_WIDTH).justifyContent(FlexAlign.Center)}.tabBar(this.TabBar(tabBarData[1]))// 購(gòu)物車TabContent() {Column() {Text($r('app.string.main_page_tab_cart')).fontSize($r('app.float.product_page_text_size'))}.height(MainPageConstants.FULL_HEIGHT).width(MainPageConstants.FULL_WIDTH).justifyContent(FlexAlign.Center)}.tabBar(this.TabBar(tabBarData[2]))// 我的TabContent() {Column() {Text($r('app.string.main_page_tab_personal')).fontSize($r('app.float.product_page_text_size'))}.height(MainPageConstants.FULL_HEIGHT).width(MainPageConstants.FULL_WIDTH).justifyContent(FlexAlign.Center)}.tabBar(this.TabBar(tabBarData[3]))}.backgroundColor($r('app.color.main_page_background_color')).onChange((index: number) => {this.currentIndex = index;})}
}

ps：需要完整源碼的同學(xué)，可以在評(píng)論區(qū)留言！！！