HarmonyOS 鸿蒙Next 在Tabs组件中实现中间item凸起

HarmonyOS 鸿蒙Next 在Tabs组件中实现中间item凸起 项目中底部导航栏是tabs组件搭建的，目前需要实现tabs中间的按钮凸起效果，咨询下有好的实现方案吗？

2 回复

可以参考以下demo

@Entry
@Component
struct onePage {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  tabTitle: string[] = ['健康', '商城', '预警中心', '消息', '我的']

  @Builder imgText(item: string, index: number) {
    if (index === 2) {
      Column() {
        Column() {
          Image($r('app.media.startIcon'))
            .height(50)
            .height(50)
            .objectFit(ImageFit.Contain)
            .borderRadius(100)
        }
        .height(60)
        .width(60)
        .offset({ y: -20 })
        .backgroundColor(Color.White)
        .borderRadius(100)
      }
      .width('20%')
      .height('100%')
      .backgroundColor(Color.Blue)
      .justifyContent(FlexAlign.Center)

    } else {
      Column({ space: 10 }) {
        Image($r('app.media.startIcon'))
          .height(40)
          .objectFit(ImageFit.Contain)
        Text(item)
          .fontSize(15)
      }
      .width('20%')
      .height('100%')
      .backgroundColor(Color.Blue)
      .onClick(() => {
        this.currentIndex = index
        this.controller.changeIndex(this.currentIndex)
      })
    }
  }

  @Builder bottomBuilder() {
    Row() {
      ForEach(this.tabTitle, (item: string, index: number) => {
        this.imgText(item, index)
      })
    }
    .justifyContent(FlexAlign.SpaceEvenly)
    .width('100%')
    .height('10%')
  }

  build() {
    Column() {
      Tabs({ index: this.currentIndex, controller: this.controller, barPosition: BarPosition.End }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#cccccc')
        }
      }
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width('100%')

    }
    .overlay(this.bottomBuilder(), { align: Alignment.End, offset: { x: 0, y: 360 } })
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 在Tabs组件中实现中间item凸起的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，若想在Tabs组件中实现中间item凸起效果，可以通过自定义Tabs组件的样式和布局来实现。具体步骤如下：

  1. 自定义Tabs布局：首先，需要自定义Tabs的布局文件，确保每个Tab项可以独立控制其样式。这通常涉及到修改Tabs组件的子项布局，可能需要创建一个新的XML布局文件来定义Tab项的外观。

  2. 设置凸起效果：在自定的Tab项布局中，为中间的Tab项设置特定的样式，如增加背景色、边框或者调整其高度，以实现凸起效果。这可以通过在布局文件中为特定的Tab项设置样式属性来完成。

  3. 动态调整：由于Tabs组件中的item数量可能变化，因此需要通过代码动态判断哪个是中间的Tab项，并应用上述自定义样式。这通常涉及到在Tabs组件的适配器或相关逻辑中编写代码，以在运行时调整Tab项的样式。

  4. 测试和调整：在应用了上述更改后，需要仔细测试Tabs组件在不同设备和屏幕尺寸上的表现，确保凸起效果符合预期，并且用户体验良好。

请注意，由于HarmonyOS的具体API和组件实现可能随着版本更新而变化，因此上述步骤可能需要根据实际使用的HarmonyOS版本进行调整。如果问题依旧没法解决请联系官网客服, 官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部