ArkTS List刷新行的方式一

最新推荐文章于 2024-09-26 17:24:14 发布

wangtianxia2008

最新推荐文章于 2024-09-26 17:24:14 发布

阅读量416

点赞数

文章标签：鸿蒙

本文链接：https://blog.csdn.net/wangtianxia2008/article/details/134876937

版权

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

摘要由CSDN通过智能技术生成

通过动态改变 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;
  @State rowData: RowData = null;
  @State rowState: RowState = new RowState();

  aboutToAppear() {
    this.rowRootData.setRowState(this.myIndex, this.rowState);
    if (this.rowData == null) this.rowData = this.rowRootData.getDataByIndex(this.myIndex);
  }

  build() {
    Column() {
      if (this.rowState.state) {
        this.buildWidget();
      } else {
        this.buildWidget();
      }
    }
  }

  @Builder buildWidget() {
    Column() {
      if (ControlType.TextBox == this.rowData.data["controlType"]) {
        TextArea({ placeholder: this.rowData.data["name1"], text: this.rowData.data["code1"] })
          .placeholderColor('#00bbcc')
          .placeholderFont({ size: 26 })
          .align(Alignment.Center)
          .textAlign(TextAlign.Center)
          .size({ width: '100%', height: 60 })
          .fontSize(26)
          .backgroundColor('#aabbcc')
          .onChange((text) => {
            this.rowData.data["code1"] = text;
          })
          .onClick(() => {
            this.notificationRefresh();
          })
      } else {
        Text(this.rowData.data["name1"])
          .size({ width: '100%', height: 60 })
          .fontSize(26)
          .backgroundColor('#bbbb00')
      }
    }.onClick(() => {
      this.notificationRefresh();
    })
  }

  notificationRefresh() {
    this.rowRootData.refreshAll(this.myIndex);
  }
}

export class RowRootData {
  private _dataList: Array<RowData>;
  private rowStateList: Array<RowState>;

  public get dataList(): Array<RowData> {
    return this._dataList;
  }

  public set dataList(dataList: Array<RowData>) {
    this._dataList = dataList;
    this.rowStateList = new Array<RowState>(this._dataList.length);
  }

  public getDataByIndex(index: number): RowData {
    return this._dataList[index];
  }

  public setRowState(index: number, rowState: RowState) {
    this.rowStateList[index] = rowState;
  }

  public refreshAll(excludeIndex: number = -1) {
    for (let i = 0, end = this.rowStateList.length; i < end; i++) {
      if (i != excludeIndex) {
        this.rowStateList[i].toggle();
      }
    }
  }

  public refreshAllByData(rowData?: RowData) {
    this.refreshAll(this._dataList.indexOf(rowData));
  }
}

export class RowData {
  readonly data: Object;

  constructor(data: Object) {
    this.data = data;
  }
}

class RowState {
  state: boolean;

  constructor() {
    this.state = false;
  }

  public toggle() {
    this.state = !this.state;
  }
}


function getTestDatas(end: number = 20): RowRootData {
  let dataList: Array<RowData> = new Array<RowData>(end);
  let result = new RowRootData();
  for (let i = 0; i < end; i++) {
    dataList[i] = new RowData({
      name1: "Name " + (i + 1),
      code1: "",
      controlType: ((i & 1) == 1) ? ControlType.Label : ControlType.TextBox,
    });
  }
  result.dataList = dataList;
  return result;
}