SwiftUI Image 圖片處理

Image 元件用於在畫面上顯示圖片。在 SwiftUI 中，圖片來源主要有三種：系統內建圖示 (SF Symbols)、專案資源 (Asset Catalog) 以及網絡圖片。

系統圖示 (SF Symbols)

Apple 提供了一套擁有超過 5,000 個符號的圖示庫，稱為 SF Symbols。這些圖示可以像文字一樣調整大小、顏色和粗細，非常強大且與 iOS 系統風格完美融合。

Image(systemName: "star.fill") // 使用系統名稱載入圖示
    .font(.system(size: 50))   // 調整大小 (像它是文字一樣)
    .foregroundColor(.yellow)  // 設定顏色
你可以下載 Mac 版的 SF Symbols App 來瀏覽和搜尋所有可用的圖示名稱。

顯示本地圖片 (Asset Catalog)

要顯示包含在 App 裡的圖片（例如 Logo 或背景圖），你需要先將圖片加入到 Assets.xcassets 中。

  1. 打開 Xcode 左側的 Assets。
  2. 將圖片拖拉進去，並取個名字，例如 "MyLogo"。
  3. 在程式碼中使用該名字：
Image("MyLogo")
    .resizable() // 允許圖片縮放 (預設是不縮放的)
    .scaledToFit() // 保持比例縮放至適合空間 (或 .scaledToFill)
    .frame(width: 200, height: 200) // 設定具體大小

關鍵修飾符：resizable()

預設情況下，SwiftUI 的 Image 會以原始解析度顯示，並且佔用它需要的空間。如果你想要改變圖片大小，必須先加上 .resizable()，告訴 SwiftUI 這張圖片是可以被調整大小的，然後再設定 frame 或顯示模式。

顯示網絡圖片 (AsyncImage)

在 iOS 15 之後，SwiftUI 提供了 AsyncImage 來簡化從 URL 下載並顯示圖片的過程。

AsyncImage(url: URL(string: "https://example.com/image.jpg"))

處理載入狀態

網絡請求需要時間，AsyncImage 允許你定義載入中 (Placeholder) 和載入完成後的顯示方式：

AsyncImage(url: URL(string: "https://example.com/icon.png")) { image in
    image
        .resizable()
        .scaledToFit()
} placeholder: {
    ProgressView() // 載入時顯示轉圈圈
}
.frame(width: 100, height: 100)

圖片修飾

圖片也可以套用許多通用的 View Modifier：

Image("Avatar")
    .resizable()
    .scaledToFill()
    .frame(width: 100, height: 100)
    .clipShape(Circle()) // 裁切成圓形
    .overlay {
        Circle().stroke(.white, lineWidth: 4) // 加上白色邊框
    }
    .shadow(radius: 7) // 加上陰影

掌握了圖片處理，你的 App 介面就會開始變得豐富多彩。接下來，我們要介紹最核心的互動元件：Button。