iT邦幫忙

0

11 : 加入任務優先級標記與視覺化提示

  • 分享至 

  • xImage
  •  
  1. 新增任務優先級屬性
    • 每個待辦項目新增 priority 屬性(高、中、低)
    • 初始靜態資料可以設定不同優先級,例如:高、中、低
// 第十一天新增:在 _todoList 中加入 priority 屬性
final List<Map<String, dynamic>> _todoList = [
 {'task': '買牛奶', 'done': false, 'priority': '高'},
 {'task': '寫作業', 'done': false, 'priority': '中'},
 {'task': '運動', 'done': false, 'priority': '低'},
];
  1. 在列表中顯示優先級
    • 在 ListTile 的右側增加一個小標籤顯示優先級
    • 可以用不同顏色標示高、中、低
/ 第十一天修改:在 ListTile 右側加上優先級顯示
trailing: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
  color: todo['priority'] == '高'
      ? Colors.red
      : todo['priority'] == '中'
          ? Colors.orange
          : Colors.green,
  borderRadius: BorderRadius.circular(4),
),
child: Text(
  todo['priority'],
  style: const TextStyle(color: Colors.white, fontSize: 12),
),
),
  1. 新增任務時設定優先級
    • 在新增任務對話框中加入選擇優先級的選項(DropdownButton)
    • 使用者可以選擇高、中、低,按下確認後加入清單
// 第十一天新增:新增任務時選擇優先級
String _selectedPriority = '中'; // 預設為中

// 在新增任務對話框中
DropdownButton<String>(
value: _selectedPriority,
items: <String>['高', '中', '低'].map((String value) {
 return DropdownMenuItem<String>(
   value: value,
   child: Text(value),
 );
}).toList(),
onChanged: (newValue) {
 setState(() {
   _selectedPriority = newValue!;
 });
},
);
  1. UI 調整
    • 依照優先級用顏色區分,讓使用者能直覺看到任務重要性
    • 其他互動功能(刪除、完成切換、新增任務)保持不變

https://ithelp.ithome.com.tw/upload/images/20251011/20178900IXJLVhUsM8.png


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

尚未有邦友留言

立即登入留言