VisionOS窗口背景图片圆角适配问题求助

问题出在你给背景图片单独设置圆角，但未让整个视图裁剪逻辑匹配窗口圆角，导致背景超出窗口形状。以下是几种可行的修复方案：

方案1：给整个视图统一设置裁剪与圆角 #

将圆角设置移到视图最外层，确保背景图片被裁剪到圆角范围内：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, VisionOS!")
                .font(.largeTitle)
                .foregroundStyle(.white)
                .padding()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(
            Image("studio")
                .resizable()
                .scaledToFill()
        )
        .clipped() // 裁剪超出视图边界的内容
        .cornerRadius(24) // 给整个视图添加圆角，匹配窗口尺寸
    }
}

方案2：使用系统默认窗口圆角值 #

直接调用VisionOS窗口的默认圆角常量，避免手动设置值与系统不一致：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, VisionOS!")
                .font(.largeTitle)
                .foregroundStyle(.white)
                .padding()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(
            Image("studio")
                .resizable()
                .scaledToFill()
        )
        .clipped()
        .cornerRadius(WindowStyle.defaultCornerRadius)
    }
}

方案3：使用系统原生窗口背景API（最优解） #

VisionOS提供了containerBackground专门用于设置窗口背景，系统会自动处理圆角适配：

@main
struct BackgroundImageApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .containerBackground(for: .window) {
                    Image("studio")
                        .resizable()
                        .scaledToFill()
                }
        }
        .defaultSize(width: 600, height: 400)
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, VisionOS!")
                .font(.largeTitle)
                .foregroundStyle(.white)
                .padding()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

内容的提问来源于stack exchange，提问作者BellaBacon