介紹
本示例介紹用過使用ListItem組件屬性swipeAction實(shí)現(xiàn)列表左滑編輯效果的功能孝赫。 該場景多用于待辦事項(xiàng)管理、文件管理、備忘錄的記錄管理等。
效果圖預(yù)覽
使用說明:
- 點(diǎn)擊添加按鈕,選擇需要添加的待辦事項(xiàng)。
- 長按待辦事項(xiàng),點(diǎn)擊刪除后情组,被勾選待辦事項(xiàng)被刪除。
- 左滑單個待辦事項(xiàng)扛吞,點(diǎn)擊刪除按鈕后呻惕,當(dāng)前待辦事項(xiàng)被刪除。
實(shí)現(xiàn)步驟
- List組件綁定@State修飾的數(shù)組變量toDoData滥比。
- ListItem組件設(shè)置左滑動效swipeAction 屬性亚脆,使得單個ListItem可以進(jìn)行左右滑動,并顯示自定義的UIBuilder盲泛。 屬性濒持。
- 觸發(fā)點(diǎn)擊事件新增/刪除列表項(xiàng),更新數(shù)組變量toDoData寺滚,并同時更新List組件UI(MVVM)柑营,具體可參考代碼文件ToDoList。
高性能知識點(diǎn)
不涉及
工程結(jié)構(gòu)&模塊類型
pendingitems // har
|---model
| |---ToDo.ets // TODO類定義
| |---ConstData.ets // 常量數(shù)據(jù)
|---pages
| |---ToDoList.ets // 列表項(xiàng)功能增刪實(shí)現(xiàn)頁面
| |---ToDoListItem.ets // 列表項(xiàng)頁面
模塊依賴
不涉及