想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：

51CTO 鴻蒙開發(fā)者社區(qū)

https://ost.51cto.com

大家好，今天，我將基于我的上一個(gè)項(xiàng)目《待辦清單》開發(fā)《待辦清單2.0》，我將對(duì)其修復(fù)了已知的bug、功能上進(jìn)行的改進(jìn)、美化了頁面、添加了中英文配置以及其他更具規(guī)范性操作等等，開源代碼我也會(huì)放到下面，同時(shí)我在代碼總添加了更多注釋，希望對(duì)初學(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)境搭建

1. 安裝DevEco Studio，詳情請(qǐng)參考下載和安裝軟件。
2. 設(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ù)器才可以訪問，請(qǐng)參考配置開發(fā)環(huán)境。
3. 開發(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)擊“+”號(hào)按鈕，即可輕松跳轉(zhuǎn)到新增任務(wù)的頁面。在該頁面中，您只需輸入相應(yīng)的任務(wù)內(nèi)容，然后點(diǎn)擊確定，即可完成任務(wù)的添加。完成添加后，您將自動(dòng)返回到應(yīng)用的首頁，并發(fā)現(xiàn)剛剛添加的任務(wù)已經(jīng)成功顯示在列表中。請(qǐng)注意，新增的任務(wù)內(nèi)容不能為空，如果直接點(diǎn)擊提交而未輸入任務(wù)內(nèi)容，系統(tǒng)將彈出一個(gè)提示彈窗，提醒您任務(wù)內(nèi)容不能為空。

完成任務(wù)后，只需點(diǎn)擊任務(wù)左側(cè)的復(fù)選框，即可輕松標(biāo)記該任務(wù)為已完成。此外，您還可以通過頁面上方的篩選按鈕，對(duì)任務(wù)進(jìn)行篩選，以便更好地管理您的任務(wù)。當(dāng)您在應(yīng)用中查看任務(wù)進(jìn)度時(shí)，可以清晰地了解任務(wù)的完成情況，從而更好地管理自己的工作流程。同時(shí)，看到任務(wù)進(jìn)度的不斷改善，您會(huì)感到一種成就感，激勵(lì)自己更加努力地完成任務(wù)。

如果您發(fā)現(xiàn)任務(wù)輸入有誤或其他原因需要?jiǎng)h除該任務(wù)，只需向左滑動(dòng)該任務(wù)，然后點(diǎn)擊任務(wù)右側(cè)的刪除按鈕。此時(shí)，系統(tǒng)會(huì)彈出一個(gè)提示彈窗，以防止用戶誤觸。如果您確定要?jiǎng)h除該任務(wù)，請(qǐng)點(diǎn)擊“是”，即可完成任務(wù)的刪除操作。

此外，該應(yīng)用還具備將數(shù)據(jù)保存到手機(jī)本地的功能。即使在清理掉手機(jī)應(yīng)用后臺(tái)后，再重新打開應(yīng)用，您之前輸入的數(shù)據(jù)仍然會(huì)被保留在應(yīng)用中，供您循環(huán)使用。這種本地存儲(chǔ)功能為您提供了更大的便利性，讓您在不同設(shè)備或重新安裝應(yīng)用后仍能繼續(xù)使用之前的數(shù)據(jù)。

至此，我們對(duì)《待辦清單》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)變量的值，該組件能夠動(dòng)態(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 = 0

Index 組件是整個(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。這種動(dòng)態(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ù)保存到本地存儲(chǔ)中。這種保存機(jī)制確保了即使在應(yīng)用關(guān)閉或重新啟動(dòng)后，用戶輸入和修改的任務(wù)數(shù)據(jù)也能夠被保留，為用戶提供了更好的使用體驗(yàn)。

在 aboutToAppear() 函數(shù)中，應(yīng)用通過調(diào)用 TaskHelper.readTaskList() 方法來讀取本地存儲(chǔ)中的任務(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)容的平臺(tá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è)用于存儲(chǔ)輸入的任務(wù)內(nèi)容的字符串類型狀態(tài)變量taskContent，以及一個(gè)數(shù)組類型狀態(tài)變量taskList，用于存儲(chǔ)任務(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 對(duì)象，并將其添加到 taskList 數(shù)組中。這種設(shè)計(jì)模式確保了任務(wù)數(shù)據(jù)的完整性和一致性，使得用戶添加的新任務(wù)能夠被正確地存儲(chǔ)和應(yīng)用。

最后，將 displayAddPage 設(shè)置為 false，隱藏該頁面。這種動(dòng)態(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ù)篩選：用戶可以通過篩選功能，按照不同的條件對(duì)任務(wù)進(jìn)行篩選，以便快速找到自己關(guān)心的任務(wù)。

任務(wù)展示：該組件負(fù)責(zé)展示任務(wù)列表，每個(gè)任務(wù)以清晰、簡潔的方式呈現(xiàn)在頁面上，方便用戶查看和了解任務(wù)的詳情。

任務(wù)操作：用戶可以對(duì)展示的任務(wù)進(jìn)行相應(yīng)的操作，如編輯、刪除和完成等。這些操作都提供了相應(yīng)的按鈕或入口，用戶可以方便地進(jìn)行操作。

通過這個(gè)頁面組件，用戶可以輕松地對(duì)任務(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類提供的方法，該組件能夠從本地存儲(chǔ)中獲取任務(wù)列表數(shù)據(jù)。同時(shí)，它還提供了一些方法用于刪除任務(wù)，如調(diào)用TaskHelper.deleteTask()方法來刪除指定任務(wù)。這些方法的使用使得用戶可以對(duì)任務(wù)進(jìn)行靈活的管理，滿足不同場(chǎng)景下的需求。

此外，該組件還包含了一些事件處理函數(shù)，如點(diǎn)擊事件處理函數(shù)，用于響應(yīng)用戶的操作。通過這些事件處理函數(shù)，用戶可以方便地對(duì)任務(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í)還可以對(duì)界面進(jìn)行靈活的布局和排版。這種設(shè)計(jì)模式提高了代碼的可維護(hù)性和可擴(kuò)展性，使得頁面的構(gòu)建更加高效和便捷。

此外，這些組件還提供了事件處理功能，例如點(diǎn)擊事件、選中事件等，使得用戶與頁面的交互更加自然和流暢。通過合理地使用這些組件和事件處理功能，可以構(gòu)建出功能豐富、用戶體驗(yàn)良好的頁面。

刪除彈窗提示函數(shù)用于在刪除任務(wù)時(shí)向用戶顯示一個(gè)彈窗提示，告知用戶任務(wù)已被刪除。這個(gè)函數(shù)通常會(huì)在用戶點(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)用啟動(dò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ù)，通常會(huì)提供一個(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ù)動(dòng)態(tài)，提高工作效率。當(dāng)用戶看到任務(wù)進(jìn)度逐漸改善，他們會(huì)充滿成就感與動(dòng)力，更積極地完成剩余任務(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ù)的邏輯。

動(dòng)態(tài)更新：根據(jù)用戶的操作和任務(wù)狀態(tài)的改變，動(dòng)態(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ì)和動(dòng)態(tài)更新能力，提供流暢的用戶體驗(yàn)。

//顯示任務(wù)(可滑動(dòng))
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ù)列表中對(duì)應(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ù)列表中對(duì)應(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 })

此外，頁面底部通常會(huì)設(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è)對(duì)象作為參數(shù)，對(duì)象包含了taskId、taskContent和isCompleted這三個(gè)屬性的值。在構(gòu)造函數(shù)中，使用傳入的對(duì)象來初始化類的屬性。

這個(gè)類的作用是定義一個(gè)任務(wù)的數(shù)據(jù)模型，包含了任務(wù)的基本信息和屬性。通過這個(gè)類，可以創(chuàng)建和管理任務(wù)對(duì)象，并確保數(shù)據(jù)的一致性和完整性。

在具體實(shí)現(xiàn)中，這個(gè)類通常包含以下屬性和方法：

• ID：表示任務(wù)的唯一標(biāo)識(shí)符。每個(gè)任務(wù)都應(yīng)該有一個(gè)唯一的ID，以便在應(yīng)用中進(jìn)行識(shí)別和跟蹤。
• 內(nèi)容：表示任務(wù)的具體內(nèi)容或描述。這可以是文本、數(shù)字或其他數(shù)據(jù)類型，具體取決于任務(wù)的內(nèi)容和要求。
• 完成狀態(tài)：表示任務(wù)的完成狀態(tài)。通常是一個(gè)布爾值或枚舉類型，用于標(biāo)識(shí)任務(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對(duì)象，fileName表示要保存的文件名。在方法內(nèi)部，它使用@ohos.file.fs模塊來獲取應(yīng)用文件路徑，并根據(jù)文件路徑新建并打開文件。然后將JSON對(duì)象轉(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 對(duì)象轉(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對(duì)象并返回。

// 讀取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)容并將其存儲(chǔ)在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對(duì)象并返回
    }
    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ù)列表中查找對(duì)應(yīng)的索引位置。它接受兩個(gè)參數(shù)：taskList表示任務(wù)列表數(shù)組，taskId表示要查找的任務(wù)ID。在方法內(nèi)部，它遍歷任務(wù)列表，查找匹配的任務(wù)ID，并返回對(duì)應(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對(duì)象的數(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ù)邏輯到本地存儲(chǔ)等方面進(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)用戶操作?！洞k清單2.0》實(shí)現(xiàn)了創(chuàng)建、篩選、刪除和完成等基礎(chǔ)任務(wù)管理功能。此外，還實(shí)現(xiàn)了子任務(wù)、標(biāo)簽和備注等功能，以滿足用戶更復(fù)雜的需求。此外，本地存儲(chǔ)是確保APP在無網(wǎng)絡(luò)環(huán)境下正常工作的關(guān)鍵。在《待辦清單2.0》中，我們采用了存儲(chǔ)文件進(jìn)行本地存儲(chǔ)。這使得用戶可以在沒有網(wǎng)絡(luò)的情況下添加、編輯和刪除任務(wù)。

最終，我深刻地領(lǐng)悟到開發(fā)一款完備的APP是一項(xiàng)極為艱巨的任務(wù)。僅僅構(gòu)思一個(gè)功能并將其實(shí)現(xiàn)是相對(duì)簡單的，然而，在這個(gè)過程中，我們經(jīng)常會(huì)遭遇大大小小的bug。修復(fù)這些bug可能需要耗費(fèi)大量的時(shí)間和精力，無論是通過百度搜索解決方案，還是借鑒他人的代碼，我們都需要不斷地調(diào)試和優(yōu)化。然而，請(qǐng)記住，困難只是暫時(shí)的，總會(huì)有解決的方法。在經(jīng)歷風(fēng)雨之后，絢麗的彩虹總會(huì)出現(xiàn)。因此，面對(duì)挑戰(zhàn)時(shí)，請(qǐng)不要輕易放棄，要相信曙光就在前方。

項(xiàng)目源碼

https://gitee.com/bananana-ice/harmonyos-todolist.git。

想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：

51CTO 鴻蒙開發(fā)者社區(qū)

https://ost.51cto.com