HarmonyOS NEXT 点击list的item，修改当前item的属性状态值List根据属性值变化刷新UI ?

Question

HarmonyOS NEXT 点击list的item，修改当前item的属性状态值List根据属性值变化刷新UI ?

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

关于解决方案，你可以参考如下demo:

export class ListModel { 
  title: string; 
  content: string; 
  isComplete: boolean; 
 
  constructor(title: string, content: string, isComplete: boolean) { 
    this.title = title; 
    this.content = content; 
    this.isComplete = isComplete; 
  } 
} 
@Entry 
@Component 
struct SyncPage { 
  @State ListData: Array<ListModel> = [ 
    new ListModel('标题1', '内容1', true), 
    new ListModel('标题2', '内容2', false), 
    new ListModel('标题3', '内容3', false), 
  ]; 
 
  build() { 
    Column() { 
      List() { 
        ForEach(this.ListData, (item: ListModel, index: number) => { 
          ListItem() { 
            Row() { 
              Row() { 
                Text(item.title) 
                Text(item.content).fontColor('#999999').fontSize(13) 
              } 
 
              Image(item.isComplete ? $r('app.media.ic_personal_focus') : $r('app.media.ic_personal_normal')) 
                .width(20) 
                .height(20) 
                .margin(10) 
            } 
            .justifyContent(FlexAlign.SpaceBetween) 
            .width('100%') 
            .alignItems(VerticalAlign.Center) 
            .height(80) 
            .onClick(() => { 
              let status = !item.isComplete 
              this.ListData.map((el, itemIndex) => { 
                if (itemIndex !== index) { 
                  el.isComplete = false 
                } 
              }) 
              this.ListData.splice(index, 1, new ListModel(item.title, item.content, status)) 
            }) 
          } 
        }) 
      } 
 
      Button('确认', { type: ButtonType.Normal }) 
        .onClick(() => { 
        }) 
    } 
  } 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。