鸿蒙仓颉开发语言实战教程：自定义tabbar
【摘要】 大家周末好呀，今天继续分享仓颉语言开发商城应用的实战教程，今天要做的是tabbar。大家都知道ArkTs有Tabs和TabContent容器，能够实现上图的样式，满足基本的使用需求。而仓颉就不同了，它虽然也有这两个组件，但是它的tabbar参数只支持传入图片或者文字，不能像ArkTs那样能传入组件,所以在仓颉语言中官方的tabbar局限性非常大。给大家实操讲解一下，下面是一段Tabs的基本写...
Tabs(BarPosition.End, this.controller){
TabContent(){
Text('页面1')
}
TabContent(){
Text('页面2’)
}
}TabContent(){
Text('页面1')
}
.tabBar(icon: CJResource, text: CJResource)
Column {
Image(item.selectIcon).width(28).height(28)
Text(item.title).fontSize(15).fontColor(0xd84642).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)
}
}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))})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)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)
}
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）