新增任務時自動清空輸入框
• 讓使用者在新增任務後,輸入框自動清空,提升輸入效率
刪除任務前加上確認提示
• 點擊垃圾桶刪除任務前,跳出確認對話框,避免誤刪
新增動畫效果
• 當新增或刪除任務時,加入簡單的動畫效果,使操作感更流暢
說明要做的事情
• 新增 _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),
)