如何在 SwiftUI 中添加背景图像以完成视图

Question

我是 SwiftUI 的新手。我想设计一个带有少量控件和背景图像的自定义视图。背景图像应覆盖整个视图。它应该看起来像屏幕的水印。如何使用 SwiftUI 实现这一目标？

Answer 1

使用ZStack但不要使用UIScreen：

var body: some View {
    ZStack {
        Image("BG")
            .resizable()
            .scaledToFill()
            .edgesIgnoringSafeArea(.all)

        Text("Hello world")
    }
}

UIScreen如果您支持多屏应用、可调整大小的窗口、多窗口应用等，使用将导致您的应用出现不良行为。

Answer 2

更新

使用 iOS 15 Xcode 13.2

public extension View {
    func fullBackground(imageName: String) -> some View {
       return background(
                Image(imageName)
                    .resizable()
                    .scaledToFill()
                    .edgesIgnoringSafeArea(.all)
       )
    }
}

使用

YourView
.fullBackground(imageName: "imageName")

结束更新

旧答案

我更喜欢@ViewBuilder

用法：

BackgroundView(imageName: "image name") {         
     Text("Hello")                               
}

@ViewBuilder

public struct BackgroundView <Content : View> : View {
    public var content : Content
    public var imageName: String
    public var opacity: Double
    public init(imageName: String, opacity: Double=1,@ViewBuilder content: () -> Content) {
        self.content = content()
        self.imageName = imageName
        self.opacity = opacity
    }
    
    public var body: some View {
        GeometryReader { geo in
            ZStack {
                Image(imageName)
                    .resizable()
                    .scaledToFill()
                    .edgesIgnoringSafeArea(.all)
                    .frame(width: geo.size.width, height: geo.size.height, alignment: .center)
                    .opacity(opacity)
                content
            }
        }
    }
}

Answer 3

尝试这个：

    var body: some View {
    ZStack {
        Text("Hello")
    }
    .background(
        Image("Background")
            .resizable()
            .edgesIgnoringSafeArea(.all)
            .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
    )
}

Answer 4

如果您只想使用全屏宽度和高度，并且不关心图像的长宽比，则可以使用 UIScreen 尺寸的几何读取器。

.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)

这行代码将把图像设置为设备的最大尺寸。根据您的家长视图和设备，您可能需要使用：

.edgesIgnoringSafeArea(.all)

这将忽略 iPhone X 及更高版本设备上的安全区域。