SwiftUI - 使用影像作為背景

---

---

在 SwiftUI 中，我們可以使用影像作為背景影像來增強 UI 的外觀。它通常填充給定內容的背景，而不會修改內容的實際功能。在 SwiftUI 中，我們可以透過以下任何一種方式設定背景影像：

• 影像檢視

• background() 修飾符

• ZStack

SwiftUI 中的影像檢視

我們可以使用影像檢視將影像設定為背景影像。它插入一個覆蓋整個螢幕的影像，包括給定的文字、欄或安全區域。我們還可以使用各種修飾符，例如 resizeable()、scaledToFill()、frame()、ignoreSafeArea() 等來自定義背景影像。

語法

以下是語法：

Image("Name of the image")

示例

以下 SwiftUI 程式用於使用影像檢視應用背景影像。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Image("wallpaper").resizable().ignoresSafeArea()
      }
   }
}
#Preview {
   ContentView()
}

輸出

SwiftUI 中的“background()”修飾符

在 SwiftUI 中，我們還可以藉助 background() 修飾符應用背景影像。這是應用背景影像最簡單的方法。它還會修改檢視前景中存在的內容

語法

以下是語法：

.background(Image("Name of the image"))

示例

以下 SwiftUI 程式用於使用 background() 修飾符應用背景影像。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Text("TutorialsPoint")
         .font(.largeTitle)
         .bold()
         .foregroundStyle(.white)
         .background(
            Image("wallpaper").ignoresSafeArea()
         )
   }
}
#Preview {
   ContentView()
}

輸出

SwiftUI 中的 ZStack

我們還可以藉助 ZStack 應用背景影像。它將影像分層到給定內容的後面，並提供對給定背景影像的更多控制。ZStack 將檢視應用到另一個檢視的頂部。

語法

以下是語法：

ZStack{
   (Image("Name of the image"))
}

示例

以下 SwiftUI 程式用於使用 ZStack 應用背景影像。

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack{
         Image("wallpaper")
            .resizable()
            .ignoresSafeArea()
         HStack{
            Rectangle()
               .fill(.white)
               .frame(width: 150, height: 90)
               .overlay(Text("TutorialsPoint").font(.headline))
         }
      }
   }
}

#Preview {
   ContentView()
}

輸出