HarmonyOS鸿蒙Next中Tabs能否实现增删的能力

HarmonyOS鸿蒙Next中Tabs能否实现增删的能力 Tabs怎么样使用增加或删除页签的能力类似浏览器？

3 回复

@Entry @Component struct Drag { @State tabArray: Array<number> = [0, 1] @State focusIndex: number = 0 @State pre: number = 0 @State index: number = 0 private controller: TabsController = new TabsController() @State test: boolean = false

// 单独的页签 @Builder Tab(tabName: string, tabItem: number, tabIndex: number) { Row({ space: 20 }) { Text(tabName).fontSize(18) Image($r(‘app.media.startIcon’)).width(20).height(20) .onClick(() => { let pre = tabIndex if (this.focusIndex === pre && pre === this.tabArray.length - 1) { this.tabArray.splice(tabIndex, 1) this.focusIndex = pre - 1 console.log(this.focusIndex + ‘this’) this.controller.changeIndex(pre - 1) this.test = true setTimeout(() => { this.test = false }, 400) } else if (this.focusIndex === pre) { this.tabArray.splice(pre, 1) } else if (this.focusIndex > pre) { this.focusIndex = this.focusIndex - 1 this.tabArray.splice(pre, 1) this.controller.changeIndex(this.focusIndex) } else { this.tabArray.splice(pre, 1) } }) } .justifyContent(FlexAlign.Center) .constraintSize({ minWidth: 35 }) .width(120) .height(30) .borderRadius({ topLeft: 10, topRight: 10 }) .backgroundColor(tabIndex === this.focusIndex ? “#ffffffff” : “#ffb7b7b7”) .onClick(() => { this.test = true this.focusIndex = tabIndex this.controller.changeIndex(tabIndex) }) }

build() { Column() { Column() { Row({ space: 7 }) { Scroll() { Row() { ForEach(this.tabArray, (item: number, index: number) => { this.Tab(“页签 " + item, item, index) }) } .justifyContent(FlexAlign.Start) } .align(Alignment.Start) .scrollable(ScrollDirection.Horizontal) .scrollBar(BarState.Off) .width(‘90%’) .backgroundColor(”#ffb7b7b7")

      Image($r('app.media.startIcon')).onClick(() => {
        if (this.tabArray.length === 0) {
          this.tabArray = [0]
          this.focusIndex = 0
        } else {
          this.tabArray.push(this.tabArray[this.tabArray.length - 1] + 1)
          console.log('tabArray ' + this.tabArray)
          this.focusIndex = this.tabArray.length - 1
          console.log('this.focusIndex ' + this.focusIndex)
          let add = this.focusIndex
          if (add == 1) {
            this.test = true
          }
          setTimeout(() => {
            this.controller.changeIndex(add)
          }, 100)
        }
      }).width(20).height(20)
    }
    .width('100%')
    .backgroundColor("#ffb7b7b7")

    Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
      ForEach(this.tabArray, (item: number, index: number) => {
        TabContent() {
          Text('我是页面 ' + item + " 的内容")
            .height(300)
            .width('100%')
            .fontSize(30)
        }
      })
    }
    .onChange((index: number) => {
      if (index !== 0 && this.tabArray.length > 2) {
        this.focusIndex = index
        console.log('change focusIndex ' + this.focusIndex)
      } else if (this.tabArray.length == 1) {
        this.focusIndex = index
      } else if (this.tabArray.length == 2 && this.focusIndex == 1) {
        if (this.test) {
          this.focusIndex = 1
        } else {
          this.focusIndex = 0
        }
      } else if (!this.test) {
        console.log('foo ' + index)
        this.focusIndex = index
      }
    })
  }
  .alignItems(HorizontalAlign.Start)
  .width('100%')
}
.height('100%')

} }

更多关于HarmonyOS鸿蒙Next中Tabs能否实现增删的能力的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，Tabs组件可以通过TabController动态实现增删功能。使用addTab()方法新增标签页，removeTab()删除指定标签页。TabController需配合Tabs组件使用，通过修改tabs数组数据源来更新UI。示例代码片段：

let controller: TabController = new TabController()
this.tabs = ['Tab1', 'Tab2']
// 新增
this.tabs.push('Tab3')
// 删除
this.tabs.splice(index, 1)
controller.changeIndex(0)

需注意删除当前选中tab时会自动跳转至相邻tab。

在HarmonyOS Next中，Tabs组件确实可以实现动态增删页签的能力。以下是实现方式：

  1. 基本实现原理：
  • 使用Tabs组件结合TabContent组件
  • 通过数据驱动的方式管理页签列表
  • 修改数据源后调用刷新方法
  1. 关键代码示例：
// 定义页签数据
@State tabs: Array<string> = ['Tab1', 'Tab2', 'Tab3']

build() {
  Tabs() {
    ForEach(this.tabs, (item) => {
      TabContent() {
        // 页签内容
      }.tabBar(item)
    })
  }
}

// 添加页签
addTab() {
  this.tabs.push(`Tab${this.tabs.length + 1}`)
}

// 删除页签
removeTab(index: number) {
  this.tabs.splice(index, 1)
}
  1. 注意事项：
  • 需要配合ForEach实现动态渲染
  • 增删操作后会自动触发UI更新
  • 可以通过修改tabBar属性自定义页签样式

这种实现方式类似于浏览器的标签页管理，通过维护数据源的变化来动态更新Tabs组件。

回到顶部