iT邦幫忙

0

15 : 改善新增與刪除任務的互動體驗

  • 分享至 

  • xImage
  •  
  1. 新增任務時自動清空輸入框
    • 讓使用者在新增任務後,輸入框自動清空,提升輸入效率

  2. 刪除任務前加上確認提示
    • 點擊垃圾桶刪除任務前,跳出確認對話框,避免誤刪

  3. 新增動畫效果
    • 當新增或刪除任務時,加入簡單的動畫效果,使操作感更流暢

說明要做的事情
• 新增 _showDeleteConfirmation 方法,使用 showDialog 彈出刪除確認
• 修改 _addTask 方法,新增任務後自動清空輸入框。
• 將 ListView.builder 改成使用 AnimatedList,加入動畫效果

// 新增任務後清空輸入框
void _addTask(String task) {
 setState(() {
   _todoList.insert(0, ToDoItem(title: task));
 });
 _textController.clear(); // ===== 第十五天修改 ===== 清空輸入框
}

// 刪除任務前彈出確認對話框
void _confirmDelete(int index) {
 showDialog(
   context: context,
   builder: (context) => AlertDialog(
     title: const Text('確認刪除'),
     content: Text('確定要刪除 "${_todoList[index].title}" 嗎?'),
     actions: [
       TextButton(
         onPressed: () => Navigator.pop(context),
         child: const Text('取消'),
       ),
       TextButton(
         onPressed: () {
           _deleteTask(index);
           Navigator.pop(context);
         },
         child: const Text('刪除', style: TextStyle(color: Colors.red)),
       ),
     ],
   ),
 );
}

// 刪除按鈕改用確認函數
IconButton(
 icon: const Icon(Icons.delete, color: Colors.red),
 onPressed: () => _confirmDelete(index),
)

https://ithelp.ithome.com.tw/upload/images/20251011/201789009goNme9cgs.png


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言