动态加载实现Tabs不均分但整体居中效果

动态加载实现Tabs不均分但整体居中效果

HarmonyOS
2024-05-26 12:17:02
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
chmqn

使用的核心API

Tabs

核心代码解释

1.在写TabBuilder的时候,根据index来动态实现我们想要的tab效果

@Builder 
TabBuilder(index:number, name:string){ 
  if (index == 2) { 
    //Indext为2的tab在这里实现自定义效果 
    Column() { 
      Text(name) 
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) 
        .fontSize(16) 
        .fontWeight(this.currentIndex === index ? 600 : 400) 
        .lineHeight(22) 
      Divider() 
        .strokeWidth(4) 
        .lineCap(LineCapStyle.Round) 
        .color('#06C584') 
        .width(30) 
        .opacity(this.currentIndex === index ? 1 : 0) 
    } 
    .padding({ left: 10, right: 10 }) 
    //下面两行代码,可以让第三个tab变长,有更宽的左边距,实现tabs不均分,但整体居中的效果 
    .backgroundColor('#FF6257') 
    .justifyContent(FlexAlign.Center) 
    .width('100') 
    .margin({ left: 40 }) 
  } else { 
    //其他tabs 
    Column() { 
      Text(name) 
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) 
        .fontSize(16) 
        .fontWeight(this.currentIndex === index ? 600 : 400) 
        .lineHeight(22) 
      Divider() 
        .strokeWidth(4) 
        .lineCap(LineCapStyle.Round) 
        .color('#06C584') 
        .width(30) 
        .opacity(this.currentIndex === index ? 1 : 0) 
    } 
    .padding({ left: 10, right: 10 }) 
    // .width(100) 
    // .height(LAYOUT_WIDTH_OR_HEIGHT) 
    .backgroundColor('#FF6257') 
    .justifyContent(FlexAlign.Center) 
  } 
}

2.在使用的时候像正常的tabs一样使用

Tabs({ barPosition: BarPosition.Start, controller: this.controller, index: 2 }) { 
  TabContent() { 
    Column().width('100%').height('100%').backgroundColor('#00CB87') 
  }.tabBar(this.TabBuilder(0, "全部")) 
 
  TabContent() { 
    Column().width('100%').height('100%').backgroundColor('#007DFF') 
  }.tabBar(this.TabBuilder(1, "待支付")) 
 
  TabContent() { 
    Column().width('100%').height('100%').backgroundColor('#FFBF00') 
  } 
  .tabBar(this.TabBuilder(2, "待出行")) 
} 
.vertical(false) 
.barMode(BarMode.Scrollable, { margin: 10, nonScrollableLayoutStyle: LayoutStyle.SPACE_BETWEEN_OR_CENTER }) 
// .barWidth('100%') 
.barHeight(40) 
.scrollable(false) 
.barGridAlign({ margin: this.gridGutter, gutter: 0 }) 
.onChange((index: number) => { 
  this.currentIndex = index 
}) 
.width('100%') 
.backgroundColor('#F1F5FB')

实现效果

适配的版本信息

 IDE版本:4.0.1.501

 SDK版本:4.0.10.8

分享
微博
QQ
微信
回复
2024-05-27 16:02:47
相关问题
动态布局下加载loading效果实现
274浏览 • 1回复 待解决
Navigation实现Tabs切换效果
510浏览 • 1回复 待解决
tabs结合scroll实现吸顶效果
407浏览 • 1回复 待解决
如何实现Tabs组件tarbar的吸顶效果
214浏览 • 1回复 待解决
是否支持模块的动态加载?如何实现
973浏览 • 1回复 待解决
Tabs组件懒加载的问题
865浏览 • 1回复 待解决
按需加载场景中加载动态模块失败
581浏览 • 1回复 待解决
动态加载网络字体文件
280浏览 • 1回复 待解决
HAP是否提供动态加载的能力
739浏览 • 1回复 待解决
基于tabs实现页面布局
198浏览 • 1回复 待解决
ArkTS和Native如何动态加载、卸载so
848浏览 • 1回复 待解决
canvas如何实现水印效果
402浏览 • 1回复 待解决
如何实现星级评分效果
58浏览 • 1回复 待解决