ArkTS List刷新行的方式一

通过动态改变 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;
}