DEV Community

wei chang
wei chang

Posted on

Harmonyos Cangjie Development Language Practical Tutorial: Customizing tabbar

Hello everyone, this weekend! Today, I'll continue to share a practical tutorial on developing a shopping mall application using the Cangjie language. What I'm going to do today is tabbar.

Image description

Everyone knows that ArkTs has Tabs and TabContent containers, which can achieve the style shown in the above picture and meet the basic usage requirements. However, Cangjie is different. Although it also has these two components, its tabbar parameter only supports the input of images or text, and cannot input components like ArkTs. Therefore, the official tabbar in the Cangjie language has very significant limitations.

Let me give you a practical explanation. Here is a basic way to write Tabs:

Tabs(BarPosition.End, this.controller){
 TabContent(){
        Text('页面1')
    }
  TabContent(){
        Text('页面2’)
    }
}
Enter fullscreen mode Exit fullscreen mode

If you want to set the style of tabbar, you need to add the tabbar attribute under TabContent. Then you will find that tabbar has only two parameters:

TabContent(){
        Text('页面1')
    }
   .tabBar(icon: CJResource, text: CJResource)
Enter fullscreen mode Exit fullscreen mode

After being set up, it looks like this:

Image description

This way, it won't meet our needs, so we need to customize it.

Each tabbar element has an image component and a text component. I write them out for it:

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

Then it needs to have a selected state. The annoying thing is that Cangjie doesn't support ternary expressions, so I can only write if statements:

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)
         }
    }
Enter fullscreen mode Exit fullscreen mode

It also requires a click event:

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))})
Enter fullscreen mode Exit fullscreen mode

This element is done. Next, I just need to loop and add a few elements, and a complete tabbar is done. Here, everyone should also pay attention to the writing method of foreach in Cangjie:

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)
Enter fullscreen mode Exit fullscreen mode

Finally, we still need the official Tabs container to add pages. As long as you don't set the tabbar property, the bottom navigation bar area will be blank, which is just right to place our custom tabbar. The following is the complete sample code:

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 = 0

Stack(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)
}
Enter fullscreen mode Exit fullscreen mode

The above is the implementation process of customizing tabbar in Cangjie language. Thank you for reading. #HarmonyOS Language ## Cangjie ## Shopping #

Top comments (0)