上一節(jié)已經(jīng)完成了listItem數(shù)據(jù)的聯(lián)動，添加數(shù)據(jù)后，可以更改進度條顯示，并更新進度條數(shù)據(jù)至外部數(shù)據(jù)

細節(jié)完善：當進度條為100%時，當前數(shù)據(jù)透明度更改

import getCurrentTime from '../common/utils/DateUtil';
import DataModel,{ TaskItemBean } from '../viewModel/DataModel';
import ProgressEditPanel from './ProgressEditPanel';
@Component
export default struct TargetListItem {
  taskItem?: TaskItemBean
  @State latestProgress?: number = 0;
  @State updateDate?: string = '';
  @State isExpanded: boolean = false;
  index:number = 0

  aboutToAppear() {
    this.latestProgress = this.taskItem?.progressValue;
    this.updateDate = this.taskItem?.updateDate;
  }

  build() {
    Column() {
      this.TargetItem()
      if (this.isExpanded){
        ...
    }
   ...
    .backgroundColor(Color.White)
    .opacity(
        this.latestProgress === 100 ? 0.4 : 1
    )
  }

33.gif

添加數(shù)據(jù)時，整體進度更改；

import AddTargetDialog from '../view/AddTargetDialog'
import TargetInformation from '../view/TargetInformation'
import TargetList from '../view/TargetList'
import DataModel, { TaskItemBean } from '../viewModel/DataModel'
import getCurrentTime from '../common/utils/DateUtil'

@Entry
@Component
struct Index {
...
  @State@Watch('onProgressChanged') overAllProgressChanged: boolean = false;

  onProgressChanged() {
    this.totalTasksNumber = this.targetData.length;
    this.completedTasksNumber = this.targetData.filter((item: TaskItemBean) => {return item.progressValue === 100}).length;
    this.latestUpdateDate = getCurrentTime();
  }
....
  saveTask(taskName: string) {
    ...
    this.overAllProgressChanged = !this.overAllProgressChanged;
  }
 ...

sloop.gif

此時，我們發(fā)現(xiàn)，添加數(shù)據(jù)時，頂部的進度數(shù)據(jù)已經(jīng)更新，但是，當進度條100%時，數(shù)據(jù)沒刷新。

=> 進度條達到100%時，刷新整體進度已完成數(shù)據(jù)；
此時，需要用到跨組件傳遞數(shù)據(jù)，@Provide和@Consume

import AddTargetDialog from '../view/AddTargetDialog'
import TargetInformation from '../view/TargetInformation'
import TargetList from '../view/TargetList'
import DataModel, { TaskItemBean } from '../viewModel/DataModel'
import getCurrentTime from '../common/utils/DateUtil'

@Entry
@Component
struct Index {
    ...
  @Provide @Watch('onProgressChanged') overAllProgressChanged: boolean = false;
    ...

思路：當進度條進度發(fā)生更改時，改變overAllProgressChanged的值，給父控件傳遞信號，父控件接收到信號，調(diào)用onProgressChanged方法，更新進度條已完成數(shù)。

import getCurrentTime from '../common/utils/DateUtil';
import DataModel,{ TaskItemBean } from '../viewModel/DataModel';
import ProgressEditPanel from './ProgressEditPanel';
@Component
export default struct TargetListItem {
   ...
  @Consume overAllProgressChanged: boolean;
    ...
  build() {
    Column() {
      this.TargetItem()
      if (this.isExpanded){
        ProgressEditPanel({
           ...
            let result = DataModel.updateProgress(this.index, this.latestProgress, this.updateDate);
            if (result) {
              this.overAllProgressChanged = !this.overAllProgressChanged;
            }
          }
        })
      }
    }
    ...

sloop.gif

至此，我們發(fā)現(xiàn)listI的所有功能已完成。

ps:
官網(wǎng)案例還有新增數(shù)據(jù)時，有編輯功能，點擊編輯，還有全選功能，就不更新了，可以慢慢嘗試；
理清楚思路很重要，千萬不要一個勁的CV！
同時，還可以對項目進行擴展，比如數(shù)據(jù)生成后，點擊item可以更改之前輸入的內(nèi)容等。
總之：理清楚思路，明白先做什么，再做什么

gitee代碼鏈接：https://gitee.com/runitwolf/target-management