ArkUI待办

前言

这个UI界面是参考鸿蒙开发官网的，主要涉及的知识点有手势事件绑定（gesture），文本选择弹窗（TextPickerDialog），消息提示（Toast）,以及自定义的组件@Component
1.gesture：手势事件，具体可以在鸿蒙官网查看，这里代码有两种实现方式，一种是用手势组，一种是直接使用长按手势
2.文本选择弹窗，主要有range（数据范围），onAccept方法，这个方法有一个value值，值得注意的是value可能是字符串或者字符串数组，所以需要根据需求判断或者转换一下，代码中把value转化成了字符串
3.Toast消息提示是一个消息工具，需要引入promptAction，然后调用promptAction.showToast方法，这个方法有几个比较重要的参数，message（需要提示的信息）,duration（消息提示的持续时间）,还有位置（例如top，bottom等等）

效果

点击＋号新增待办

长按进入编辑页面（长按时间默认500毫秒）

点击删除后提示信息并展示待办页面

代码

import promptAction from '@ohos.promptAction'

@Observed
class TODO {
  name: string

  constructor(name: string) {
    this.name = name
  }
}
let deleteList:TODO[] = []
@Entry
@Component
struct TODOPage {
  @State TODOs: TODO[] = [new TODO('初始待办')]
  @State TODOList: string[] = ['吃饭', '跑步', '读书', '打游戏', '敲代码', '记单词']
  @State isEdited: boolean = false
  @State deleteNum:number = 0
  build() {
    Column() {
      if (!this.isEdited) {
        Row() {
            Text('待办')
              .fontSize(30)
              .fontWeight(FontWeight.Bold)
            Text('+')
              .fontSize(30)
              .onClick(() => {
                TextPickerDialog.show({
                  range: this.TODOList,
                  onAccept: (result) => {
                    let value = Array.isArray(result.value) ? result.value[0] : result.value
                    this.TODOs.push(new TODO(value))
                  }
                })
              })

        }
        .width('100%')
        .height(80)
        .padding(10)
        .justifyContent(FlexAlign.SpaceBetween)
      } else {
        Row(){
          Text(`x已选择${this.deleteNum}项`)

            .height(80)
            .padding(10)
            Button('取消')
              .onClick(() => {
                this.isEdited = false
                deleteList = []
                this.deleteNum = 0
              })
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)

      }

      List({ space: 20 }) {
        ForEach(this.TODOs, (item: TODO, index) => {
          ListItem() {
            TODOItem({ tODOItem: item, isEdit: this.isEdited,deleteNum:this.deleteNum })
          }
          .padding(8)
          .backgroundColor(Color.White)
          .borderRadius(20)
        })
      }
      .width('95%')
      .height('90%')

      if(this.isEdited){
        Button('删除')
          .backgroundColor(Color.Red)
          .position({x:'45%',y:'95%'})
          .onClick(() => {
            for(let i=0;i<this.TODOs.length;i++){
              for(let j=0;j<deleteList.length;j++){
                if(this.TODOs[i].name==deleteList[j].name){
                  this.TODOs.splice(i,1)
                  deleteList.splice(j,1)
                }
              }
            }
            deleteList = []
            promptAction.showToast({
              message:'删除成功',
              duration: 1000,
              bottom: 50
            })
            this.isEdited = false
          })
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')
  }
}

@Component
struct TODOItem {
  @ObjectLink tODOItem: TODO
  @Link isEdit: boolean
  @State isDelete:boolean = false
  @Link deleteNum:number
  build() {
    if (!this.isEdit) {
      Row({ space: 8 }) {
        Checkbox()
          .width(20)
        Text(this.tODOItem.name)

      }
      .width('100%')
      .height(50)
      // .gesture(
      //   GestureGroup(GestureMode.Exclusive,//表示有一个手势组，并且当一个手势生效时，其他手势不生效
      //     LongPressGesture()//长按手势
      //       .onAction(() => {
      //         if (!this.isEdit) {
      //           this.isEdit = true; //进入编辑模式
      //         }
      //       }
      //       )
      //   )
      // )
      .gesture(LongPressGesture().onAction(()=>{
        this.isEdit = true//进入编辑模式
      }))
    } else {
      Row() {
        Text(this.tODOItem.name)
        Checkbox()
          .width(20)
          .shape(CheckBoxShape.ROUNDED_SQUARE)
          .onChange((value)=>{
            this.isDelete = value
            if (value) {
              deleteList.push(this.tODOItem)
              this.deleteNum = deleteList.length
            }else{
              deleteList = deleteList.filter(deleteItem=>this.tODOItem.name!==deleteItem.name)
              this.deleteNum = deleteList.length
            }
          })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%').height(50)
    }
  }
}