如何開發(fā)一個(gè)OpenHarmony購物APP導(dǎo)航頁面
想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：
購物類App是現(xiàn)在最常用的一類App，也是我們?cè)趹?yīng)用開發(fā)中經(jīng)常遇到的場景。一款購物App界面通常包括了掃一掃功能、搜索框、輪播圖、標(biāo)簽頁、商品列表等功能，我們以橘子購物為例，介紹一下如何使用ArkTS開發(fā)一個(gè)購物類App。首先我們可以看一下最終實(shí)現(xiàn)效果：
如何開發(fā)一個(gè)OpenHarmony購物app導(dǎo)航頁面-開源基礎(chǔ)軟件社區(qū)
如上圖所示，首先最外層是一個(gè)可以切換切換的標(biāo)簽頁，分別對(duì)應(yīng)首頁、新品、購物車以及我的等四個(gè)欄目。頁面整體結(jié)構(gòu)可以通過Tabs組件實(shí)現(xiàn)，通過閱讀Tabs組件的API文檔，注意到Tabs包含子組件TabContent即可實(shí)現(xiàn)選項(xiàng)卡效果。我們可以快速構(gòu)造出如下所示的整體結(jié)構(gòu)：
private controller: TabsController = new TabsController()
Column() {
Tabs({
barPosition: BarPosition.END,
controller: this.controller
}) {
TabContent() {
}
TabContent() {
}
TabContent() {
}
TabContent() {
}
}
}.width('100%')其中barPosition控制選擇欄位置，BarPosition.END表示選擇欄在頁面下方，BarPosition.START表示選擇欄在頁面上方，同時(shí)定義一個(gè)TabsController來控制Tabs切換邏輯。圖中選擇欄各個(gè)欄目都有相同的結(jié)構(gòu)，都是圖片加標(biāo)題，這部分樣式在TabContent的tabBar屬性中設(shè)計(jì)，我們?nèi)缦率纠a使用@Builder裝飾方法來定義組件的聲明式UI描述。
@Builder TabBarBuilder(index: number) {
Column() {
Image(this.getTabBarImage(index))
Text(TAB_TITLE_DATA[index].title)
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
.onClick(() => {
this.controller.changeIndex(index)
})
}
...
TabContent() {
MainPage({ url: this.url })
}.tabBar(this.TabBarBuilder(0))
TabContent() {
NewProduct({ url: this.url })
}.tabBar(this.TabBarBuilder(1))
TabContent() {
ShopCart({ url: this.url })
}.tabBar(this.TabBarBuilder(2))
TabContent() {
User()
}.tabBar(this.TabBarBuilder(3))其中MainPage，NewProduct，ShopCart，User表示各個(gè)頁面的具體內(nèi)容。常見的App通常是通過點(diǎn)擊切換的，而不能通過滑動(dòng)切換，如果想要禁用Tab的滑動(dòng)切換可以使用將Tab的scrollable屬性設(shè)計(jì)為false來實(shí)現(xiàn)。Tabs實(shí)現(xiàn)四個(gè)欄目切換達(dá)到上圖效果的整體代碼可以參考NavigationHomePage。
實(shí)現(xiàn)完最外層容器的標(biāo)簽頁切換介紹后，我們?cè)賹?duì)主頁進(jìn)行簡單介紹。首先對(duì)主頁內(nèi)容從上到下可以進(jìn)行一個(gè)簡單分解:
如何開發(fā)一個(gè)OpenHarmony購物app導(dǎo)航頁面-開源基礎(chǔ)軟件社區(qū)
一號(hào)框中包含兩張圖片，使用兩個(gè)image組件，其中二維碼圖片可以在onClick事件加入跳轉(zhuǎn)邏輯跳轉(zhuǎn)到二維碼模塊。
二號(hào)框?yàn)橐粋€(gè)搜索框，使用TextInput組件。(示例代碼中無具體功能，通過Image+Text進(jìn)行展示)。
這兩部分代碼可以參考TitleBar。
根據(jù)我們以往使用購物App的經(jīng)驗(yàn)，我們可以知道下滑過程中，最上方圖片以及搜索框是一直存在的，即一二號(hào)框固定不動(dòng)，三四五號(hào)框可以上下滑動(dòng)，要實(shí)現(xiàn)這種效果只需要將后面三個(gè)框放到 Scroll組件中即可。
三號(hào)框可以使用Tab組件，參考代碼見MainPage,示例代碼中未實(shí)現(xiàn)具體功能，使用了Text進(jìn)行展示。
四號(hào)框輪播圖中使用Swiper實(shí)現(xiàn)輪播圖效果,實(shí)現(xiàn)代碼可以參考Swiper。
五號(hào)框是主頁下半部分商品展示，這一部分看作一個(gè)Tabs，4個(gè)標(biāo)簽分別對(duì)應(yīng)全部、精選、新品、實(shí)惠，每個(gè)Tab中包含了一個(gè)商品列表，列表中整齊地排列著各個(gè)商品元素，這類像柵格一樣的場景我們可以通過GridRow嵌套GridCol實(shí)現(xiàn)，具體代碼見HomePageContent。
綜上所述，可以簡單地畫出導(dǎo)航頁對(duì)應(yīng)的結(jié)構(gòu)圖：
如何開發(fā)一個(gè)OpenHarmony購物app導(dǎo)航頁面-開源基礎(chǔ)軟件社區(qū)
效果對(duì)比
我們將橘子購物實(shí)現(xiàn)效果與市面是常用的兩款購物APP京東與閑魚界面放在一起進(jìn)行一個(gè)簡單對(duì)比，我們可以發(fā)現(xiàn)作為一個(gè)示例，在美觀方面與真實(shí)APP還是存在不小的差距，但是整體結(jié)構(gòu)上基本相同，能夠?qū)崿F(xiàn)一個(gè)購物類應(yīng)用的界面。
對(duì)于想要快速實(shí)現(xiàn)整體框架效果的讀者,還可以使用如下代碼通過Navigation+Tabs方式來快速實(shí)現(xiàn)。
完整實(shí)現(xiàn)代碼
@Entry
@Component
struct NavigationExample {
@State currentIndex: number = 0
@State Build: Array<Object> = [
{
text: 'home',
num: 0
},
{
text: 'app',
num: 1
},
{
text: 'cart',
num: 2
},
{
text: 'user',
num: 3
}
]
@Builder NavigationTitle() {
Column() {
Text('Title')
.height('100%')
}.alignItems(HorizontalAlign.Start)
}
@Builder NavigationToolbar() {
Row() {
ForEach(this.Build, item => {
Column() {
Text(item.text)
.fontColor(this.currentIndex == item.num ? '#007DFF' : '#182431')
.fontSize(10)
.lineHeight(14)
.fontWeight(500)
.margin({ top: 3 })
}.width(104).height(56)
.onClick(() => {
this.currentIndex = item.num
})
})
}.margin({ left: 24 })
}
build() {
Column() {
Navigation() {
TextInput({ placeholder: 'search...' })
.width('90%')
.height(40)
.backgroundColor('#FFFFFF')
.margin({ top: 8 })
Tabs({
index:this.currentIndex
}){
TabContent(){
Text('0')
}
TabContent(){
Text('1')
}
TabContent(){
Text('2')
}
TabContent(){
Text('3')
}
}
}
.title(this.NavigationTitle)
.toolBar(this.NavigationToolbar)
}.width('100%').height('100%').backgroundColor('#F1F3F5')
}
}實(shí)現(xiàn)效果
<img title=“” src=“OrangeShopping/04-navigationpage/demo.jpeg” alt=“image” width=“326” data-align=“center”>
讀者可以在這個(gè)基礎(chǔ)上添加所需要的組件，也可以完成一個(gè)購物類App界面。
本文供稿：https://gitee.com/pan-jiufeng。
