SwiftUI - 自定義影像檢視

影像檢視在螢幕上顯示單個或多個影像。它是 SwiftUI 中最重要的檢視。使用影像檢視，我們可以輕鬆地從資源目錄中顯示影像。它可以輕鬆地與各種影像格式一起使用，例如 PNG、JPEG、PDF 等。它還可以高效地與 SFSymbols 協同工作。

影像檢視輕鬆管理和操作影像，以建立更具創意的佈局。它還支援各種修飾符來拉伸、縮放、調整大小或將影像固定到特定位置。影像檢視只能顯示影像，它沒有互動性。

在 SwiftUI 中使用影像檢視顯示影像

使用影像檢視顯示影像是一種非常直接的方法，我們需要遵循以下步驟在螢幕上顯示影像：

步驟 1：準備影像

要在影像檢視中顯示影像，首先需要透過拖放影像檔案將影像新增到 **Assets.xcassets** 資料夾中。

步驟 2：新增影像檢視

要在檢視中新增影像，請開啟 ContentView.swift 檔案，然後在 body 屬性內使用影像檢視。由於我們已將影像放在資源中，因此我們在影像檢視中傳遞影像的引用。這降低了由於影像名稱不正確而導致執行時錯誤的風險。如果對資源目錄進行了任何更改，則會在程式碼中使用影像作為引用的位置發出通知，以便您可以在編譯程式碼之前進行更改。

struct ContentView: View {
   var body: some View {
      Image("imageName")
   }
}

步驟 3：執行應用程式

在模擬器或裝置上執行應用程式以檢視影像。

示例

以下 SwiftUI 程式用於建立影像檢視。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Image(.wallpaper)
   }
}

#Preview {
   ContentView()
}

輸出

在 SwiftUI 中自定義影像檢視

透過自定義影像檢視，我們可以藉助 SwiftUI 提供的各種修飾符來更改影像的外觀和行為以符合設計要求。使用這些修飾符，我們可以更改影像檢視的形狀、大小、顏色和其他視覺屬性。SwiftUI 提供各種內建修飾符來自定義 Image 檢視中的影像，一些常用的修飾符如下：

修飾符	描述
`frame(width:height:alignment:)`	用於顯式設定影像檢視的寬度和高度。
`resizable()`	用於調整影像大小。
`aspectRatio(contentMode:)`	用於在調整影像大小的同時管理影像的縱橫比。
`clipShape(RoundedRectangle(cornerRadius:))`	用於使影像檢視的角變圓。此修飾符還用於更改影像的形狀。
`padding()`	用於在影像檢視周圍插入空間。
`Image(systemName:"SymbolName")`	用於顯示 SF Symbol。
`shadow(radius:)`	用於在影像檢視上應用陰影效果。
`overlay()`	用於在影像頂部覆蓋另一個檢視。
`opacity()`	用於設定影像檢視的不透明度。

示例

以下 SwiftUI 程式用於自定義影像檢視。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Image(.wallpaper)
            .resizable()
            .frame(width: 300, height: 200)
         Image(.wallpaper)
            .resizable()
            .frame(width: 300, height: 200)
            .clipShape(Capsule())
         Image(.wallpaper)
            .resizable()
            .frame(width: 300, height: 200)
            .shadow(radius: 30)
            .opacity(0.7)
         Image(systemName: "star")
            .frame(width: 300, height: 200)
            .font(.largeTitle)           
      }
   }
}

#Preview {
   ContentView()
}

輸出

列印頁面