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()//更新结果
    })
  }
}
相关推荐
codefish7984 小时前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
yrjw9 小时前
一款基于react-native harmonyOS 封装的【文档】文件预览查看开源库(基于Harmony 原生文件预览服务进行封装)
harmonyos
搜狐技术产品小编20231 天前
搜狐新闻直播间适配HarmonyOs实现点赞动画
华为·harmonyos
zhanshuo1 天前
ArkUI 玩转水平滑动视图:超全实战教程与项目应用解析
harmonyos·arkui
zhanshuo1 天前
ArkUI Canvas 实战:快速绘制柱状图图表组件
harmonyos·arkui
zhanshuo2 天前
手把手教你用 ArkUI 写出高性能分页列表:List + onScroll 实战解析
harmonyos
zhanshuo2 天前
深入解析 ArkUI 触摸事件机制:从点击到滑动的开发全流程
harmonyos
i仙银2 天前
鸿蒙沙箱浏览器 - SandboxFinder
app·harmonyos
Georgewu2 天前
【HarmonyOS】鸿蒙应用开发中常用的三方库介绍和使用示例
harmonyos