鸿蒙~ArkUI基础 list 第三篇 之编辑列表

class toDo {
  name: string;

  constructor(name:string) {
    this.name = name
  }
}

@Entry
@Component
struct Main {
  @State toDos: toDo[]  = []
  @State idEditMode: boolean = false
  @State selectItems:Object[] = []

  private availableThings: string[] = ['读书', '运动', '旅游', '听音乐', '看电影', '唱歌'];

  build() {

    Column() {
      Row() {
        Text("待办").fontSize(25).fontStyle(FontStyle.Italic)
        Blank()
        Image($r('app.media.icon'))
          .size({width:30, height:30})
          .onClick(() => {{
            TextPickerDialog.show({
              range:this.availableThings,
              onAccept: (value: TextPickerResult) => {
                this.toDos.push(new toDo(this.availableThings[value.index])); // 新增列表项数据toDoData
              },
            })
          }})
      }
      .width("100%").padding({left: 20, right: 20, top: 20})


      List({space: 20}) {
        ForEach(this.toDos, (item: toDo) => {
          ListItem() {
            Row() {
              Text(item.name)
                .fontSize(20)
              Blank()
              if (this.idEditMode) {
                Checkbox()
                  .onChange((isSelectd) => {
                     if (isSelectd) {
                       this.selectItems.push(item)
                     } else {
                       let index = this.selectItems.indexOf(item)
                       if (index !== -1) {
                         this.selectItems.splice(index, 1) // 取消勾选时，则将此项从selectedItems中删除
                       }
                     }
                  })
              }
            }
            .width("100%")
            .padding({left: 10, right: 10})
          }.width("90%")
          .height(50)
          .margin(10)
          .borderRadius(16)
          .backgroundColor(this.idEditMode? Color.Orange: Color.Gray)
          .alignSelf(ItemAlign.Center)
           .gesture(
             LongPressGesture()
               .onAction(()=> {
                 if (!this.idEditMode) {
                   this.idEditMode = true;
                   this.selectItems.push(item)
                 }
               })
           )
        })
      }

      .margin({top: 30})
      .width("100%")
      .alignListItem(ListItemAlign.Center)

      if (this.idEditMode) {
        Button("删除")
          .width("90%")
          .borderRadius(15)
          .backgroundColor(this.selectItems.length > 0 ? Color.Red : Color.Pink)
          .margin({ left: 20, right: 20 })
          .height(60)
          .onClick(() => {
            let leftData = this.toDos.filter((item) => {
              return this.selectItems.find((selectedItem) => selectedItem !== item);
            })

            this.toDos = leftData;

            this.idEditMode = false;
          })
      }
    }
    .padding({right:10})
    .size({width: "100%",height: "100%"})

  }
}

微信图片_20231225213014.png