HarmonyOS開(kāi)發(fā)案例：【待辦列表】

介紹

使用ArkTS聲明式語(yǔ)法和基礎(chǔ)組件，實(shí)現(xiàn)簡(jiǎn)易待辦列表。效果為點(diǎn)擊某一事項(xiàng)，替換標(biāo)簽圖片、虛化文字。效果如圖所示：

相關(guān)概念

• [ArkTS語(yǔ)法]：ArkTS是HarmonyOS的主要應(yīng)用開(kāi)發(fā)語(yǔ)言。ArkTS基于TypeScript（簡(jiǎn)稱TS）語(yǔ)言擴(kuò)展而來(lái)，是TS的超集。
• [Text組件]：顯示一段文本的組件。
• [Column組件]：沿垂直方向布局的容器。
• [Row組件]：沿水平方向布局的容器。

環(huán)境搭建

軟件要求

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

硬件要求

• 開(kāi)發(fā)板類型：[潤(rùn)和RK3568開(kāi)發(fā)板]。
• OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開(kāi)發(fā)環(huán)境的搭建，本示例以RK3568開(kāi)發(fā)板為例，參照以下步驟進(jìn)行：

1. [獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：
   
2. 搭建燒錄環(huán)境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開(kāi)發(fā)板的燒錄](méi)
3. 搭建開(kāi)發(fā)環(huán)境。
   1. 開(kāi)始前請(qǐng)參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
   2. 開(kāi)發(fā)環(huán)境配置完成后，請(qǐng)參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”）。
   3. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。
   4. 鴻蒙開(kāi)發(fā)指導(dǎo)文檔：[qr23.cn/FBD4cY]

代碼結(jié)構(gòu)解讀

本篇Codelab只對(duì)核心代碼進(jìn)行講解，對(duì)于完整代碼，我們會(huì)在gitee中提供。

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

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

構(gòu)建主界面

本章節(jié)將介紹應(yīng)用主頁(yè)面的實(shí)現(xiàn)，采用Column容器嵌套ForEach完成頁(yè)面整體布局，頁(yè)面分為兩個(gè)部分：

• 標(biāo)題區(qū)：使用Text組件顯示“待辦”標(biāo)題。
• 數(shù)據(jù)列表：使用ForEach循環(huán)渲染自定義組件ToDoItem。

效果如圖所示：

在工程pages目錄中，選中Index.ets，點(diǎn)擊鼠標(biāo)右鍵 > Refactor > Rename，改名為T(mén)oDoListPage.ets。改名后，在工程entryability目錄下，把EntryAbility.ts文件中windowStage.loadContent方法的第一個(gè)參數(shù)修改為pages/ToDoListPage。

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

選中工程的ets目錄，點(diǎn)擊鼠標(biāo)右鍵 > new > Directory，新建view文件夾。選中新建的view文件夾，點(diǎn)擊鼠標(biāo)右鍵 > new > ArkTS File，新建ToDoItem.ets文件。后續(xù)在此文件中封裝自定義組件。在ToDoListPage.ets中導(dǎo)入封裝的自定義組件ToDoItem，在aboutToAppear生命周期中初始化待辦數(shù)據(jù)totalTasks，在build方法中編寫(xiě)主頁(yè)面布局，使用Text文本組件顯示標(biāo)題，使用ForEach循環(huán)渲染自定義組件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文件中，顯示的文本內(nèi)容為入?yún)ontent，使用@State修飾參數(shù)isComplete來(lái)管理當(dāng)前事項(xiàng)的完成狀態(tài)。當(dāng)點(diǎn)擊當(dāng)前ToDoItem時(shí)，觸發(fā)Row組件的onClick事件，更新isComplete的值，isComplete的改變將會(huì)刷新使用該狀態(tài)變量的UI組件。具體表現(xiàn)為：當(dāng)前點(diǎn)擊的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;
    })
  }
}

審核編輯 黃宇