当前位置:   article > 正文

鸿蒙实现自定义Tabbar样式,显示数字红点提示_自定义红点 鸿蒙

自定义红点 鸿蒙

前言:

DevEco Studio版本:4.0.0.600

Tabs的链接参考:OpenHarmony Tabs

TabContent的链接参考:OpenHarmony TabContent

通过查看链接参考我们知道可以通过TabContent的tabBar来实现自定义TabBar样式(CustomBuilder)

实现效果:

具体实现逻辑:

1、自定义样式

  1. @Builder
  2. tabBuilder(index: number, name: string) {
  3. RelativeContainer() {
  4. Text(name)
  5. .id("textTab")
  6. .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
  7. .fontSize(16)
  8. .fontWeight(this.currentIndex === index ? 8 : 4)
  9. .margin({ top: 17, bottom: 7 })
  10. .alignRules({
  11. center: { anchor: '__container__', align: VerticalAlign.Center }, //竖直居中
  12. middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中
  13. })
  14. Text("5")
  15. .id("textDot")
  16. .textAlign(TextAlign.Center)
  17. .backgroundColor(Color.Red)
  18. .borderRadius(10)
  19. .fontSize(12)
  20. .fontColor(Color.White)
  21. .width(20)
  22. .height(20)
  23. .alignRules({
  24. left: { anchor: 'textTab', align: HorizontalAlign.End },
  25. center: { anchor: 'textTab', align: VerticalAlign.Center }
  26. })
  27. Divider()
  28. .id("dividerTab")
  29. .strokeWidth(this.strokeWidth)
  30. .color('#007DFF')
  31. .opacity(this.currentIndex === index ? 1 : 0)
  32. .alignRules({
  33. bottom: { anchor: '__container__', align: VerticalAlign.Bottom }, //竖直居中
  34. middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中
  35. })
  36. }.width('100%')
  37. }

2、完整代码:

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State fontColor: string = '#111111'
  5. @State selectedFontColor: string = '#007DFF'
  6. @State currentIndex: number = 0
  7. private controller: TabsController = new TabsController()
  8. @State strokeWidth: number = 3 //下划线的宽度
  9. @Builder
  10. tabBuilder(index: number, name: string) {
  11. RelativeContainer() {
  12. Text(name)
  13. .id("textTab")
  14. .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
  15. .fontSize(16)
  16. .fontWeight(this.currentIndex === index ? 8 : 4)
  17. .margin({ top: 17, bottom: 7 })
  18. .alignRules({
  19. center: { anchor: '__container__', align: VerticalAlign.Center }, //竖直居中
  20. middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中
  21. })
  22. Text("5")
  23. .id("textDot")
  24. .textAlign(TextAlign.Center)
  25. .backgroundColor(Color.Red)
  26. .borderRadius(10)
  27. .fontSize(12)
  28. .fontColor(Color.White)
  29. .width(20)
  30. .height(20)
  31. .alignRules({
  32. left: { anchor: 'textTab', align: HorizontalAlign.End },
  33. center: { anchor: 'textTab', align: VerticalAlign.Center }
  34. })
  35. Divider()
  36. .id("dividerTab")
  37. .strokeWidth(this.strokeWidth)
  38. .color('#007DFF')
  39. .opacity(this.currentIndex === index ? 1 : 0)
  40. .alignRules({
  41. bottom: { anchor: '__container__', align: VerticalAlign.Bottom }, //竖直居中
  42. middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中
  43. })
  44. }.width('100%')
  45. }
  46. build() {
  47. Column() {
  48. Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
  49. TabContent() {
  50. Column().width('100%').height('100%').backgroundColor('#00CB87')
  51. }.tabBar(this.tabBuilder(0, 'green'))
  52. TabContent() {
  53. Column().width('100%').height('100%').backgroundColor('#007DFF')
  54. }.tabBar(this.tabBuilder(1, 'blue'))
  55. TabContent() {
  56. Column().width('100%').height('100%').backgroundColor('#FFBF00')
  57. }.tabBar(this.tabBuilder(2, 'yellow'))
  58. TabContent() {
  59. Column().width('100%').height('100%').backgroundColor('#E67C92')
  60. }.tabBar(this.tabBuilder(3, 'pink'))
  61. }
  62. .vertical(false)
  63. .barMode(BarMode.Fixed)
  64. .barHeight(56)
  65. .animationDuration(400)
  66. .onChange((index: number) => {
  67. this.currentIndex = index
  68. })
  69. .width('100%')
  70. .height('100%')
  71. .backgroundColor('#F1F3F5')
  72. }.width('100%')
  73. }
  74. }

总结:

上面的逻辑介绍是提供一种思路,根据这个思路我们可以自定义很多的TabBar的样式,来满足我们的业务需求,比如可以修改间距、颜色、大小、宽度、添加红点等。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/黑客灵魂/article/detail/887953
推荐阅读
相关标签
  

闽ICP备14008679号