課程地址： 黑馬程序員HarmonyOS4+NEXT星河版入門到企業級實戰教程，一套精通鴻蒙應用開發

（本篇筆記對應課程第 16 節）

P16《15.ArkUI-狀態管理-任務統計案例》

1、實現任務進度卡片

怎么讓進度條和進度展示文本堆疊展示？需要一個新的布局容器：Stack

2、實現新增任務按鈕

3、實現任務列表渲染：

將更新任務總數量與已完成數量的邏輯封裝為一個方法，在新增任務與勾選/取消勾選時都調用這個方法：

4、實現左滑顯示刪除按鈕功能：

首先用 List 與 ListItem 改善任務列表：

**要實現左滑顯示刪除按鈕功能，需要 ListItem 的屬性 swipeAction 實現：其對應的參數是一個自定義構建函數。**強烈建議這個自定義構建函數定義為局部的，因為刪除某一個任務時需要操作任務數組：

實踐：

class Task {static id:number = 1// 任務名稱name:string = `任務${Task.id++}`// 任務狀態：是否完成finished:boolean = false
}@Styles function cardStyle(){.width('100%').height(120).padding(10).backgroundColor('#fff').borderRadius(8)
}@Entry
@Component
struct Index {// 總任務數量@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() {Row() {Column() {// 1、任務進度卡片Row(){Text('任務進度：').fontSize(22).fontWeight(FontWeight.Bold)Stack(){Progress({value : this.finishTask,total : this.totalTask,type : ProgressType.Ring})Row(){Text(this.finishTask.toString())Text(`/${this.totalTask.toString()}`)}}}.cardStyle().justifyContent(FlexAlign.SpaceEvenly)// 2、新增任務按鈕Button('新增任務').width(200).margin({top:20, bottom:20}).onClick(()=>{// 新增任務this.tasks.push(new Task())// 更新任務總數量// this.totalTask = this.tasks.lengththis.handleTaskChange()})// 3、任務列表展示List(){ForEach(this.tasks,(item:Task,index)=>{ListItem(){Row(){Text(item.name)Checkbox().select(item.finished).onChange(val => {// 更新任務狀態item.finished = val// 更新已完成任務數量// this.finishTask = this.tasks.filter(item => item.finished).lengththis.handleTaskChange()})}.cardStyle().height(60).margin({bottom:10}).justifyContent(FlexAlign.SpaceBetween)}.swipeAction({ end: this.deleteBtn(index)})})}.layoutWeight(1)}.width('100%').height('100%').justifyContent(FlexAlign.Start)}.height('100%').width('100%').padding({top:20,bottom :20, left:10,right:10}).backgroundColor('#efefef')}@Builder deleteBtn(index){Button(){Image($r('app.media.icon_delete')).width(30).fillColor(Color.Red)}.width(40).height(40).type(ButtonType.Circle).backgroundColor(Color.Red).margin(6).onClick(() => {this.tasks.splice(index,1)this.handleTaskChange()})}
}