ArkTS 任务统计页面-编程知识

我们继续学习使用ArkTS实现一个任务进度的统计功能。

1.公共的组件、样式


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: '#1f0000',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[] = []build() {Column({space:10}) {}.width('100%').height('100%').backgroundColor('#f1f2f3')}
}

整个Demo主要分为三部分完成，最上边的任务进度卡片、中间的新增按钮和下面的任务进度列表。我们分步骤来完成

2.任务进度卡片的制作

1.排版

我们使用行标签套两个text标签来完成数字的展示使用justifyContent(FlexAlign.SpaceEvenly)来做对齐处理

        Row(){Text("任务进度").fontSize(30).fontWeight(FontWeight.Bold)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.任务条组件

我们在使用进度条组件的时候，可以查看ArkUI的官方文档。

文档中心

文档中有组件的使用方法和传值的类型。

3. 叠加容器

我们会发现数字没有嵌入我们的任务条组件内。我们需要用到叠加容器Stack。

具体文档可以参考ArkTS官方文档。就是把要叠加的容器放在Stack({

}) 中就可以了。

        // 1.任务进度卡片Row(){Text("任务进度").fontSize(30).fontWeight(FontWeight.Bold)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)}}}

这样我们的任务进度卡片就完成啦。

2.新增任务按钮的制作

        // 2.新增任务按钮Button('新增任务').width(200).onClick(()=>{// 1.新增任务this.tasks.push(new Task())// 2.更新任务数组this.totalTask = this.tasks.length})

3.任务列表的制作

我们在进行任务列表的制作的时候，需要用到一个复选框，可以参考文档来使用。

文档中心

我们使用foreach来遍历数组完成任务列表的实现，使用checkbox 来完成复选框的逻辑，使用数组方法filter来过滤选中的也就是完成的个数来改变任务条组件的状态。

通过封装一个更新任务进度的函数，来提高代码的复用性

  // 通过过滤方法 更新已完成的任务数量handleTaskChange(){// 更新任务总数量this.totalTask = this.tasks.length// 已经完成的任务数量this.finishTask = this.tasks.filter(item => item.finished).length}// 3.卡片列表ForEach(this.tasks,(item: Task,index)=>{Row(){Text(item.name).fontSize(20)Checkbox().select(item.finished).onChange(val=>{item.finished = val// 通过过滤方法 更新已完成的任务数量this.finishTask = this.tasks.filter(item => item.finished).lengththis.handleTaskChange()})}.card().justifyContent(FlexAlign.SpaceBetween)})

我们的任务进度管理初步样式就完成了。

4.滑动删除操作的实现

我们的功能需要一个向左滑动可以删除任务的按钮，并且下面应该是滚动的，我们将我们的任务列表改造成List来完成这个操作。

        // 3.卡片列表List({space:10}){ForEach(this.tasks,(item: Task,index)=>{ListItem(){Row(){Text(item.name).fontSize(20)Checkbox().select(item.finished).onChange(val=>{item.finished = val// 通过过滤方法 更新已完成的任务数量this.handleTaskChange()})}.card().justifyContent(FlexAlign.SpaceBetween)}})}.width('100%').layoutWeight(1).alignListItem(ListItemAlign.Center)

使用了list 并且使用layoutWeight属性得到剩下的所有高度，可以保证我们的高度自适应，可以下拉，解决了任务太多看不见的问题。

向左滑动出现按钮，List有可以直接使用的属性swipeAction，可以查看文档他的使用方法。


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: '#1f0000',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(){// 更新任务总数量this.totalTask = this.tasks.length// 已经完成的任务数量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}).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)// 2.新增任务按钮Button('新增任务').width(200).onClick(()=>{// 1.新增任务this.tasks.push(new Task())// 2.更新任务数组this.totalTask = this.tasks.length})// 3.卡片列表List({space:10}){ForEach(this.tasks,(item: Task,index)=>{ListItem(){Row(){Text(item.name).fontSize(20)Checkbox().select(item.finished).onChange(val=>{item.finished = val// 通过过滤方法 更新已完成的任务数量this.handleTaskChange()})}.card().justifyContent(FlexAlign.SpaceBetween)}.swipeAction({end:this.DeleteButton(index)})})}.width('100%').layoutWeight(1).alignListItem(ListItemAlign.Center)}.width('100%').height('100%').backgroundColor('#f1f2f3')}@Builder DeleteButton(index: number){Button("删除").onClick(()=>{this.tasks.splice(index,1)this.handleTaskChange()})}
}