[2024 鐵人賽] Day 12: SwiftUI 新增項目頁面與懸浮按鈕設計
![[2024 鐵人賽] Day 12: SwiftUI 新增項目頁面與懸浮按鈕設計](https://ooorito.com/wp-content/uploads/2024/08/Day12-768x551.webp)
Day 12 我們進一步改進家用品管理 App,在首頁新增懸浮按鈕,讓使用者能進入到我們新增完整的新增項目頁面。在這裡,使用者可以自行輸入所有必要的欄位,透過 ViewModel 驗證輸入欄位,並使用第三方套件 AlertToast 提示資料格式錯誤或成功的訊息,讓資料輸入正確且順暢,提升整體使用體驗。
![[2024 鐵人賽] Day 12: SwiftUI 新增項目頁面與懸浮按鈕設計](https://ooorito.com/wp-content/uploads/2024/08/Day12-768x551.webp)
Day 12 我們進一步改進家用品管理 App,在首頁新增懸浮按鈕,讓使用者能進入到我們新增完整的新增項目頁面。在這裡,使用者可以自行輸入所有必要的欄位,透過 ViewModel 驗證輸入欄位,並使用第三方套件 AlertToast 提示資料格式錯誤或成功的訊息,讓資料輸入正確且順暢,提升整體使用體驗。
![[2024 鐵人賽] Day 11: 將資料儲存到 Core Data](https://ooorito.com/wp-content/uploads/2024/08/Day11-768x576.webp)
Day 11 介紹如何在 SwiftUI 中整合 Core Data,實現家用品項目的資料儲存與管理。本文將教你如何建立資料模型、實作 DataManager 來處理 CRUD 操作,並更新 ViewModel 和 ContentView 以確保資料持久化。透過這些步驟,讓你的 App 能夠在關閉後依然保留重要的資訊,成為一個實用的工具。
![[2024鐵人賽]Day 10: 在 SwiftUI 中實現新增與刪除家用品項目](https://ooorito.com/wp-content/uploads/2024/08/Day10-768x540.webp)
Day 10 我們實作了家用品清單的新增與刪除功能,讓使用者能夠動態管理項目,並加深了對 SwiftUI 中資料管理與 UI 更新的理解。接下來,我們將探討如何使用 Core Data 將資料儲存到本地,讓清單資料得以持久保存。
![[2024鐵人賽]Day 9: 使用 SwiftUI 的 List 顯示家用品清單](https://ooorito.com/wp-content/uploads/2024/08/精選圖片-1-768x554.webp)
Day9 我們探討 SwiftUI 中的 List 元件,示範使用 List 來顯示家用品清單,並介紹了其他常見的 SwiftUI 列表元件,如 ForEach、ScrollView、LazyVStack 和 LazyHGrid。透過這些元件,我們能夠輕鬆創造出高效、美觀的 UI。
![[2024鐵人賽]Day 8: SwiftUI 中的 MVVM 架構初次使用](https://ooorito.com/wp-content/uploads/2024/08/精選圖片-768x551.webp)
Day8 我們練習 SwiftUI 中的 MVVM 架構,透過使用 @Published 和 @StateObject 來管理資料和 UI 之間的同步。在範例中,我們理解如何使用 ObservableObject 來協調資料變化與 View 更新,為即將開始的家用品庫存 App 開發奠定基礎。
![[2024鐵人賽]Day 7: 認識 SwiftUI 的 State 與 Binding](https://ooorito.com/wp-content/uploads/2024/08/精選圖片-5-768x575.png)
Day7 我們學習 SwiftUI 中的 State 和 Binding,了解如何使用它們來建立動態、互動的 UI。透過實際範例,我們練習在不同視窗之間共享資料,並實現資料的雙向綁定。State 和 Binding 不僅簡化過去使用 UIKit 時的資料綁定流程,還能自動更新 UI,讓開發變得更加直覺和高效。
![[2024鐵人賽]Day 6: 挖掘 SwiftUI 的進階 View Modifiers](https://ooorito.com/wp-content/uploads/2024/08/精選圖片-4-768x545.png)
Day6 我們探索 SwiftUI 的 View Modifiers,並學習如何建立客製化的 Modifier,讓程式碼變得更簡潔、更具可讀性。透過擴展 View 的方法,我們可以將這些自訂的樣式輕鬆應用於各種元件,並且還能夠根據需求靈活地增加參數來調整設計。

SwiftUI 常見 View Modifier 用法整理,包含 padding、background、foregroundStyle、cornerRadius、shadow、opacity、frame 等,搭配範例實作與參數說明,一步步搞懂每個 Modifier 怎麼用、效果差在哪。

SwiftUI UI 元件怎麼用?這篇文章記錄我從零實作 Text、Image、Button 等常用元件的過程,實驗 modifier 搭配,觀察元件外觀變化,了解 SwiftUI 的組件邏輯與排版方式,一步步摸索畫面怎麼構成,終於開始從看懂到做到!