從 iOS 17 開始，SwiftUI 提供更方便的 init 創建包含圖文的 Button。 以下我們示範幾種常見的例子。 顯示 SF Symbol struct ContentView: View { var body: some View { Button("play", systemImage: "play.fill") { …

最近彼得潘發現有趣的 Bezel App，當我們將 iPhone 接線連到 Mac 時，Mac 的 Bezel App 會顯示搭配真實 iPhone 外框的 App 畫面，因此我們可以更漂亮地展示 App 的操作，或是錄製包含 iPhone 邊框的操作影片。 以下我們一步步示範如何使用 Bezel App & OBS 錄製包含 iPhone 邊框的 …

最近彼得潘研讀 Apple 的教學文章 Inspecting view layout，發現 Apple 介紹兩個不錯的方法幫助我們檢視 SwiftUI 元件的大小和位置。 Inspecting view layout | Apple Developer Documentation Determine the position and extent of a view using Xcode previews or by adding temporary borders.developer.apple.com 方法 1: 從 Xcode 的 preview 顯示元件的框框。 方法 2: 加入暫時的 border 顯示元件的框框。 方法 1: 從 Xcode 的 preview 顯示元件的框框 範例程式如下。 struct ContentView: View …

當 view 出現或消失時，SwiftUI 的 transition 可以為我們帶來淡入淡出、移動、縮放等生動的轉場效果。 transition 只會在元件生成顯示或從畫面移除時發揮作用，因此 transition 通常會搭配使用 if 生成 / 移除的 view。以下程式的 Image 一直在畫面上，點選 button 換圖時沒有造成 Image 的 …

透過 Swift Playgrounds，我們在 iPad 上也能開發 iOS App，不過它目前尚未支援 git 版本管理和上傳到 GitHub 的功能。 因此以下彼得潘將示範如何快速將 Swift Playgrounds 開發的 App 上傳到 GitHub，目標將下圖的我的第一個 App 上傳到 GitHub。 ps: 此方法不考慮版本管理，我們 …

開發 SwiftUI App 時，我們有兩個方法可以快速將多個元件包在 SwiftUI 的容器裡。以下我們假設有兩個 Text 元件，目標將它包在 VStack 裡。 Text("航海王") Text("草帽海賊團") 方法 1: 輸入 VStack {，然後再輸入 } 輸入 VStack {。 然將游標移到第 15 行，準備在第 15 行輸入 }。

最近彼得潘發現一個學英文的好工具 Language Reactor，它是 Chrome 的擴充套件，幫助我們在 Chrome 看 YouTube & Netflix 時顯示雙語字幕學英文。 有了它彼得潘可以用學英文當藉口追劇了! 以下我們一步步介紹 Language Reactor 的主要功能和相關操作。 安裝 Language Reactor 的 Chrome Extension 從以下連結下載安裝。 Language Reactor Improve your skills on your own, effectively and enjoyably, by watching films and series in the language you study.chrome.google.com

開發 Flutter App 時，我們可以透過 Flutter Inspector 檢視 App 畫面的 widget 元件，它將幫助我們方便地查看 UI 相關的細節和問題。 以下我們以 flutter create 指令建立的 counter App 為例，一步步介紹 Flutter Inspector 的常用操作和功能。 啟動 App。 打開 Dev …

利用 Flutter 的 Image widget 我們可以方便地顯示專案裡的圖片。以下我們一步步示範如何將圖片加入 Flutter 專案，然後利用 Image widget 顯示圖片。 在專案裡新增存放圖片的資料夾。 在資料夾下加入圖片。 在 pubspec.yaml 加入資料夾的路徑。 用 Image widget 顯示圖片。 在專案裡新增存放圖片的資料夾 從 VS Code …