HarmonyOS 鸿蒙Next Tabs使用$$双向绑定索引,导致数据源在更新时索引重置为0

发布于 1周前 作者 bupafengyu 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Tabs使用$$双向绑定索引,导致数据源在更新时索引重置为0

如描述,在一个刷新场景,当前Tabs索引已经非0,触发刷新后,更新Tabs绑定的List数据源,更新后Tabs内部更新索引为0。 问题如何在更新数据源的同时,不引起索引的变化,还保持当前索引选中?  Tips: 为了保证tab刷新,重新了Tabs中ForEach的keyGenerator,每次都是uuid

2 回复

参考demo

@Entry

@Component

struct Second {

  @State tabs: Array<string> = []

  @State currentIndex: number = 0;

  private index = 0

  private tabsController: TabsController = new TabsController()

  build() {

    Column() {

      Button() {

        Text('Refresh')

          .fontSize(25)

          .fontWeight(FontWeight.Bold)

          .textAlign(TextAlign.Center)

      }

      .type(ButtonType.Capsule)

      .margin({

        top: 10

      })

      .backgroundColor('#0D9FFB')

      .width('40%')

      .height('5%')

      .onClick(() => {

        this.reloadTabs()

      })

      this.tabBuilder()

    }.width("100%")

  }

  @Builder tabBuilder2(index: number, name: string) {

    Column() {

      Text(name)

        .fontColor(this.currentIndex === index ? Color.Red : Color.Blue)

        .fontSize(16)

        .fontWeight(this.currentIndex === index ? 500 : 400)

        .lineHeight(22)

        .margin({ top: 17, bottom: 7 })

      Divider()

        .strokeWidth(2)

        .color('#007DFF')

        .opacity(this.currentIndex === index ? 1 : 0)

    }.width('100%')

  }

  @Builder

  tabBuilder() {

    Tabs({ controller: this.tabsController, index: $$this.currentIndex }) {

      ForEach(this.tabs, (item: string, index: number) => {

        TabContent() {

          Text(item).width('100%').height('100%')

        }.tabBar(this.tabBuilder2(index,item))

      }, (item:string) => item)

    }.width('100%')

    .height('100%')

    .barPosition(BarPosition.Start)

    .scrollable(false)

    .barMode(BarMode.Fixed)

    .barHeight(50)

    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

    .onChange((index: number) => {

    })

    .onTabBarClick((index) => {

      this.currentIndex = index

    })

  }

  aboutToAppear(): void {

    this.reloadTabs()

  }

  reloadTabs() {

    this.tabs = []

    for (let index = 0; index < 5; index++) {

      this.tabs.push("Tab" + this.index + "-" + index)

    }

    this.index++

  }

}

更多关于HarmonyOS 鸿蒙Next Tabs使用$$双向绑定索引,导致数据源在更新时索引重置为0的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next Tabs使用$$双向绑定索引时,若遇到数据源更新导致索引重置为0的问题,这通常是因为数据绑定机制在处理动态数据源更新时存在逻辑上的不匹配。

鸿蒙系统的数据绑定框架在监测到数据源变化时,可能会重新初始化视图状态,包括索引值。若数据源以非预期方式被替换或重置,绑定到Tabs组件的索引值也会受到影响,从而被重置。

为了解决这个问题,可以尝试以下方法:

  • 确保数据源在更新时保持原有引用,避免整体替换,而是对数据源进行部分更新或追加操作。
  • 检查绑定逻辑,确保索引值不会因数据源变化而重新计算或重置。
  • 使用更稳定的数据绑定策略,如基于唯一标识符的绑定,而非依赖于易变的索引值。

若上述方法无法直接解决问题,可能是鸿蒙系统当前版本或特定环境下的已知问题。在这种情况下,建议直接联系鸿蒙系统的技术支持团队获取更专业的帮助。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部