class Task{ //id 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}) } //任务进度 @Entry @Component struct Page2 { //跟新当前状态 //跟新已完成的任务数 changetext(){ //跟新当前状态 // 更新任务总量 this.totalTask =this.tasks.length //跟新已完成的任务数 this.finishTask =this.tasks.filter(item => item.finished).length } //总任务数 @State totalTask: number =0 //已完成的任务数 @State finishTask: number =0 //任务数组 @State tasks: Task[] = [] build() { Column(){ //r任务进度卡片 Row(){ Text('任务进度').fontSize(30).fontWeight(FontWeight.Bold) Row(){ Stack(){ //环行进度条*********** Progress({ value:this.finishTask, total:this.totalTask, type:ProgressType.Ring }).width(100) Row(){ Text(this.finishTask.toString()).fontSize(24).fontColor('#36D') Text('/'+this.totalTask.toString()).fontSize(24) } } } } .card() .margin({top:20,bottom:10}) .justifyContent(FlexAlign.SpaceEvenly) Button('新增任务').width(200) //点击新增任务数据 .onClick(() =>{ this.tasks.push(new Task()) // 更新任务总量 // this.totalTask =this.tasks.length this.changetext() }) List({space:10}){ ForEach( this.tasks, (item:Task,index:number) =>{ ListItem(){ Row() { Text(item.name).fontSize(20) Checkbox().select(item.finished) .onChange( val =>{ //跟新当前状态 item.finished =val //跟新已完成的任务数 this.changetext() // this.finishTask =this.tasks.filter(item => item.finished).length }) }.card() .justifyContent(FlexAlign.SpaceBetween) } .swipeAction({end:this.DeleteButton(index)}) } ) } .width('100%') .layoutWeight(1) } .height('100%') .width('100%') .backgroundColor('#F1F2F3') } @Builder DeleteButton(index: number){ Button(){ Image($r('app.media.zfb_nav7')).fillColor(Color.Black).width(20) } .width(40).height(40).type(ButtonType.Circle).backgroundColor(Color.Red).margin(5) .onClick(() =>{ this.tasks.splice(index,1) this.changetext() }) } }
带删除功能的任务进度harmonyOs next
最新推荐文章于 2024-08-18 20:38:33 发布