HarmonyOS踩坑 实现点击选中

效果自己复制代码看吧

完整代码:

import { ComponentContent, font, promptAction } from '@kit.ArkUI';
import { projects, ProjectsDataSource, TimeTable, TimeTableDataSource } from './TimeTableDataSource';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State tv2Msg: string = "tv2"
  itemGroupArray: TimeTableDataSource = new TimeTableDataSource([]);

  aboutToAppear(): void {
    let timeTable: TimeTable[] = [
      {
        title: '星期一',
        projects: [{ projects: '语文', isSelect: false }, { projects: '数学', isSelect: false },
          { projects: '英语', isSelect: false }]
      },
      {
        title: '星期二',
        projects: [{ projects: '物理', isSelect: false }, { projects: '化学', isSelect: false },
          { projects: '生物', isSelect: false }]
      },
      {
        title: '星期三',
        projects: [{ projects: '历史', isSelect: false }, { projects: '地理', isSelect: false },
          { projects: '政治', isSelect: false }]
      },
      {
        title: '星期四',
        projects: [{ projects: '美术', isSelect: false }, { projects: '音乐', isSelect: false },
          { projects: '体育', isSelect: false }]
      }
    ];
    this.itemGroupArray = new TimeTableDataSource(timeTable);
  }

  @Builder
  itemHead(text: string) {
    Text(text)
      .fontSize(20)
      .backgroundColor(0xAABBCC)
      .width('100%')
      .padding(10)
  }

  @Builder
  itemFoot(num: number) {
    Text('共' + num + '节课')
      .fontSize(16)
      .backgroundColor(0xAABBCC)
      .width('100%')
      .padding(5)
  }

  build() {
    Column() {

      List({ space: 20 }) {
        LazyForEach(this.itemGroupArray, (item: TimeTable, position: number) => {
          MyItemGroup({
            item: item,
            block: (childPosition: number) => {
              let data = this.itemGroupArray.getData(position)

              // ****************************************************
              data.title = "测试" + new Date().getTime() // 重点 不修改会有问题
              // ****************************************************

              data.projects[childPosition].isSelect = !data.projects[childPosition].isSelect
              this.itemGroupArray.change(position, data);

            }
          })
        }, (item: TimeTable) => item.title) // LazyForEach依赖键值判断是否刷新子组件
      }
      .layoutWeight(1)
      .sticky(StickyStyle.Header | StickyStyle.Footer)
      .scrollBar(BarState.Off)
    }
    .backgroundColor($r('sys.color.background_primary'))
  }
}


class HeadBuilderParams {
  text: string | Resource;

  constructor(text: string | Resource) {
    this.text = text;
  }
}

class FootBuilderParams {
  num: number | Resource;

  constructor(num: number | Resource) {
    this.num = num;
  }
}

@Builder
function itemHead(params: HeadBuilderParams) {
  Text(params.text)
    .fontSize(20)
    .height('48vp')
    .width('100%')
    .padding(10)
    .backgroundColor($r('sys.color.background_tertiary'))
}

@Builder
function itemFoot(params: FootBuilderParams) {
  Text('共' + params.num + '节课')
    .fontSize(20)
    .height('48vp')
    .width('100%')
    .padding(10)
    .backgroundColor($r('sys.color.background_tertiary'))
}

@Component
struct MyItemGroup {
  item: TimeTable = { title: '', projects: [] };
  header?: ComponentContent<HeadBuilderParams> = undefined;
  footer?: ComponentContent<FootBuilderParams> = undefined;
  headerParam = new HeadBuilderParams(this.item.title);
  footerParam = new FootBuilderParams(this.item.projects.length);
  itemArr: ProjectsDataSource = new ProjectsDataSource([]);

  aboutToAppear(): void {
    this.header = new ComponentContent(this.getUIContext(), wrapBuilder(itemHead), this.headerParam);
    this.footer = new ComponentContent(this.getUIContext(), wrapBuilder(itemFoot), this.footerParam);
    this.itemArr = new ProjectsDataSource(this.item.projects);
  }

  GetHeader() {
    this.header?.update(new HeadBuilderParams(this.item.title));
    return this.header;
  }

  GetFooter() {
    this.footer?.update(new FootBuilderParams(this.item.projects.length));
    return this.footer;
  }

  block: (position: number) => void = () => {
  }

  build() {
    ListItemGroup({
      headerComponent: this.GetHeader(),
      footerComponent: this.GetFooter()
    }) {
      LazyForEach(this.itemArr, (project: projects, position: number) => {
        ListItem() {
          Text(project.projects)
            .width('100%')
            .height(100)
            .fontSize(20)
            .backgroundColor(project.isSelect ? Color.Red : Color.Yellow)
            .textAlign(TextAlign.Center)
            .onClick(() => {
              this.block(position)
            })
        }
      }, (item: string) => item)
    }
    .divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线
  }
}

// ListDataSource.ets
export class TimeTableDataSource implements IDataSource {
  private list: TimeTable[] = [];
  private listeners: DataChangeListener[] = [];

  constructor(list: TimeTable[]) {
    this.list = list;
  }

  totalCount(): number {
    return this.list.length;
  }

  getData(index: number): TimeTable {
    return this.list[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      this.listeners.splice(pos, 1);
    }
  }

  // 通知控制器数据变化
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    });
  }

  // 修改第一个元素
  public change1stItem(temp: TimeTable): void {
    this.list[0] = temp;
    this.notifyDataChange(0);
  }
  // 修改第一个元素
  public change(position:number, temp: TimeTable): void {
    this.list[position] = temp;
    this.notifyDataChange(position);
  }
}

export class ProjectsDataSource implements IDataSource {
  private list: projects[] = [];

  constructor(list: projects[]) {
    this.list = list;
  }

  totalCount(): number {
    return this.list.length;
  }

  getData(index: number): projects {
    return this.list[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
  }
}

export interface TimeTable {
  title: string;
  projects: projects[];
}

export interface projects{
  projects:string,
  isSelect:boolean
}