iT邦幫忙

6

DAY 6:為待辦清單加入互動功能

  • 分享至 

  • xImage
  •  

今天的目標就是讓清單可以「互動」,讓使用者能夠勾選任務是否完成,讓應用程式更接近真實的使用情境

  1. 建立 TodoItem 資料模型
    • 我們會先新增一個 Todo 類別,讓每個待辦事項都有「名稱」與「是否完成」兩個屬性
    • 這樣以後新增或刪除待辦事項時,就能用這個模型來管理資料

  2. 改用 ListView.builder 顯示清單
    • 昨天我們是用靜態的 ListView + ListTile
    • 今天要改成動態的 ListView.builder,它會依據代辦清單的資料數量,自動建立清單項目

  3. 加入 Checkbox 互動功能
    • 每個待辦事項旁邊會有一個 Checkbox
    • 當使用者勾選或取消勾選時,會更新該任務的完成狀態

  4. 畫面效果
    • 當任務被勾選為完成,文字會加上刪除線,清楚區分已完成與未完成事項
    • 這是我們第一次讓 TodoApp 有了「互動感」

https://ithelp.ithome.com.tw/upload/images/20250923/20178900OEJ9RR593O.png

學習心得

今天的重點在於把「資料」和「畫面」連接起來,這也是 Flutter 的核心:畫面會隨著狀態改變而自動更新,透過這個練習我更理解了 StatefulWidget 的用途,以及 setState() 如何幫助我們更新畫面。雖然程式碼比昨天多了一些,但看著 App 可以真正被操作,讓我覺得這個待辦清單越來越像一個真的產品了。


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

尚未有邦友留言

立即登入留言