iT邦幫忙

0

16 : 新增任務標籤與顏色分類

  • 分享至 

  • xImage
  •  
  1. 新增任務標籤功能
    • 每個待辦任務可以指定一個標籤,例如「工作」「個人」「學習」
    • 使用者在新增任務時可以選擇標籤

  2. 標籤顏色顯示
    • 每個標籤對應不同顏色,在清單上顯示彩色標籤
    • 保持長方形框架與原本打勾、垃圾桶顏色規則不變

  3. 任務依標籤分類顯示(可選)
    • 待辦清單可以依標籤排序或過濾(例如只看「工作」標籤)
    • 保持完成任務下移規則與新增任務插入最上方規則

// 新增任務時加入標籤
void _addTask(String task, String tag, Color tagColor) {
 setState(() {
   _todoList.insert(0, ToDoItem(title: task, tag: tag, tagColor: tagColor));
 });
 _textController.clear();
}

// ToDoItem類別新增標籤屬性
class ToDoItem {
 String title;
 bool done;
 String tag;       // 標籤名稱
 Color tagColor;   // 標籤顏色

 ToDoItem({
   required this.title,
   this.done = false,
   this.tag = '',
   this.tagColor = Colors.grey,
 });

 void toggleDone() {
   done = !done;
 }
}

// 顯示任務時顯示標籤
Widget ToDoItemWidget({
 required ToDoItem item,
 required VoidCallback onToggleDone,
 required VoidCallback onDelete,
}) {
 return Card(
   child: ListTile(
     leading: GestureDetector(
       onTap: onToggleDone,
       child: CircleAvatar(
         backgroundColor: item.done ? Colors.purple : Colors.white,
         child: item.done ? const Icon(Icons.check, color: Colors.white) : null,
       ),
     ),
     title: Text(
       item.title,
       style: TextStyle(
         decoration: item.done ? TextDecoration.lineThrough : null,
       ),
     ),
     subtitle: item.tag.isNotEmpty
         ? Container(
             padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
             decoration: BoxDecoration(
               color: item.tagColor,
               borderRadius: BorderRadius.circular(4),
             ),
             child: Text(
               item.tag,
               style: const TextStyle(color: Colors.white),
             ),
           )
         : null,
     trailing: IconButton(
       icon: const Icon(Icons.delete, color: Colors.red),
       onPressed: onDelete,
     ),
   ),
 );
}

https://ithelp.ithome.com.tw/upload/images/20251012/201789003vLgUc17dz.png


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

尚未有邦友留言

立即登入留言