ArkUI-12-状态管理02

@Pro @Link @Provide @Consume

代码:

复制代码
//任务类
class Task{
  static id: number=1
  //任务名称
  name:string = `任务${Task.id++}`
  //任务状态:是否完成
  finished:boolean=false
}
//统一的卡片样式
@Styles function card(){
  .width('95%')
  .padding(20)
  .backgroundColor(Color.White)
  .borderRadius(15)
  .shadow({radius:6,color:'#1F000000',offsetX:2,offsetY:4})
}

//任务完成样式
@Extend(Text)  function finishedTask(){
  .decoration({type:TextDecorationType.LineThrough})
  .fontColor('#B1B2B1')
}

@Entry
@Component
struct PropPage{
  //总任务数量
  @State totalTask:number=0
  //已经完成任务数量
  @State finishTask:number=0
  //任务数组
  @State tasks: Task[] = []

  handleTaskChange(){
    //1。更新任务数量
    this.totalTask=this.tasks.length
    //2.更新当前的状态
    this.finishTask = this.tasks.filter(item=> item.finished).length

  }
  
  build(){
    Column({space:10}){
      //1.任务进度卡片
      Row(){
        Text('任务进度:')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        Stack(){
          Progress({
            value:this.finishTask,
            total:this.totalTask,
            type:ProgressType.Ring
          })
          Row(){
            Text(this.finishTask.toString())
              .fontSize(24)
              .fontColor('#36D')
            Text(' / ' + this.totalTask.toString())
              .fontSize(24)
          }
        }

      }
      .card()
      .margin({top:20,bottom:10})
      .justifyContent(FlexAlign.SpaceEvenly)
      //2.新增任务按钮
      Button('新建任务')
        .width(200)
        .onClick(()=>{
          //1.新增任务数据
          this.tasks.push(new Task())
          //2。更新任务数量
          this.handleTaskChange()
        })

      //3.任务的列表
     List({space:10}){
       ForEach(
         this.tasks,
         (item:Task,index)=>{
           ListItem(){
             Row(){
               Text(item.name)
                 .fontSize(20)
               Checkbox()
                 .select(item.finished)
                 .onChange(val=>{
                   //1.更新当前的状态
                   item.finished = val
                   //2.更新当前的状态
                   this.handleTaskChange()

                 })
             }
             .card()
             .justifyContent(FlexAlign.SpaceBetween)
           }.swipeAction({end:this.DeleteButton(index)})//滑动功能

       })
     }
     .width('100%')
     .layoutWeight(1)
     .alignListItem(ListItemAlign.Center)


    }.width('100%')
    .height('100%')
    .backgroundColor('#1F2F3')
  }
  @Builder DeleteButton(index:number){
        Button(){//删除按钮
          Image($r('app.media.delete'))
            .fillColor(Color.White)
            .width(20)
        }
     .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(10)
    .onClick(()=>{
      this.tasks.splice(index,1)//删除当前这条
      this.handleTaskChange()//更新结果
    })
  }
}
相关推荐
HarmonyOS_SDK1 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
harmonyos
zhanshuo3 小时前
鸿蒙操作系统核心特性解析:从分布式架构到高效开发的全景技术图谱
harmonyos
塞尔维亚大汉3 小时前
鸿蒙内核源码分析(编译过程篇) | 简单案例窥视编译全过程
源码·harmonyos
别说我什么都不会3 小时前
【OpenHarmony】鸿蒙开发之ohos_beacon_library
harmonyos
不凡的凡9 小时前
鸿蒙图片相似性对比
华为·harmonyos
Georgewu11 小时前
【HarmonyOS】HAR和HSP循环依赖和依赖传递问题详解
harmonyos
Georgewu9 天前
【HarmonyOS 5】鸿蒙跨平台开发方案详解(一)
flutter·harmonyos
万少10 天前
重磅推出 🔥 HarmonyOS AI 助手 CodeGenie V6 的使用教程
前端·harmonyos
我睡醒再说10 天前
纯血HarmonyOS5 打造小游戏实践:绘画板(附源文件)
harmonyos
我睡醒再说10 天前
HarmonyOS 5 ArkTS Worker线程:构建高性能移动应用的并行计算引擎
harmonyos