大家周末好呀，今天繼續分享倉頡語言開發商城應用的實戰教程，今天要做的是tabbar。

大家都知道ArkTs有Tabs和TabContent容器，能夠實現上圖的樣式，滿足基本的使用需求。而倉頡就不同了，它雖然也有這兩個組件，但是它的tabbar參數只支持傳入圖片或者文字，不能像ArkTs那樣能傳入組件,所以在倉頡語言中官方的tabbar局限性非常大。

給大家實操講解一下，下面是一段Tabs的基本寫法：

Tabs(BarPosition.End, this.controller){TabContent(){Text('頁面1')}TabContent(){Text('頁面2’)}
}

如果你要設置tabbar的樣式，需要在TabContent下添加tabbar屬性，然后你會發現tabbar只有唯二的兩個參數：

TabContent(){Text('頁面1')}.tabBar(icon: CJResource, text: CJResource)

設置完之后它長這樣：

這樣就無法滿足我們的需求，所以我們需要自定義。

每一個tabbar元素都有一個圖片組件和一個文字組件，我給它寫出來：

Column {Image(item.selectIcon).width(28).height(28)Text(item.title).fontSize(15).fontColor(0xd84642).margin(top: 3)}

然后它需要有一個選中狀態，難受的是倉頡不支持三元表達式，所以我只能寫if語句：

Column {if(this.currenttabIndex == index){Image(item.selectIcon).width(28).height(28)Text(item.title).fontSize(15).fontColor(0xd84642).margin(top: 3)}else {Image(item.icon).width(28).height(28)Text(item.title).fontSize(15).fontColor(Color.GRAY).margin(top: 3)}}

它還需要一個點擊事件：

Column {if(this.currenttabIndex == index){Image(item.selectIcon).width(28).height(28)Text(item.title).fontSize(15).fontColor(0xd84642).margin(top: 3)}else {Image(item.icon).width(28).height(28)Text(item.title).fontSize(15).fontColor(Color.GRAY).margin(top: 3)}}
.onClick({evet => this.currenttabIndex = index;this.controller.changeIndex(Int32(this.currenttabIndex))})

這樣一個元素就寫好了，接下來我只要循環添加幾個元素，一個完整的tabbar就寫好了，這里大家也要注意一下倉頡中foreach的寫法：

Row {ForEach(this.tabList, itemGeneratorFunc: {item: TabItem, index: Int64 =>Column {if(this.currenttabIndex == index){Image(item.selectIcon).width(28).height(28)Text(item.title).fontSize(15).fontColor(0xd84642).margin(top: 3)}else {Image(item.icon).width(28).height(28)Text(item.title).fontSize(15).fontColor(Color.GRAY).margin(top: 3)}}.onClick({evet => this.currenttabIndex = index;this.controller.changeIndex(Int32(this.currenttabIndex))})})
}
.width(100.percent)
.height(60)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceAround)

最后我們還是需要官方的Tabs容器來添加頁面，你只要不設置tabbar屬性底部導航欄區域就是空白的，正好把我們自定義的tabbar放上，下面是完整的示例代碼：

let tabList: Array<TabItem> = [TabItem(@r(app.media.shop_tab_00), @r(app.media.shop_tab_01), '首頁'),TabItem(@r(app.media.shop_tab_10), @r(app.media.shop_tab_11), '購物車'),TabItem(@r(app.media.shop_tab_20), @r(app.media.shop_tab_21), '我的')]
@State
var currenttabIndex:Int64 = 0Stack(Alignment.Bottom) {Tabs(BarPosition.End, this.controller){TabContent(){home()}TabContent(){shopcar()}TabContent(){mine()}}.barHeight(60).scrollable(false).animationDuration(0)Row {ForEach(this.tabList, itemGeneratorFunc: {item: TabItem, index: Int64 =>Column {if(this.currenttabIndex == index){Image(item.selectIcon).width(28).height(28)Text(item.title).fontSize(15).fontColor(0xd84642).margin(top: 3)}else {Image(item.icon).width(28).height(28)Text(item.title).fontSize(15).fontColor(Color.GRAY).margin(top: 3)}}.onClick({evet => this.currenttabIndex = index;this.controller.changeIndex(Int32(this.currenttabIndex))})})
}
.width(100.percent)
.height(60)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceAround)
}

以上就是倉頡語言自定義tabbar的實現過程，感謝閱讀。#HarmonyOS語言##倉頡##購物#