鸿蒙Next中如何实现list的主动刷新

在鸿蒙Next开发中，如何实现List组件的主动刷新？目前通过修改数据源后调用notifyDataChanged()方法没有生效，是否有其他特定的API或正确的刷新流程？求具体代码示例和注意事项。

2 回复

鸿蒙Next里想刷新List？简单！用@State装饰器标记数据源，改数据后框架自动触发UI更新。或者调用List组件的invalidate()方法手动刷新。记住：数据驱动视图，改数据比改UI更优雅哦～

更多关于鸿蒙Next中如何实现list的主动刷新的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过以下方式实现List的主动刷新：

1. 使用@State状态管理

@Entry
@Component
struct ListRefreshExample {
  [@State](/user/State) dataList: string[] = ['Item 1', 'Item 2', 'Item 3']

  build() {
    Column() {
      Button('刷新列表')
        .onClick(() => {
          // 修改数据触发刷新
          this.dataList = [...this.dataList, `Item ${this.dataList.length + 1}`]
        })
      
      List({ space: 10 }) {
        ForEach(this.dataList, (item: string) => {
          ListItem() {
            Text(item)
              .fontSize(18)
              .padding(10)
          }
        })
      }
      .layoutWeight(1)
    }
    .padding(10)
  }
}

2. 使用@Observed和@ObjectLink

[@Observed](/user/Observed)
class ListData {
  items: string[] = ['A', 'B', 'C']
}

@Entry
@Component
struct ObjectLinkExample {
  [@ObjectLink](/user/ObjectLink) listData: ListData = new ListData()

  build() {
    Column() {
      Button('更新数据')
        .onClick(() => {
          this.listData.items.push(`New Item ${this.listData.items.length + 1}`)
          // 需要重新赋值触发刷新
          this.listData.items = [...this.listData.items]
        })
      
      List() {
        ForEach(this.listData.items, (item: string) => {
          ListItem() {
            Text(item)
          }
        })
      }
    }
  }
}

3. 强制刷新方法

// 方法一：重新赋值数组
refreshList() {
  this.dataList = [...this.dataList]
}

// 方法二：使用slice创建新数组
refreshList() {
  this.dataList = this.dataList.slice()
}

关键点：

  • 使用@State装饰器管理列表数据
  • 通过重新赋值数组来触发UI刷新
  • 避免直接修改原数组，应创建新数组
  • List组件会自动响应数据变化进行重渲染

这种方法适用于需要手动触发列表刷新的场景，如数据更新、下拉刷新等。

回到顶部