写点什么

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

作者:幽蓝计划
  • 2025-05-26
    山东
  • 本文字数:2205 字

    阅读完需:约 7 分钟

大家周末好呀,今天继续分享仓颉语言开发商城应用的实战教程,今天要做的是 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), '我的')    ]@Statevar 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)}
复制代码


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

用户头像

幽蓝计划

关注

还未添加个人签名 2025-05-09 加入

还未添加个人简介

评论

发布
暂无评论
鸿蒙仓颉开发语言实战教程:自定义tabbar_幽蓝计划_InfoQ写作社区