『江鳥中原』鴻蒙——待辦清單2.0
想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：
大家好，今天，我將基于我的上一個(gè)項(xiàng)目《待辦清單》開發(fā)《待辦清單2.0》，我將對其修復(fù)了已知的bug、功能上進(jìn)行的改進(jìn)、美化了頁面、添加了中英文配置以及其他更具規(guī)范性操作等等，開源代碼我也會放到下面，同時(shí)我在代碼總添加了更多注釋，希望對初學(xué)者有所幫助。
介紹
本應(yīng)用基于Stage模型下的UIAbility進(jìn)行開發(fā)，是一款名為《待辦清單》的任務(wù)管理應(yīng)用。其界面設(shè)計(jì)簡潔明了，讓您能夠輕松地組織和管理各項(xiàng)任務(wù)。無論是處理工作項(xiàng)目、家庭瑣事還是個(gè)人目標(biāo)，本應(yīng)用都能滿足您的需求，讓您能夠輕松追蹤任務(wù)并保持高效的工作狀態(tài)。
環(huán)境搭建
我們首先需要完成HarmonyOS開發(fā)環(huán)境搭建，可參照如下步驟進(jìn)行。
軟件要求
? DevEco Studio版本：DevEco Studio 3.1 Release。
? HarmonyOS SDK版本：API version 9。
硬件要求
? 設(shè)備類型：華為手機(jī)或運(yùn)行在DevEco Studio上的華為手機(jī)設(shè)備模擬器。
? HarmonyOS系統(tǒng)：3.1.0 Developer Release。
環(huán)境搭建
- 安裝DevEco Studio，詳情請參考下載和安裝軟件。
- 設(shè)置DevEco Studio開發(fā)環(huán)境，DevEco Studio開發(fā)環(huán)境需要依賴于網(wǎng)絡(luò)環(huán)境，需要連接上網(wǎng)絡(luò)才能確保工具的正常使用，可以根據(jù)如下兩種情況來配置開發(fā)環(huán)境：
? 如果可以直接訪問Internet，只需進(jìn)行下載HarmonyOS SDK操作。
? 如果網(wǎng)絡(luò)不能直接訪問Internet，需要通過代理服務(wù)器才可以訪問，請參考配置開發(fā)環(huán)境。 - 開發(fā)者可以參考以下鏈接，完成設(shè)備調(diào)試的相關(guān)配置：
? 使用真機(jī)進(jìn)行調(diào)試? 使用模擬器進(jìn)行調(diào)試
項(xiàng)目結(jié)構(gòu)
項(xiàng)目展示
《待辦清單》APP展示。
在進(jìn)入應(yīng)用主頁后，只需點(diǎn)擊“+”號按鈕，即可輕松跳轉(zhuǎn)到新增任務(wù)的頁面。在該頁面中，您只需輸入相應(yīng)的任務(wù)內(nèi)容，然后點(diǎn)擊確定，即可完成任務(wù)的添加。完成添加后，您將自動返回到應(yīng)用的首頁，并發(fā)現(xiàn)剛剛添加的任務(wù)已經(jīng)成功顯示在列表中。請注意，新增的任務(wù)內(nèi)容不能為空，如果直接點(diǎn)擊提交而未輸入任務(wù)內(nèi)容，系統(tǒng)將彈出一個(gè)提示彈窗，提醒您任務(wù)內(nèi)容不能為空。
完成任務(wù)后，只需點(diǎn)擊任務(wù)左側(cè)的復(fù)選框，即可輕松標(biāo)記該任務(wù)為已完成。此外，您還可以通過頁面上方的篩選按鈕，對任務(wù)進(jìn)行篩選，以便更好地管理您的任務(wù)。當(dāng)您在應(yīng)用中查看任務(wù)進(jìn)度時(shí)，可以清晰地了解任務(wù)的完成情況，從而更好地管理自己的工作流程。同時(shí)，看到任務(wù)進(jìn)度的不斷改善，您會感到一種成就感，激勵(lì)自己更加努力地完成任務(wù)。
如果您發(fā)現(xiàn)任務(wù)輸入有誤或其他原因需要?jiǎng)h除該任務(wù)，只需向左滑動該任務(wù)，然后點(diǎn)擊任務(wù)右側(cè)的刪除按鈕。此時(shí)，系統(tǒng)會彈出一個(gè)提示彈窗，以防止用戶誤觸。如果您確定要?jiǎng)h除該任務(wù)，請點(diǎn)擊“是”，即可完成任務(wù)的刪除操作。
此外，該應(yīng)用還具備將數(shù)據(jù)保存到手機(jī)本地的功能。即使在清理掉手機(jī)應(yīng)用后臺后，再重新打開應(yīng)用，您之前輸入的數(shù)據(jù)仍然會被保留在應(yīng)用中，供您循環(huán)使用。這種本地存儲功能為您提供了更大的便利性，讓您在不同設(shè)備或重新安裝應(yīng)用后仍能繼續(xù)使用之前的數(shù)據(jù)。
至此，我們對《待辦清單》APP的所有功能進(jìn)行了詳細(xì)展示。接下來，我們將進(jìn)入源代碼解析環(huán)節(jié)，深入了解其內(nèi)部實(shí)現(xiàn)。讓我們一起探索這個(gè)任務(wù)管理應(yīng)用的核心部分，看看它是如何工作的。
項(xiàng)目解析
首頁 Index
此頁面是整個(gè)應(yīng)用的入口組件，主要負(fù)責(zé)管理任務(wù)列表和控制頁面的顯示。通過這個(gè)組件，用戶可以輕松地查看、添加、刪除和完成各項(xiàng)任務(wù)。同時(shí)，該組件還提供了篩選和排序功能，使用戶能夠更好地組織和管理工作任務(wù)。
該組件包含了一些狀態(tài)變量和方法，用于管理任務(wù)列表和控制頁面的顯示。它通過調(diào)用TaskHelper類提供的方法來讀取和保存任務(wù)列表數(shù)據(jù)，確保數(shù)據(jù)的一致性和完整性。同時(shí)，根據(jù)displayAddPage狀態(tài)變量的值，該組件能夠動態(tài)控制頁面的顯示，以滿足用戶的不同需求。這種設(shè)計(jì)模式使得應(yīng)用的邏輯更加清晰，提高了可維護(hù)性和可擴(kuò)展性。。
// 是否顯示添加頁面
@State displayAddPage: boolean = false
// 任務(wù)列表
@State @Watch('saveTaskList') taskList: Array<TaskModel> = []
// 總?cè)蝿?wù)數(shù)量
@State totalTask: number = 0
// 己完成任務(wù)數(shù)量
@State finishTask: number = 0Index 組件是整個(gè)應(yīng)用的入口組件，負(fù)責(zé)管理任務(wù)列表和控制頁面的顯示。它包含了一些狀態(tài)變量和方法，用于處理任務(wù)列表的展示和用戶的交互操作。在 build() 函數(shù)中，根據(jù) displayAddPage 狀態(tài)變量的值來判斷當(dāng)前應(yīng)該顯示 AddPage 還是 ListPage 組件。當(dāng) displayAddPage 為真時(shí)，頁面跳轉(zhuǎn)到 AddTask；反之，頁面則展示 ListPage。這種動態(tài)組件切換的方式使得應(yīng)用能夠根據(jù)用戶的需求靈活地展示不同的頁面，提高了用戶體驗(yàn)和交互性。
// 是否顯示添加頁面
@State displayAddPage: boolean = false
build() {
if (this.displayAddPage) {
AddPage({
displayAddPage: $displayAddPage,
taskList: $taskList,
totalTask: $totalTask,
finishTask: $finishTask
})
} else {
ListPage({
displayAddPage: $displayAddPage,
taskList: $taskList,
totalTask: $totalTask,
finishTask: $finishTask
})
}
}在 saveTaskList() 函數(shù)中，應(yīng)用通過調(diào)用 TaskHelper.saveTaskList() 方法將當(dāng)前的任務(wù)列表數(shù)據(jù)保存到本地存儲中。這種保存機(jī)制確保了即使在應(yīng)用關(guān)閉或重新啟動后，用戶輸入和修改的任務(wù)數(shù)據(jù)也能夠被保留，為用戶提供了更好的使用體驗(yàn)。
在 aboutToAppear() 函數(shù)中，應(yīng)用通過調(diào)用 TaskHelper.readTaskList() 方法來讀取本地存儲中的任務(wù)列表數(shù)據(jù)。這些數(shù)據(jù)被賦值給 taskList 狀態(tài)變量，以便在頁面顯示時(shí)使用。這種設(shè)計(jì)模式確保了數(shù)據(jù)的一致性，避免了每次打開頁面時(shí)都需要重新獲取數(shù)據(jù)，提高了應(yīng)用的性能。
// 任務(wù)列表
@State @Watch('saveTaskList') taskList: Array<TaskModel> = []
saveTaskList() {
TaskHelper.saveTaskList(this.taskList)
}
aboutToAppear() {
this.taskList = TaskHelper.readTaskList()
}新增任務(wù)頁 AddTask
此頁面主要用于展示新增任務(wù)頁的界面，并提供一個(gè)方便用戶輸入和保存任務(wù)內(nèi)容的平臺。它是待辦清單應(yīng)用中一個(gè)重要的功能模塊，幫助用戶輕松添加新的任務(wù)。通過這個(gè)頁面，用戶可以快速輸入任務(wù)內(nèi)容，并點(diǎn)擊提交按鈕將其保存到應(yīng)用中。這種設(shè)計(jì)使得用戶能夠更高效地管理他們的待辦事項(xiàng)，并在需要時(shí)輕松添加新的任務(wù)。
該頁面包含一個(gè)Boolean類型的狀態(tài)變量displayAddPage，用于控制頁面的顯示與隱藏。當(dāng)displayAddPage為真時(shí)，頁面顯示添加新任務(wù)的界面；反之，頁面則隱藏添加新任務(wù)的界面。此外，該頁面還包含一個(gè)用于存儲輸入的任務(wù)內(nèi)容的字符串類型狀態(tài)變量taskContent，以及一個(gè)數(shù)組類型狀態(tài)變量taskList，用于存儲任務(wù)列表。這些狀態(tài)變量共同協(xié)作，確保了任務(wù)數(shù)據(jù)的完整性和一致性，并為用戶提供了靈活的任務(wù)管理體驗(yàn)。
// 是否顯示添加任務(wù)頁面
@Link displayAddPage: boolean
// 用戶輸入的任務(wù)內(nèi)容
@State taskContent: string = ''
// 任務(wù)列表
@Link taskList: [TaskModel]
//總?cè)蝿?wù)數(shù)量
@Link totalTask: number
//已完成任務(wù)數(shù)量
@Link finishTask: number在頁面的構(gòu)建函數(shù) build() 中，使用了框架提供的 Column、Stack、Image、Text、TextArea 和 Button 等組件和樣式屬性，用于構(gòu)建頁面的各個(gè)元素。這些組件和屬性提供了豐富的界面元素和樣式選項(xiàng)，使得頁面更加美觀和易于使用。
在確定按鈕的 onClick 事件中，通過調(diào)用系統(tǒng)提供的 getCurrentTime() 方法獲取當(dāng)前時(shí)間，然后創(chuàng)建了一個(gè)新的 TaskModel 對象，并將其添加到 taskList 數(shù)組中。這種設(shè)計(jì)模式確保了任務(wù)數(shù)據(jù)的完整性和一致性，使得用戶添加的新任務(wù)能夠被正確地存儲和應(yīng)用。
最后，將 displayAddPage 設(shè)置為 false，隱藏該頁面。這種動態(tài)控制頁面顯示和隱藏的方式，使得應(yīng)用能夠根據(jù)用戶的需求靈活地展示不同的頁面，提高了用戶體驗(yàn)和交互性。
build() {
Column({ space: 20 }) {
Stack() {
// 返回按鈕
Column() {
Image($r('app.media.ic_public_back'))
.width(30)
.fillColor(Color.Black)
.onClick(() => {
this.displayAddPage = false;
})
}
.width('100%')
.alignItems(HorizontalAlign.Start)
// 標(biāo)題
Text($r('app.string.Add_task'))
.fontSize(20)
.fontWeight(FontWeight.Bold)
}
//用戶自定義任務(wù)名
TextArea({ text: this.taskContent, placeholder: $r('app.string.enter_task_content') })
.backgroundColor(Color.White)
.width(315)
.height(201)
.borderRadius(9)
.borderColor(Color.Gray)
.onChange((value) => {
this.taskContent = value;
})
//提交按鈕
Button({
stateEffect: true,
type: ButtonType.Normal
}) {
Text($r('app.string.submit'))
.fontColor(Color.White)
}
.width(315)
.height(50)
.borderRadius(5)
.borderColor($r('app.color.button_background'))
// 當(dāng)輸入框內(nèi)容發(fā)生變化時(shí)觸發(fā)該函數(shù)
.onClick(() => {
// 判斷輸入框內(nèi)容是否為空
if (this.taskContent.length === 0) {
try {
// 顯示提示信息
promptAction.showToast({
message: $r('app.string.not_empty'),
duration: 2000,
})
} catch (error) {
console.error(`showToast args error code is ${error.code}, message is ${error.message}`);
}
return
}
// 獲取當(dāng)前時(shí)間
systemDateTime.getCurrentTime(true).then((currentTime) => {
// 創(chuàng)建一個(gè)新的任務(wù)模型
let task = new TaskModel({
// 任務(wù)ID為當(dāng)前時(shí)間
taskId: currentTime,
// 任務(wù)內(nèi)容為輸入框內(nèi)容
taskContent: this.taskContent,
// 任務(wù)狀態(tài)初始化為未完成
isCompleted: false
})
// 將新任務(wù)添加到任務(wù)列表中
this.taskList.push(task)
// 更新任務(wù)總數(shù)量
this.totalTask = this.taskList.length
// 隱藏添加任務(wù)頁面
this.displayAddPage = false
})
})
}
.width('100%')
.height('100%')
.backgroundColor($r('app.color.background'))
.padding({ top: 30, left: 20, right: 20, bottom: 20 })
}任務(wù)展示頁 listPage
此頁面是應(yīng)用中實(shí)現(xiàn)最主要功能的組件之一，它是一個(gè)展示任務(wù)列表和管理任務(wù)的頁面組件。具體來說，該組件具備以下功能：
任務(wù)篩選：用戶可以通過篩選功能，按照不同的條件對任務(wù)進(jìn)行篩選，以便快速找到自己關(guān)心的任務(wù)。
任務(wù)展示：該組件負(fù)責(zé)展示任務(wù)列表，每個(gè)任務(wù)以清晰、簡潔的方式呈現(xiàn)在頁面上，方便用戶查看和了解任務(wù)的詳情。
任務(wù)操作：用戶可以對展示的任務(wù)進(jìn)行相應(yīng)的操作，如編輯、刪除和完成等。這些操作都提供了相應(yīng)的按鈕或入口，用戶可以方便地進(jìn)行操作。
通過這個(gè)頁面組件，用戶可以輕松地對任務(wù)進(jìn)行管理，包括查看任務(wù)的進(jìn)度、修改任務(wù)的詳情、刪除不再需要的任務(wù)等。這種設(shè)計(jì)模式使得任務(wù)管理更加高效和便捷，提高了用戶的工作效率。
該組件包含了一些狀態(tài)變量和方法，用于獲取任務(wù)列表、刪除任務(wù)等操作。這些狀態(tài)變量和方法共同協(xié)作，確保了任務(wù)數(shù)據(jù)的完整性和一致性，并為用戶提供了靈活的任務(wù)管理體驗(yàn)。
通過調(diào)用TaskHelper類提供的方法，該組件能夠從本地存儲中獲取任務(wù)列表數(shù)據(jù)。同時(shí)，它還提供了一些方法用于刪除任務(wù)，如調(diào)用TaskHelper.deleteTask()方法來刪除指定任務(wù)。這些方法的使用使得用戶可以對任務(wù)進(jìn)行靈活的管理，滿足不同場景下的需求。
此外，該組件還包含了一些事件處理函數(shù)，如點(diǎn)擊事件處理函數(shù)，用于響應(yīng)用戶的操作。通過這些事件處理函數(shù)，用戶可以方便地對任務(wù)進(jìn)行篩選、刪除和完成等操作。
//顯示添加頁面的布爾值
@Link displayAddPage: boolean
//任務(wù)列表
@Link taskList: Array<TaskModel>
//任務(wù)類型 默認(rèn)為全部
@State taskType: string = 'all'
//總?cè)蝿?wù)數(shù)量
@Link totalTask: number
//己完成任務(wù)數(shù)量
@Link finishTask: number在 build() 函數(shù)中，使用了前端框架提供的多個(gè)組件和樣式屬性，例如 Column、Text、Row、Radio、Stack、Image、List、ListItem、Checkbox 和 Button 等。這些組件和樣式屬性提供了豐富的界面元素和布局選項(xiàng)，使得頁面更加美觀和易于使用。
通過這些組件的組合和樣式屬性的設(shè)置，可以構(gòu)建出各種界面元素，如文本框、單選框、復(fù)選框、按鈕等，同時(shí)還可以對界面進(jìn)行靈活的布局和排版。這種設(shè)計(jì)模式提高了代碼的可維護(hù)性和可擴(kuò)展性，使得頁面的構(gòu)建更加高效和便捷。
此外，這些組件還提供了事件處理功能，例如點(diǎn)擊事件、選中事件等，使得用戶與頁面的交互更加自然和流暢。通過合理地使用這些組件和事件處理功能，可以構(gòu)建出功能豐富、用戶體驗(yàn)良好的頁面。
刪除彈窗提示函數(shù)用于在刪除任務(wù)時(shí)向用戶顯示一個(gè)彈窗提示，告知用戶任務(wù)已被刪除。這個(gè)函數(shù)通常會在用戶點(diǎn)擊刪除按鈕時(shí)被觸發(fā)，并在彈窗中顯示相應(yīng)的提示信息。
//刪除彈窗提示函數(shù)
deleteTask(taskId: number) {
// 彈出提示框
AlertDialog.show({
title: $r('app.string.delete'),
message: $r('app.string.sure_delete'),
autoCancel: true,
alignment: DialogAlignment.Bottom,
// 偏移量
offset: { dx: 0, dy: -20 },
// 主要按鈕
primaryButton: {
value: $r('app.string.no'),
action: () => {
}
},
// 次要按鈕
secondaryButton: {
value: $r('app.string.yes'),
action: () => {
// 根據(jù)任務(wù)id獲取任務(wù)索引
let taskIndex = TaskHelper.getIndexByTaskId(this.taskList, taskId)
// 從任務(wù)列表中刪除任務(wù)
this.taskList.splice(taskIndex, 1)
this.handleTaskChange()
}
}
})
}刪除按鈕的樣式，主要調(diào)用了刪除彈窗提示函數(shù)。
@Builder
deleteButton(taskId: number) {
//刪除按鈕
Button() {
Image($r('app.media.ic_public_delete_filled'))
.fillColor(Color.White)
.width(20)
}
.width(40)
.height(40)
.type(ButtonType.Circle)
.backgroundColor(Color.Red)
.margin(5)
.onClick(() => {
this.deleteTask(taskId)
})
}獲取任務(wù)列表的調(diào)用函數(shù)用于從數(shù)據(jù)源中獲取任務(wù)列表，并在應(yīng)用中展示出來。這個(gè)函數(shù)通常在應(yīng)用啟動或用戶觸發(fā)某些操作時(shí)被調(diào)用，以確保顯示的任務(wù)列表是最新的。
//獲取任務(wù)列表
getTaskList(): Array<TaskModel> {
// 如果任務(wù)類型為all，則返回任務(wù)列表
if (this.taskType == 'all') {
return this.taskList
// 如果任務(wù)類型為todo，則返回未完成的任務(wù)列表
} else if (this.taskType == 'todo') {
return this.taskList.filter((item) => {
// 如果任務(wù)未完成，則返回true
if (!item.isCompleted) {
return true
}
})
// 如果任務(wù)類型為finish，則返回已完成的任務(wù)列表
} else if (this.taskType == 'finish') {
return this.taskList.filter((item) => {
// 如果任務(wù)已完成，則返回true
if (item.isCompleted) {
return true
}
})
}
}在頁面中，為了方便用戶篩選任務(wù)，通常會提供一個(gè)用于顯示任務(wù)類型的Radio按鈕組。用戶可以通過選擇不同的Radio按鈕來篩選任務(wù)，例如選擇“全部”來顯示所有任務(wù)，選擇“待辦”來只顯示待辦任務(wù)，選擇“完成”來只顯示已完成的任務(wù)。
//標(biāo)題
Text($r('app.string.my_task'))
.fontSize(20)
.fontWeight(FontWeight.Bold)
//三個(gè)按鈕可選項(xiàng)
Row() {
Column() {
Text($r('app.string.all'))
// 單選框，組為taskType
Radio({ value: 'all', group: 'taskType' })
.onChange((isSelect) => {
if (isSelect) {
// 任務(wù)類型設(shè)置為all
this.taskType = 'all'
}
})// 設(shè)置是否被選中
.checked(this.taskType == 'all' ? true : false)
}
Column() {
Text($r('app.string.todo'))
Radio({ value: 'todo', group: 'taskType' })
.onChange((isSelect) => {
if (isSelect) {
this.taskType = 'todo'
}
})
.checked(this.taskType == 'todo' ? true : false)
}
Column() {
Text($r('app.string.finish'))
Radio({ value: 'finish', group: 'taskType' })
.onChange((isSelect) => {
if (isSelect) {
this.taskType = 'finish'
}
})
.checked(this.taskType == 'finish' ? true : false)
}
}
.width('100%')
.justifyContent(FlexAlign.SpaceAround)與之前的內(nèi)容相比，2.0版本新增了任務(wù)進(jìn)度卡片。此卡片用于展示任務(wù)的完成進(jìn)度，其構(gòu)建包含Text、Stack、Progress和Row等組件，并具備各種樣式屬性，全面定義了任務(wù)進(jìn)度卡片的布局與外觀。通過展示任務(wù)進(jìn)度，用戶可以更清晰地了解任務(wù)的完成情況，從而更有效地管理和分配工作。這種進(jìn)度顯示有助于團(tuán)隊(duì)成員及時(shí)掌握任務(wù)動態(tài)，提高工作效率。當(dāng)用戶看到任務(wù)進(jìn)度逐漸改善，他們會充滿成就感與動力，更積極地完成剩余任務(wù)。
// 任務(wù)進(jìn)度卡片
Row() {
Text('任務(wù)進(jìn)度:')
.fontSize(24)
.fontWeight(FontWeight.Bold)
Stack() {
Progress({
value: this.finishTask,
total: this.totalTask,
type: ProgressType.Ring
})
.width(70)
Row() {
Text(this.finishTask.toString())
.fontSize(18)
.fontColor($r('app.color.button_background'))
Text('/ ' + this.totalTask.toString())
.fontSize(18)
}
}
}
.card()
.margin({ top: 10 })
.justifyContent(FlexAlign.SpaceEvenly)任務(wù)列表部分使用了 List 和 ListItem 組件來展示任務(wù)，這樣可以提供清晰、有序的列表展示效果。每個(gè)任務(wù)包含復(fù)選框、任務(wù)內(nèi)容和刪除按鈕，這些組件的使用提供了以下功能：
復(fù)選框：通過復(fù)選框，用戶可以勾選任務(wù)以標(biāo)記為完成。這有助于用戶跟蹤任務(wù)的進(jìn)度和狀態(tài)。在實(shí)現(xiàn)時(shí)，確保復(fù)選框的狀態(tài)與任務(wù)的實(shí)際完成狀態(tài)保持一致，并提供適當(dāng)?shù)氖录幚砗瘮?shù)來更新任務(wù)狀態(tài)。
任務(wù)內(nèi)容：使用任務(wù)內(nèi)容組件來展示任務(wù)的詳細(xì)信息，如標(biāo)題、描述或其他相關(guān)字段。確保任務(wù)內(nèi)容的展示方式清晰、易于閱讀，并根據(jù)需要調(diào)整樣式和格式。
刪除按鈕：每個(gè)任務(wù)旁邊都應(yīng)有一個(gè)刪除按鈕，允許用戶刪除單個(gè)任務(wù)。在實(shí)現(xiàn)時(shí)，應(yīng)確保刪除操作是安全的，并遵循應(yīng)用的數(shù)據(jù)管理規(guī)范。同時(shí)，提供適當(dāng)?shù)拇_認(rèn)提示，確保用戶了解刪除操作是不可逆的。
事件處理：為復(fù)選框和刪除按鈕添加事件處理函數(shù)。當(dāng)用戶勾選復(fù)選框時(shí)，更新相應(yīng)的任務(wù)狀態(tài)；當(dāng)用戶點(diǎn)擊刪除按鈕時(shí)，觸發(fā)刪除任務(wù)的邏輯。
動態(tài)更新：根據(jù)用戶的操作和任務(wù)狀態(tài)的改變，動態(tài)更新任務(wù)列表的展示內(nèi)容。例如，已完成的任務(wù)可以顯示為不同的顏色或標(biāo)記，以區(qū)分未完成的任務(wù)。
響應(yīng)式設(shè)計(jì)：確保任務(wù)列表在不同設(shè)備和屏幕尺寸上的展示效果良好，提供響應(yīng)式布局。這包括調(diào)整組件的大小、間距等樣式屬性，以確保在不同屏幕尺寸下的顯示效果一致。
通過這些組件和功能的組合，任務(wù)列表部分能夠提供清晰、直觀的任務(wù)展示和管理功能，使用戶能夠方便地完成任務(wù)標(biāo)記和刪除操作。同時(shí)，保持良好的UI/UX設(shè)計(jì)和動態(tài)更新能力，提供流暢的用戶體驗(yàn)。
//顯示任務(wù)(可滑動)
Column({ space: 10 }) {
List({ space: 10 }) {
ForEach(
this.getTaskList(),
(item: TaskModel, index) => {
ListItem() {
Row() {
//完成待辦后的樣式
Text(item.taskContent)// 設(shè)置左邊距
.margin({ left: 10 })// 根據(jù)任務(wù)是否完成，設(shè)置文本的樣式
.decoration({
type: item.isCompleted ? TextDecorationType.LineThrough : TextDecorationType.None
})// 設(shè)置寬度
.width('70%')// 設(shè)置行數(shù)
.maxLines(1)// 設(shè)置文本溢出時(shí)的樣式
.textOverflow({ overflow: TextOverflow.Ellipsis })
// 添加一個(gè)空行
Blank()
// 創(chuàng)建復(fù)選框
Checkbox()// 設(shè)置復(fù)選框的值
.select(item.isCompleted)// 當(dāng)復(fù)選框的值發(fā)生變化時(shí)，執(zhí)行回調(diào)函數(shù)
.onChange((value) => {
// 獲取任務(wù)id在任務(wù)列表中的索引
let taskIndex = TaskHelper.getIndexByTaskId(this.taskList, item.taskId)
// 獲取任務(wù)列表中對應(yīng)任務(wù)id的任務(wù)
let oldTask = this.taskList[taskIndex]
// 創(chuàng)建新的任務(wù)模型
let newTask = new TaskModel({
taskId: item.taskId,
taskContent: oldTask.taskContent,
isCompleted: value
})
// 將新的任務(wù)模型替換任務(wù)列表中對應(yīng)任務(wù)id的任務(wù)
this.taskList[taskIndex] = newTask
// 更新任務(wù)狀態(tài)
item.isCompleted = value
// 更新任務(wù)數(shù)量
this.handleTaskChange()
})
}
.card()
.justifyContent(FlexAlign.SpaceBetween)
}
// @ts-ignore
.swipeAction({ end: this.deleteButton(item.taskId) })
}
)
}
.width('100%')
.height('53%')
.alignListItem(ListItemAlign.Center)
}
.margin({ top: 5, bottom: 5 })此外，頁面底部通常會設(shè)置一個(gè)用于添加新任務(wù)的按鈕。這個(gè)按鈕的作用是提供一個(gè)入口，使用戶可以方便地創(chuàng)建并添加新任務(wù)。
//新增任務(wù)按鈕
Column() {
Button({
// 設(shè)置按鈕類型
type: ButtonType.Circle,
// 設(shè)置按鈕狀態(tài)
stateEffect: true
}) {
Text('+')
.fontSize(50)
.fontColor(Color.White)
}
.width(60)
.height(60)
.borderColor($r('app.color.button_background'))
.onClick(() => {
// 顯示添加頁面
this.displayAddPage = true
this.handleTaskChange()
})
}
.width('100%')
.alignItems(HorizontalAlign.End)任務(wù)模型類 TaskModel
這是一個(gè)名為TaskModel的類，它表示一個(gè)任務(wù)模型。該類具有三個(gè)屬性：taskId（任務(wù)ID）、taskContent（任務(wù)內(nèi)容）和isCompleted（任務(wù)是否已完成）。它還包含一個(gè)構(gòu)造函數(shù)，用于初始化這些屬性。構(gòu)造函數(shù)接受一個(gè)對象作為參數(shù)，對象包含了taskId、taskContent和isCompleted這三個(gè)屬性的值。在構(gòu)造函數(shù)中，使用傳入的對象來初始化類的屬性。
這個(gè)類的作用是定義一個(gè)任務(wù)的數(shù)據(jù)模型，包含了任務(wù)的基本信息和屬性。通過這個(gè)類，可以創(chuàng)建和管理任務(wù)對象，并確保數(shù)據(jù)的一致性和完整性。
在具體實(shí)現(xiàn)中，這個(gè)類通常包含以下屬性和方法：
- ID：表示任務(wù)的唯一標(biāo)識符。每個(gè)任務(wù)都應(yīng)該有一個(gè)唯一的ID，以便在應(yīng)用中進(jìn)行識別和跟蹤。
- 內(nèi)容：表示任務(wù)的具體內(nèi)容或描述。這可以是文本、數(shù)字或其他數(shù)據(jù)類型，具體取決于任務(wù)的內(nèi)容和要求。
- 完成狀態(tài)：表示任務(wù)的完成狀態(tài)。通常是一個(gè)布爾值或枚舉類型，用于標(biāo)識任務(wù)是否已完成。
除了這些基本屬性外，這個(gè)類還可以包含其他相關(guān)的方法和邏輯，以便更好地管理任務(wù)數(shù)據(jù)。
export class TaskModel {
// 任務(wù)id
taskId: number = 0
// 任務(wù)內(nèi)容
taskContent: string = ''
// 任務(wù)是否完成
isCompleted: boolean = false
constructor({ taskId:taskId, taskContent:taskContent, isCompleted:isCompleted}) {
this.taskId = taskId
this.taskContent = taskContent
this.isCompleted = isCompleted
}
}文件保存工具類 FileHelper
這段代碼是一個(gè)名為FileHelper的類，用于處理文件讀寫操作。它包含了兩個(gè)靜態(tài)方法：saveJsonData和readJsonData。
saveJsonData方法用于將JSON數(shù)據(jù)保存到文件中。它接受兩個(gè)參數(shù)：jsonObj表示要保存的JSON對象，fileName表示要保存的文件名。在方法內(nèi)部，它使用@ohos.file.fs模塊來獲取應(yīng)用文件路徑，并根據(jù)文件路徑新建并打開文件。然后將JSON對象轉(zhuǎn)換為字符串，并寫入文件中。
// 保存Json數(shù)據(jù)
static saveJsonData(jsonObj: any, fileName: string) {
// 獲取應(yīng)用文件路徑
let context = getContext(this) as common.UIAbilityContext
let filesDir = context.filesDir // 獲取應(yīng)用的文件夾路徑
let filePath = `${filesDir}/${fileName}` // 將文件名與文件夾路徑連接起來，得到完整的文件路徑
// 新建并打開文件
// 嘗試打開文件
try {
// 以寫入模式打開文件，并設(shè)置為只讀、清空內(nèi)容、創(chuàng)建模式
let file = fs.openSync(filePath, fs.OpenMode.WRITE_ONLY | fs.OpenMode.TRUNC | fs.OpenMode.CREATE)
// 將 JSON 對象轉(zhuǎn)換為字符串
let jsonStr = JSON.stringify(jsonObj)
// 輸出 JSON 字符串
console.log("HMOS:" + jsonStr)
// 將 JSON 字符串寫入文件
fs.writeSync(file.fd, jsonStr)
// 關(guān)閉文件
fs.closeSync(file)
} catch (e) {
// 輸出文件寫入錯(cuò)誤信息
console.log(`write file error ${e}`);
}
}readJsonData方法用于從文件中讀取JSON數(shù)據(jù)。它接受一個(gè)參數(shù)fileName，表示要讀取的文件名。在方法內(nèi)部，它同樣使用@ohos.file.fs模塊來獲取應(yīng)用文件路徑，并讀取文件中的文本內(nèi)容。然后將讀取到的文本內(nèi)容轉(zhuǎn)換為JSON對象并返回。
// 讀取Json數(shù)據(jù)
static readJsonData(fileName: string): any {
// 獲取應(yīng)用文件路徑
let context = getContext(this) as common.UIAbilityContext
let filesDir = context.filesDir // 獲取應(yīng)用的文件夾路徑
let filePath = `${filesDir}/${fileName}` // 將文件名與文件夾路徑連接起來，得到完整的文件路徑
var userStr = ""
try {
// 從文件路徑中讀取內(nèi)容并將其存儲在userStr變量中
userStr = fs.readTextSync(filePath)
} catch (e) {
console.log(`read file error ${e}`);
}
if (userStr.length > 0) {
console.log(userStr); // 輸出userStr
return JSON.parse(userStr); // 將userStr解析為JSON對象并返回
}
return {}
}這個(gè)FileHelper類為用戶提供了簡單快捷的保存和讀取JSON數(shù)據(jù)的方法，使其在各種應(yīng)用中能夠輕松處理文件讀寫操作。
工具調(diào)用類 TaskHelper
這是一個(gè)名為TaskHelper的類，用于處理任務(wù)列表數(shù)據(jù)的讀取和保存。它包含了三個(gè)靜態(tài)方法：getIndexByTaskId、saveTaskList和readTaskList。
getIndexByTaskId方法用于根據(jù)任務(wù)ID在任務(wù)列表中查找對應(yīng)的索引位置。它接受兩個(gè)參數(shù)：taskList表示任務(wù)列表數(shù)組，taskId表示要查找的任務(wù)ID。在方法內(nèi)部，它遍歷任務(wù)列表，查找匹配的任務(wù)ID，并返回對應(yīng)的索引位置。如果找不到匹配的任務(wù)ID，就返回-1。
// 按任務(wù)id獲取索引
static getIndexByTaskId(taskList: Array<TaskModel>, taskId: number) {
// 遍歷任務(wù)列表
for (let i = 0; i < taskList.length; i++) {
// 如果任務(wù)id相等
if (taskList[i].taskId == taskId) {
// 返回索引
return i
}
}
// 如果沒有找到，返回-1
return -1
}saveTaskList方法用于將任務(wù)列表數(shù)據(jù)保存到文件中。它接受一個(gè)參數(shù)taskList，表示要保存的任務(wù)列表數(shù)組。在方法內(nèi)部，它調(diào)用FileHelper的saveJsonData方法，將任務(wù)列表數(shù)據(jù)保存到名為’task.data’的文件中。
// 保存任務(wù)列表
static saveTaskList(taskList: Array<TaskModel>) {
// 使用FileHelper類的saveJsonData方法，將任務(wù)列表數(shù)據(jù)保存到task.data文件中
FileHelper.saveJsonData(taskList, 'task.data')
}readTaskList方法用于從文件中讀取任務(wù)列表數(shù)據(jù)。它調(diào)用FileHelper的readJsonData方法來讀取名為’task.data’的文件中的數(shù)據(jù)，并將讀取到的JSON數(shù)據(jù)轉(zhuǎn)換為TaskModel對象的數(shù)組。
// 讀取任務(wù)列表
static readTaskList(): Array<TaskModel> {
// 讀取任務(wù)數(shù)據(jù)
let jsonData = FileHelper.readJsonData('task.data')
// 創(chuàng)建任務(wù)列表
let taskList: Array<TaskModel> = []
// 將json數(shù)據(jù)賦值給任務(wù)列表
Object.assign(taskList, jsonData)
// 返回任務(wù)列表
return taskList
}這個(gè)TaskHelper類簡化了任務(wù)列表數(shù)據(jù)的讀取和保存過程，為應(yīng)用提供了高效的任務(wù)列表數(shù)據(jù)管理功能。
總結(jié)
隨著鴻蒙系統(tǒng)的日益普及，開發(fā)一款高效、實(shí)用的待辦清單APP變得至關(guān)重要。本文將詳細(xì)介紹《待辦清單2.0》鴻蒙APP的開發(fā)過程，從需求分析、UI設(shè)計(jì)、業(yè)務(wù)邏輯到本地存儲等方面進(jìn)行闡述，旨在幫助開發(fā)者更好地理解和應(yīng)用鴻蒙系統(tǒng)的開發(fā)框架。
首先，進(jìn)行需求分析是至關(guān)重要的。通過研究用戶的需求，可以更好地指導(dǎo)后續(xù)的UI設(shè)計(jì)、功能開發(fā)和優(yōu)化方向。因此，在設(shè)計(jì)中注重簡潔直觀的操作界面。其次，UI設(shè)計(jì)是提升用戶體驗(yàn)的關(guān)鍵環(huán)節(jié)。在《待辦清單2.0》中，采用了扁平化設(shè)計(jì)風(fēng)格，使得界面更加現(xiàn)代化和簡潔。同時(shí)，通過使用卡片式布局和醒目的顏色，提高了任務(wù)的視覺沖擊力，使得用戶可以更快地獲取任務(wù)信息。另外，業(yè)務(wù)邏輯是APP的核心部分，決定了APP如何處理數(shù)據(jù)和響應(yīng)用戶操作。《待辦清單2.0》實(shí)現(xiàn)了創(chuàng)建、篩選、刪除和完成等基礎(chǔ)任務(wù)管理功能。此外，還實(shí)現(xiàn)了子任務(wù)、標(biāo)簽和備注等功能，以滿足用戶更復(fù)雜的需求。此外，本地存儲是確保APP在無網(wǎng)絡(luò)環(huán)境下正常工作的關(guān)鍵。在《待辦清單2.0》中，我們采用了存儲文件進(jìn)行本地存儲。這使得用戶可以在沒有網(wǎng)絡(luò)的情況下添加、編輯和刪除任務(wù)。
最終，我深刻地領(lǐng)悟到開發(fā)一款完備的APP是一項(xiàng)極為艱巨的任務(wù)。僅僅構(gòu)思一個(gè)功能并將其實(shí)現(xiàn)是相對簡單的，然而，在這個(gè)過程中，我們經(jīng)常會遭遇大大小小的bug。修復(fù)這些bug可能需要耗費(fèi)大量的時(shí)間和精力，無論是通過百度搜索解決方案，還是借鑒他人的代碼，我們都需要不斷地調(diào)試和優(yōu)化。然而，請記住，困難只是暫時(shí)的，總會有解決的方法。在經(jīng)歷風(fēng)雨之后，絢麗的彩虹總會出現(xiàn)。因此，面對挑戰(zhàn)時(shí)，請不要輕易放棄，要相信曙光就在前方。
項(xiàng)目源碼
https://gitee.com/bananana-ice/harmonyos-todolist.git。
