上一節(jié)已經(jīng)完成了listItem數(shù)據(jù)的聯(lián)動(dòng),添加數(shù)據(jù)后壮锻,可以更改進(jìn)度條顯示瞳收,并更新進(jìn)度條數(shù)據(jù)至外部數(shù)據(jù)
細(xì)節(jié)完善:當(dāng)進(jìn)度條為100%時(shí),當(dāng)前數(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
)
}
添加數(shù)據(jù)時(shí)猴伶,整體進(jìn)度更改飞苇;
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;
}
...
此時(shí),我們發(fā)現(xiàn)蜗顽,添加數(shù)據(jù)時(shí)布卡,頂部的進(jìn)度數(shù)據(jù)已經(jīng)更新,但是雇盖,當(dāng)進(jìn)度條100%時(shí)忿等,數(shù)據(jù)沒刷新。
=> 進(jìn)度條達(dá)到100%時(shí)崔挖,刷新整體進(jìn)度已完成數(shù)據(jù)贸街;
此時(shí)庵寞,需要用到跨組件傳遞數(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;
...
思路:當(dāng)進(jìn)度條進(jìn)度發(fā)生更改時(shí)薛匪,改變overAllProgressChanged的值捐川,給父控件傳遞信號(hào),父控件接收到信號(hào)逸尖,調(diào)用onProgressChanged方法古沥,更新進(jìn)度條已完成數(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;
}
}
})
}
}
...
至此娇跟,我們發(fā)現(xiàn)listI的所有功能已完成岩齿。
ps:
官網(wǎng)案例還有新增數(shù)據(jù)時(shí),有編輯功能苞俘,點(diǎn)擊編輯盹沈,還有全選功能,就不更新了吃谣,可以慢慢嘗試乞封;
理清楚思路很重要,千萬不要一個(gè)勁的CV岗憋!
同時(shí)歌亲,還可以對(duì)項(xiàng)目進(jìn)行擴(kuò)展,比如數(shù)據(jù)生成后澜驮,點(diǎn)擊item可以更改之前輸入的內(nèi)容等。
總之:理清楚思路惋鸥,明白先做什么杂穷,再做什么