鸿蒙仓颉开发语言实战教程：自定义tabbar

大家周末好呀，今天继续分享仓颉语言开发商城应用的实战教程，今天要做的是tabbar。
 

 
大家都知道ArkTs有Tabs和TabContent容器，能够实现上图的样式，满足基本的使用需求。而仓颉就不同了，它虽然也有这两个组件，但是它的tabbar参数只支持传入图片或者文字，不能像ArkTs那样能传入组件,所以在仓颉语言中官方的tabbar局限性非常大。
 
给大家实操讲解一下，下面是一段Tabs的基本写法：
 

1. Tabs(BarPosition.End, this.controller){
2. TabContent(){
3.         Text('页面1')
4.     }
5.   TabContent(){
6.         Text('页面2’)
7.     }
8. }

复制代码

 
如果你要设置tabbar的样式，需要在TabContent下添加tabbar属性，然后你会发现tabbar只有唯二的两个参数：

1. TabContent(){
2.         Text('页面1')
3.     }
4.    .tabBar(icon: CJResource, text: CJResource)

复制代码

 
设置完之后它长这样：
 

 
这样就无法满足我们的需求，所以我们需要自定义。
 
每一个tabbar元素都有一个图片组件和一个文字组件，我给它写出来：
 

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

复制代码

 
然后它需要有一个选中状态，难受的是仓颉不支持三元表达式，所以我只能写if语句：

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

复制代码

 
它还需要一个点击事件：

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

复制代码

 
这样一个元素就写好了，接下来我只要循环添加几个元素，一个完整的tabbar就写好了，这里大家也要注意一下仓颉中foreach的写法：
 

1. Row {
2.         ForEach(this.tabList, itemGeneratorFunc: {item: TabItem, index: Int64 =>
3.                     Column {
4.                         if(this.currenttabIndex == index){
5.                             Image(item.selectIcon).width(28).height(28)
6.                             Text(item.title).fontSize(15).fontColor(0xd84642).margin(top: 3)
7.                         }else {
8.                              Image(item.icon).width(28).height(28)
9.                             Text(item.title).fontSize(15).fontColor(Color.GRAY).margin(top: 3)
10.                          }
11.                     }
12.                 .onClick({evet => this.currenttabIndex = index;this.controller.changeIndex(Int32(this.currenttabIndex))})
13.     })
14. }
15. .width(100.percent)
16. .height(60)
17. .alignItems(VerticalAlign.Center)
18. .justifyContent(FlexAlign.SpaceAround)

复制代码

 
最后我们还是需要官方的Tabs容器来添加页面，你只要不设置tabbar属性底部导航栏区域就是空白的，正好把我们自定义的tabbar放上，下面是完整的示例代码：
 

1. let tabList: Array = [    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), '我的')    ]@Statevar currenttabIndex:Int64 = 0Stack(Alignment.Bottom) {    Tabs(BarPosition.End, this.controller){     TabContent(){        home()        }        TabContent(){            shopcar()        }        TabContent(){            mine()        }    }    .barHeight(60)    .scrollable(false)    .animationDuration(0)         Row {
2.         ForEach(this.tabList, itemGeneratorFunc: {item: TabItem, index: Int64 =>
3.                     Column {
4.                         if(this.currenttabIndex == index){
5.                             Image(item.selectIcon).width(28).height(28)
6.                             Text(item.title).fontSize(15).fontColor(0xd84642).margin(top: 3)
7.                         }else {
8.                              Image(item.icon).width(28).height(28)
9.                             Text(item.title).fontSize(15).fontColor(Color.GRAY).margin(top: 3)
10.                          }
11.                     }
12.                 .onClick({evet => this.currenttabIndex = index;this.controller.changeIndex(Int32(this.currenttabIndex))})
13.     })
14. }
15. .width(100.percent)
16. .height(60)
17. .alignItems(VerticalAlign.Center)
18. .justifyContent(FlexAlign.SpaceAround)}

复制代码

 
以上就是仓颉语言自定义tabbar的实现过程，感谢阅读。#HarmonyOS语言##仓颉##购物#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！