@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()//更新结果 }) } }