HarmonyOS開發案例：【待辦列表】

介紹

使用ArkTS聲明式語法和基礎組件，實現簡易待辦列表。效果為點擊某一事項，替換標簽圖片、虛化文字。效果如圖所示：

相關概念

• [ArkTS語法]：ArkTS是HarmonyOS的主要應用開發語言。ArkTS基于TypeScript（簡稱TS）語言擴展而來，是TS的超集。
• [Text組件]：顯示一段文本的組件。
• [Column組件]：沿垂直方向布局的容器。
• [Row組件]：沿水平方向布局的容器。

環境搭建

軟件要求

• [DevEco Studio]版本：DevEco Studio 3.1 Release。
• OpenHarmony SDK版本：API version 9。

硬件要求

• 開發板類型：[潤和RK3568開發板]。
• OpenHarmony系統：3.2 Release。

環境搭建

完成本篇Codelab我們首先要完成開發環境的搭建，本示例以RK3568開發板為例，參照以下步驟進行：

1. [獲取OpenHarmony系統版本]：標準系統解決方案（二進制）。以3.2 Release版本為例：
   
2. 搭建燒錄環境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發板的燒錄]
3. 搭建開發環境。
   1. 開始前請參考[工具準備]，完成DevEco Studio的安裝和開發環境配置。
   2. 開發環境配置完成后，請參考[使用工程向導]創建工程（模板選擇“Empty Ability”）。
   3. 工程創建完成后，選擇使用[真機進行調測]。
   4. 鴻蒙開發指導文檔：[qr23.cn/FBD4cY]

代碼結構解讀

本篇Codelab只對核心代碼進行講解，對于完整代碼，我們會在gitee中提供。

├──entry/src/main/ets                   // ArkTS代碼區
│  ├──common
│  │  └──constants
│  │     └──CommonConstants.ets         // 公共常量類
│  ├──entryability
│  │  └──EntryAbility.ts                // 程序入口類
│  ├──pages
│  │  └──ToDoListPage.ets               // 主頁面
│  ├──view
│  │  └──ToDoItem.ets                   // 自定義單項待辦組件
│  └──viewmodel
│     └──DataModel.ets                  // 列表數據獲取文件
└──entry/src/main/resources             // 資源文件目錄

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

構建主界面

本章節將介紹應用主頁面的實現，采用Column容器嵌套ForEach完成頁面整體布局，頁面分為兩個部分：

• 標題區：使用Text組件顯示“待辦”標題。
• 數據列表：使用ForEach循環渲染自定義組件ToDoItem。

效果如圖所示：

在工程pages目錄中，選中Index.ets，點擊鼠標右鍵 > Refactor > Rename，改名為ToDoListPage.ets。改名后，在工程entryability目錄下，把EntryAbility.ts文件中windowStage.loadContent方法的第一個參數修改為pages/ToDoListPage。

// EntryAbility.ts
onWindowStageCreate(windowStage: Window.WindowStage) {
  ...
  windowStage.loadContent('pages/ToDoListPage', (err, data) = > {
    ...
  });
}

選中工程的ets目錄，點擊鼠標右鍵 > new > Directory，新建view文件夾。選中新建的view文件夾，點擊鼠標右鍵 > new > ArkTS File，新建ToDoItem.ets文件。后續在此文件中封裝自定義組件。在ToDoListPage.ets中導入封裝的自定義組件ToDoItem，在aboutToAppear生命周期中初始化待辦數據totalTasks，在build方法中編寫主頁面布局，使用Text文本組件顯示標題，使用ForEach循環渲染自定義組件ToDoItem。

// ToDoListPage.ets
import ToDoItem'../view/ToDoItem';
...
@Entry
@Component
struct ToDoListPage {
  private totalTasks: Array< string > = [];

  aboutToAppear() {
    this.totalTasks = DataModel.getData();
  }

  build() {
    Column({ space: CommonConstants.COLUMN_SPACE }) {
      Text($r('app.string.page_title'))
        ...
      ForEach(this.totalTasks, (item: string) = > {
        ToDoItem({ content: item })
      }, (item: string) = > JSON.stringify(item))
    }
    ...
  }
}

自定義子組件

在ToDoItem.ets文件中，顯示的文本內容為入參content，使用@State修飾參數isComplete來管理當前事項的完成狀態。當點擊當前ToDoItem時，觸發Row組件的onClick事件，更新isComplete的值，isComplete的改變將會刷新使用該狀態變量的UI組件。具體表現為：當前點擊的ToDoItem中，labelIcon圖片的替換、文本透明度opacity屬性的變化、文本裝飾線decoration的顯隱。

// ToDoItem.ets
...
@Component
export default struct ToDoItem {
  private content: string = '';
  @State isComplete: boolean = false;
  
 @Builder labelIcon(icon: Resource) {
    Image(icon)
      ...
  }

  build() {
    Row() {
      if (this.isComplete) {
        this.labelIcon($r('app.media.ic_ok'));
      } else {
        this.labelIcon($r('app.media.ic_default'));
      }
      Text(this.content)
        ...
        .opacity(this.isComplete ? CommonConstants.OPACITY_COMPLETED : CommonConstants.OPACITY_DEFAULT)
        .decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None })
    }
    ...
    .onClick(() = > {
      this.isComplete = !this.isComplete;
    })
  }
}

審核編輯 黃宇