iT邦幫忙

0

10 : 改善列表 UI 與程式結構整理

  • 分享至 

  • xImage
  •  
  1. 改善待辦清單的視覺呈現
    • 將原本單純的 ListTile 改為使用 Card 包裝,讓每個待辦項目有明顯的立體感與間距
    • 為完成的項目增加淡灰色背景與刪除線效果,未完成的則維持正常文字顏色
    • 增加圖示以增強辨識度:
    完成項目使用 Icons.check_circle(綠色)
    未完成項目使用 Icons.radio_button_unchecked(灰色)
    • 調整列表邊距與間距,使整體介面更具一致性與閱讀性
ListView.builder(
 itemCount: todos.length,
 itemBuilder: (context, index) {
   final todo = todos[index];
   return Card(
     margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
     child: ListTile(
       leading: Icon(
         todo.isDone ? Icons.check_circle : Icons.radio_button_unchecked,
         color: todo.isDone ? Colors.green : Colors.grey,
       ),
       title: Text(
         todo.title,
         style: TextStyle(
           decoration: todo.isDone
               ? TextDecoration.lineThrough
               : TextDecoration.none,
           color: todo.isDone ? Colors.grey : Colors.black,
         ),
       ),
       onTap: () {
         setState(() {
           todo.isDone = !todo.isDone;
         });
       },
     ),
   );
 },
);
  1. 重構程式結構:將 Todo 模型與元件分離
    • 建立一個 todo_item.dart 檔案,專門存放 Todo 類別
    • 將待辦清單 UI 抽離成一個獨立的 Widget,命名為 TodoListView
    • 這樣做的目的:
    提升可維護性與可重用性
    讓主頁程式 main.dart 更乾淨,只需負責邏輯與狀態控制

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

  1. 改善整體使用者體驗
    • 點擊完成項目時加入短暫動畫或顏色變化,讓操作更有回饋感
    • 保持捲動位置不會在新增項目後重置
    • 調整整體配色方案,使 App 更柔和、易讀,例如:
    主色(PrimaryColor):深藍或藍灰
    輔助色(AccentColor):綠色(代表完成),透過 ThemeData 統一樣式,方便未來主題切換

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

尚未有邦友留言

立即登入留言