ArkTS List刷新行的方式一

最新推荐文章于 2024-11-29 21:16:50 发布

wangtianxia2008

最新推荐文章于 2024-11-29 21:16:50 发布

阅读量760

点赞数 3

文章标签：鸿蒙

本文链接：https://blog.youkuaiyun.com/wangtianxia2008/article/details/134876937

版权

文章介绍了如何通过在React组件中使用`RowState`和`RowRootData`结构，动态地改变控件状态（如TextBox和Label）以实现列表刷新。作者详细展示了如何在列表项中根据数据类型切换显示不同控件并处理状态变化和数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过动态改变 RowState 的 state 属性，来实现刷新。代码如下：

// 控件类型
export enum ControlType {
  Label = 1, // 文本标签
  TextBox = 2, // 单行文本框
}

@Entry
@Component
struct TestAct {
  rowRootData: RowRootData = null;

  aboutToAppear() {
    this.rowRootData = getTestDatas();
  }

  build() {
    List({ space: 10 }) {
      ForEach(this.rowRootData.dataList, (rowData: RowData, index?: number) => {
        ListItem() {
          this.getRowWidget(rowData, index)
        }
        .width('100%')
      })
    }
  }

  @Builder getRowWidget(rowData: RowData, index: number) {
    RowView({
      rowRootData: this.rowRootData,
      myIndex: index,
      rowData: rowData,
    })
  }
}

/**
 * 注意事项：
 * * 1. 参数 rowRootData, myIndex 为必传
 * * 2. 参数 rowData 可传可不传
 */
@Component
struct RowView {
  // 为了性能，尽量不让 rowRootData 使用 @Provide装饰器 和 @Consume装饰器
  rowRootData: RowRootData;
  myIndex: number