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()
}

输出