iOS swift开发系列–如何给swiftui内容视图添加背景图片显示

我需要在swiftui项目中显示背景图，有两种方式，一种是把图片拖入asset资源中，另外一种是直接把图片放在源码目录下。采用第一种方式，直接把图片拖到资源目录，但是swiftui项目没有弹出， “Copy items if needed”和“Create groups”选项 ，而是copy files to destination，可能会遇到问题。可能会遇到问题No image named ‘back’ found in asset catalog for。

struct ContentView: View {
var body: some View {
VStack {
// 你的其他控件，例如文本、按钮等
Text(“Hello, world!”)
.foregroundColor(.white) // 设置文本颜色为白色，以便在背景图片上可见
.font(.largeTitle)
.padding() // 为文本添加内边距

        // 你可以在这里添加更多的控件
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity) // 设置框架以填充其父视图
    .background(
        Image("back") // 引用你添加的图片
            .resizable() // 允许图片被拉伸或压缩
            .scaledToFill() // 拉伸图片以填充其容器
            .clipped() // 裁剪超出框架的图片部分
            .opacity(0.5) // 可选：设置背景图片的透明度
    )
    .edgesIgnoringSafeArea(.all) // 忽略安全区域，使背景图片铺满整个屏幕
}

}

我们今天来看看第二种方式。

创建一个测试文件

//

//  ContentView.swift

//  swiftui-test2

//

//  Created by hxx on 2024/12/15.

//

import SwiftUI

struct ContentView: View {

    var body: some View {

        VStack {

                    Text(“Hello, world!”)

                }.frame(maxWidth: .infinity, maxHeight: .infinity) // 设置框架以填充其父视图

              .background(

                Group {

                    // 尝试加载首选背景图

                    if let backgroundImageURL = Bundle.main.url(forResource: “back”, withExtension: “jpg”),

                       let backgroundImageData = try? Data(contentsOf: backgroundImageURL),

                       let backgroundUIImage = UIImage(data: backgroundImageData) {

                        Image(uiImage: backgroundUIImage)

                            .resizable()

                            .scaledToFill()

                            .clipped()

                            .opacity(0.3) // 设置首选背景图的透明度

                    }

                })

                .padding()

    }

}

#Preview {

    ContentView()

}

最后的效果