本項目只是UI頁面，數(shù)據(jù)都是本地的假數(shù)據(jù)，沒有網(wǎng)絡數(shù)據(jù)交互。頁面包括：首頁、分類、購物車、我的、詳情頁。
??想了解更多關于開源的內(nèi)容，請訪問：??
??51CTO 開源基礎軟件社區(qū)??
??https://ost.51cto.com??
項目介紹
最近HarmonyOS有所更新，抽空寫個電商項目《買什么》Demo練練手，本項目只是UI頁面，數(shù)據(jù)都是本地的假數(shù)據(jù)，沒有網(wǎng)絡數(shù)據(jù)交互。頁面包括：首頁、分類、購物車、我的、詳情頁。 項目基于HarmonyOS的ArkUI框架TS擴展的聲明式開發(fā)范式，關于語法和概念直接看官網(wǎng)官方文檔地址：??基于TS擴展的聲明式開發(fā)范式??。
- 工具版本： DevEco Studio 3.1 Canary1。
- SDK版本： 3.1.9.7（API Version 8 Release）。
效果演示
頁面解析
主框架
使用容器組件：Tabs 、TabContent、作為主框架，底部Tab使用自定義布局樣式，設置點擊事件，每次點擊更換選中的索引。來切換內(nèi)容頁面。
使用自定義組件來實現(xiàn)：首頁、分類、購物車、我的的搭建。
@Entry
@Component
struct MainFrame {
@State selectIndex: number = 0
private controller: TabsController = new TabsController()
private tabBar = getTabBarList()
// 內(nèi)容
@Builder Content() {
Tabs({ controller: this.controller }) {
TabContent() {HomeComponent()}
TabContent() {ClassifyComponent()}
TabContent() {ShoppingCartComponent({ isShowLeft: false })}
TabContent() {MyComponent()}
}
.width('100%')
.height(0)
.animationDuration(0)
.layoutWeight(1)
.scrollable(false)
.barWidth(0)
.barHeight(0)
}
// 底部導航
@Builder TabBar() {
Row() {
ForEach(this.tabBar, (item: TabBarModel, index) => {
Column() {
Image(this.selectIndex === index ? item.iconSelected : item.icon)
.width(23).height(23).margin({ right: index === 2 ? 3 : 0 })
Text(item.name)
.fontColor(this.selectIndex === index ? '#dc1c22' : '#000000')
.margin({ left: 1, top: 2 })
}.layoutWeight(1)
.onClick(() => {
this.selectIndex = index
this.controller.changeIndex(index)
})
}, item => item.name)
}.width('100%').height(50)
.shadow({ radius: 1, color: '#e3e2e2', offsetY: -1 })
}
build() {
Column() {
this.Content()
this.TabBar()
}.width('100%').height('100%')
}
}
首頁
因為頂部標題欄需要浮在內(nèi)容之上，所以根布局使用容器組件Stack?，內(nèi)容布局最外層使用容器組件Scroll 來實現(xiàn)滑動，內(nèi)容整體分為3部分：
- 輪播圖：使用容器組件Swiper。
- 菜單：使用容器組件Flex、默認橫向布局，子布局寬度分為五等分，設置Flex的參數(shù)：wrap: FlexWrap.Wrap可實現(xiàn)自動換行。
- 商品列表：和菜單的實現(xiàn)方式一樣，只不過寬度是二等分。
向下滑動時標題欄顯示功能：使用 容器組件Scroll 的屬性方法：onScroll來判斷y軸方向的偏移量，根據(jù)偏移量計算出比例，改變標題欄的透明度。
以下是部分代碼：
@Component
export struct HomeComponent {
// 滑動的y偏移量
private yTotalOffset = 0
// 標題欄透明度
@State titleBarOpacity: number = 0
// 輪播圖列表
private banners = [
$r("app.media.banner1"), $r("app.media.banner2"), $r("app.media.banner3"),
$r("app.media.banner4"), $r("app.media.banner5"), $r("app.media.banner6"),
]
// 菜單列表
private menuList = getHomeMenuList()
// 商品列表
private goodsList: Array<HomeGoodsModel> = getHomeGoodsList()
// 輪播圖
@Builder Banner() {...}
// 菜單
@Builder Menu() {....}
// 商品列表
@Builder GoodsList() {...}
build() {
Stack({ alignContent: Alignment.Top }) {
Scroll() {
Column() {
this.Banner()
this.Menu()
this.GoodsList()
}.backgroundColor(Color.White)
}.scrollBar(BarState.Off)
.onScroll((xOffset, yOffset) => {
this.yTotalOffset += yOffset
const yTotalOffsetVP = px2vp(this.yTotalOffset)
// 輪播圖高度 350
const scale = yTotalOffsetVP / 200
this.titleBarOpacity = scale
})
Row(){
TitleBar({
title: '首頁',
isShowLeft: false,
isShowRight: true,
rightImage: $r('app.media.search')
})
}.opacity(this.titleBarOpacity)
}.width('100%').height('100%')
}
}
詳情頁
和首頁類似，根布局使用容器組件Stack，內(nèi)容布局最外層使用容器組件Scroll 來實現(xiàn)滑動。因為詳情頁有相同布局，使用裝飾器@Builder來抽離公共布局。
向下滑動時標題欄顯示功能原理和首頁一樣。
以下是部分代碼：
import router from '@ohos.router';
@Entry
@Component
struct GoodsDetail {
....
// 輪播圖
@Builder Banner() {...}
// 內(nèi)容item
@Builder ContentItem(title: string, content: string, top=1) {
Row() {
Text(title).fontSize(13).fontColor('#808080')
Text(content).fontSize(13).margin({ left: 10 }).fontColor('#ff323232')
Blank()
Image($r('app.media.arrow')).width(12).height(18)
}.width('100%').padding(13)
.backgroundColor(Color.White).margin({ top: top })
}
// 內(nèi)容
@Builder Content() {
...
this.ContentItem('郵費', '滿80包郵', 7)
this.ContentItem('優(yōu)惠', '減5元')
this.ContentItem('規(guī)格', '山核桃堅果曲奇; x3', 7)
this.ContentItem('配送', '北京市朝陽區(qū)大塔路33號')
}
// 評論
@Builder Comment() {...}
// 商品參數(shù)item
@Builder GoodsParamItem(title: string, content: string) {
Row() {
Text(title).width(100).fontSize(13).fontColor('#808080')
Text(content).fontSize(13).fontColor('#ff323232')
.layoutWeight(1).padding({ right: 20 })
}.width('100%').padding({ top: 15 })
.alignItems(VerticalAlign.Top)
}
// 商品參數(shù)
@Builder GoodsParam() {...}
build() {
Stack() {
Scroll() {
Column() {
this.Banner()
this.Content()
this.Comment()
this.GoodsParam()
}
}.scrollBar(BarState.Off)
.onScroll((xOffset, yOffset) => {
this.yTotalOffset += yOffset
const yTotalOffsetVP = px2vp(this.yTotalOffset)
// 輪播圖高度 350
const scale = yTotalOffsetVP / 350
this.titleBarBgTmOpacity = 1 - scale
if (scale > 0.4) {
this.titleBarBgWhiteOpacity = scale - 0.2
} else {
this.titleBarBgWhiteOpacity = 0
}
})
this.TopBottomOperateBar()
}.width('100%').height('100%')
.backgroundColor('#F4F4F4')
}
}
分類
此頁面很簡單，就是左右兩個容器組件List、一個寬度30%，一個寬度70%，使用循環(huán)渲染組件ForEach來渲染列表。
以下是部分代碼：
@Component
export struct ClassifyComponent {
// 搜索
@Builder Search() {...}
// 內(nèi)容
@Builder Content() {
Row() {
// 左分類
List() {...}.width('30%')
// 右分類
List({scroller:this.scroller}) {...}.width('70%')
}.width('100%').layoutWeight(1)
.alignItems(VerticalAlign.Top)
}
build() {
Column() {
this.Search()
this.Content()
}.width('100%').height('100%')
.backgroundColor(Color.White)
}
}
購物車
此界面功能：全選、單選、刪除商品、更改商品的數(shù)量。當有商品選中，右上角刪除按鈕顯示。更改商品數(shù)量同步更新合計的總價格。
使用List組件來實現(xiàn)列表。數(shù)據(jù)數(shù)組使用裝飾器@State定義。數(shù)據(jù)更新必須是更改數(shù)組的項。
以下是部分代碼：
@Component
export struct ShoppingCartComponent {
...
// 商品詳情
@Builder GoodsItem(item: ShoppingCartModel, index: number) {...}
build() {
Column() {
TitleBar()
if (this.list.length > 0) {
// 列表
List() {...}.layoutWeight(1)
// 結算布局
Row() {...}
} else {
Row() {
Text('空空如也~')
}
}
}.width('100%').height('100%')
.backgroundColor('#F4F4F4')
}
selectOperation(item: ShoppingCartModel, index: number) {
// 替換元素,才能更改數(shù)組，這樣頁面才能更新
let newItem: ShoppingCartModel = {
id: item.id,
image: item.image,
name: item.name,
category: item.category,
newPrice: item.newPrice,
oldPrice: item.oldPrice,
count: item.count,
isSelected: !item.isSelected
}
this.list.splice(index, 1, newItem)
this.calculateTotalPrice()
}
// 加/減操作
addOrSubtractOperation(item: ShoppingCartModel, index: number, type: -1 | 1) {...}
// 計算合計
calculateTotalPrice() {
let total = 0
let selectedCount = 0
for (const item of this.list) {
if (item.isSelected) {
selectedCount++
total += item.newPrice * item.count
}
}
this.totalPrice = total
this.isAllSelected = selectedCount === this.list.length
}
}
結尾
此項目沒有比較難的點，都是照著官方文檔，查閱API做出來的，依靠著聲明式UI的簡潔和強大，頁面搭建效率很高。
項目地址：https://gitee.com/liangdidi/BuyWhatDemo。
每天進步一點點、需要付出努力億點點。
??想了解更多關于開源的內(nèi)容，請訪問：??
??51CTO 開源基礎軟件社區(qū)??
??https://ost.51cto.com??。
