HarmonyOS NEXT應用開發案例——列表編輯實現

生活就是这么怪發表於2024-04-15

介紹

本示例介紹用過使用ListItem元件屬性swipeAction實現列表左滑編輯效果的功能。 該場景多用於待辦事項管理、檔案管理、備忘錄的記錄管理等。

效果圖預覽

使用說明：

  • 點選新增按鈕，選擇需要新增的待辦事項。
  • 長按待辦事項，點選刪除後，被勾選待辦事項被刪除。
  • 左滑單個待辦事項，點選刪除按鈕後，當前待辦事項被刪除。

實現步驟

  1. List元件繫結@State修飾的陣列變數toDoData。
  2. ListItem元件設定左滑動效swipeAction 屬性，使得單個ListItem可以進行左右滑動，並顯示自定義的UIBuilder。 屬性。
  3. 觸發點選事件新增/刪除列表項，更新陣列變數toDoData，並同時更新List元件UI(MVVM)，具體可參考程式碼檔案ToDoList。

高效能知識點

不涉及

工程結構&模組型別

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

模組依賴

不涉及

參考資料

ListItem

相關文章