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