SwiftUI - 圖片

影像檢視用於在使用者介面上顯示影像、符號、圖示、插圖等視覺內容。它是 SwiftUI 中在 UI 上上傳和顯示影像的常用方法。它可以支援所有型別的影像，例如 png、jpeg、.heif、.pdf、.svg、SF 符號、.gif。在本節中，我們將學習如何在 Xcode 中新增影像，如何顯示影像以及更多關於影像的資訊。

如何在 Xcode 中新增影像？

在 SwiftUI 中，我們不能直接在 Xcode 專案中新增影像，我們必須首先將影像新增到專案的 **Assets.xcassets** 資料夾中。此資料夾包含專案中將使用的所有影像，例如背景影像、應用程式圖示等。要將影像新增到資源，我們可以拖放影像或單擊加號按鈕。

在這裡，我們可以為不同的裝置螢幕新增三種不同比例（1x、2x、3x）的影像，這三種比例的解析度不同，1x 的解析度最低，而 3x 的解析度最高。如果我們將影像比例設定為單一，則該影像將用於所有比例。

如何在 SwiftUI 中顯示影像？

在 SwiftUI 中，我們可以藉助影像檢視顯示影像。這是在應用程式使用者介面中新增影像或圖示最常用的檢視。它顯示來自各種來源的影像，包括資源目錄或 SF 符號。它還提供各種自定義器來自定義影像，例如 ignoreSafeArea()、frame()、rotationEffect() 等。

語法

以下是語法：

Image("Image Name")

現在按照以下步驟在當前檢視中插入影像：

**步驟 1：**開啟一個新專案。
**步驟 2：**將影像拖放到 Assets.xcassets 資料夾中。
**步驟 3：**轉到 ContentView 並使用影像檢視插入影像。

示例 1

以下 SwiftUI 程式使用影像檢視插入影像。

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack{
         Image("wallpaper")
            .resizable()
            .ignoresSafeArea()
         
         Text("TutorialsPoint")
            .font(.title)
            .foregroundStyle(.white)
            .bold()
         
      }
   }
}

#Preview {
   ContentView()
}

輸出

示例 2

以下 SwiftUI 程式用於使用影像檢視插入 SF 符號。

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack{
         Image(systemName:"cloud")
            .resizable()
            .scaledToFit()
            .foregroundStyle(.indigo)
      }
   }
}

#Preview {
   ContentView()
}

輸出

在 SwiftUI 中自定義影像

在 SwiftUI 中，我們可以使用以下內建修飾符自定義影像：

修飾符	描述
resizable()	使用此修飾符，我們可以根據容器的大小自動調整影像大小。
aspectRatio()	它用於管理給定影像的縱橫比。
frame()	它用於修改影像的高度、寬度和對齊方式。
scaleToFit()	它用於縮放影像以適應其父檢視，而不會拉伸或壓縮。
scaleToFill()	它用於縮放影像以適應其父檢視，可能會拉伸或壓縮。
clipped()	它用於裁剪影像。或者我們可以說它隱藏了給定形狀邊界之外的內容。
clipShape()	它用於更改影像的形狀。它提供 5 種不同的內建形狀：圓形、矩形、圓角矩形、膠囊和橢圓形。
renderingMode()	它用於按原樣渲染影像或使用不同的模式渲染影像。
padding()	它用於為給定影像提供內邊距。
opacity()	它用於調整影像的不透明度。

示例

以下 SwiftUI 程式用於對影像應用自定義。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Image("wallpaper")
            .resizable()
            .scaledToFit()
            .opacity(0.9)
            .frame(width: 200, height: 150)
         Image("wallpaper")
            .resizable()
            .scaledToFit()
            .clipShape(Circle())
            .opacity(1.2)
            .frame(width: 200, height: 150)
      }
   }
}

#Preview {
   ContentView()
}

輸出

列印頁面