如何移除visionOS平台上PhotosPicker组件的背景色？

在visionOS上，PhotosPicker和Stepper组件默认会带有系统背景色，直接设置.background(.clear)往往无法生效——原因是这些组件的背景来自其内置的控件样式，需要通过修改组件样式或覆盖系统默认样式来解决。

解决PhotosPicker的背景问题 #

针对你的代码，只需给PhotosPicker添加.buttonStyle(.plain)即可移除默认背景，同时保留原有交互逻辑：

PhotosPicker(selection: $avatarItem, matching: .images) {
    ZStack(alignment: .center) {
        avatarImage
            .resizable()
            .modifier(CoverImage())
        
        if avatarImage == ref {
            HStack(alignment: .center, spacing: 8) {
                Image(systemName: "camera")                              
                    .font(.system(size: 18, weight:.semibold))
                Text("Upload Image")
                    .modifier(Subtitle())
            }
        }
    }
}
.buttonStyle(.plain) // 关键：移除默认按钮背景
.background(.clear) // 确保背景完全透明
.onChange(of: avatarItem) {
    // 你的图片加载逻辑
}

如果.buttonStyle(.plain)仍有残留背景，可以尝试自定义ButtonStyle彻底清除：

struct TransparentButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .background(.clear)
            .opacity(configuration.isPressed ? 0.8 : 1.0) // 保留按压反馈
    }
}

// 使用时替换原有buttonStyle：
PhotosPicker(...) { ... }
.buttonStyle(TransparentButtonStyle())

解决Stepper的背景问题 #

对于Stepper，同样可以通过修改样式移除背景：

Stepper(value: $count, in: 0...10) {
    Text("计数: \(count)")
}
.stepperStyle(.plain) // 移除默认背景
.background(.clear)

补充说明 #

visionOS的控件样式设计偏向空间沉浸感，默认背景是系统统一的设计语言。上述方法可以覆盖系统默认样式，同时保证组件的交互功能正常。

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