介紹

該場景多用于待辦事項管理、文件管理、備忘錄的記錄管理等。

效果圖預覽

使用說明：

• 點擊添加按鈕，選擇需要添加的待辦事項。
• 點擊左側checkbox按鈕，待辦事項狀態變更為已完成。
• 左滑單個待辦事項，點擊刪除按鈕后，當前待辦事項被刪除。

實現思路

1. List組件綁定@State修飾的數組變量toDoData。

@State toDoData: ToDo[] = []; // 待辦事項

List({ initialIndex: 0, space: STYLE_CONFIG.LIST_ITEM_GUTTER }) {
   ForEach(this.toDoData, (toDoItem: ToDo, index: number) => {
      ...
   })
}

2. ListItem組件設置左滑動效swipeAction
   屬性，使得單個ListItem可以進行左右滑動，并顯示自定義的UIBuilder。

@Builder
itemEnd(item: ToDo) {
   ...
}

ListItem(){
    ...
}
.swipeAction({ end: this.itemEnd(toDoItem), edgeEffect: SwipeEdgeEffect.Spring }) // 設置item左滑顯示視圖

屬性。

3. 新增/刪除列表項，更新數組變量toDoData，并同時更新List組件UI(MVVM)，具體可參考代碼文件ToDoList。

高性能知識點

不涉及

工程結構&模塊類型

pendingitems                                    // har
|---model
|   |---ToDo.ets                                // TODO類定義
|   |---ConstData.ets                           // 常量數據
|---pages
|   |---ToDoList.ets                            // 列表項功能增刪實現頁面
|   |---ToDoListItem.ets                        // 列表項頁面

寫在最后

如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：

• 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
• 關注小編，同時可以期待后續文章ing??，不定期分享原創知識。
• 想要獲取更多完整鴻蒙最新學習知識點，請移步前往小編：https://gitee.com/MNxiaona/733GH/blob/master/jianshu