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()//更新结果
    })
  }
}
相关推荐
SoraLuna4 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
ClkLog-开源埋点用户分析5 小时前
ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力
华为·开源·开源软件·harmonyos
mg6685 小时前
鸿蒙系统的优势 开发 环境搭建 开发小示例
华为·harmonyos
lqj_本人6 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人6 小时前
使用 Flutter 绘制一个棋盘
harmonyos
lqj_本人9 小时前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
青瓷看世界10 小时前
华为HarmonyOS打造开放、合规的广告生态 - 插屏广告
华为·harmonyos·广告投放
青瓷看世界10 小时前
华为HarmonyOS借助AR引擎帮助应用实现虚拟与现实交互的能力2-管理AR会话
华为·ar·harmonyos·虚拟现实
2301_7955586411 小时前
鸿蒙的进化史
华为·harmonyos
Swift社区11 小时前
HarmonyOS App 购物助手工具的开发与设计
harmonyos·arkts·arkui