VisionOS下SwiftUI如何移除按钮默认椭圆背景？

在VisionOS里，SwiftUI的Button和NavigationLink默认带有系统预设的交互背景样式，这是和iOS不一样的地方——直接用.background(Color.clear)无效，因为这个背景属于控件的内置样式，不是普通的背景层。下面是具体解决方法：

修复Button的多余背景 #

给Button添加.buttonStyle(.plain)修饰符，直接移除系统默认的椭圆背景，只保留自定义图标：

Button(action: {}) {
    Image(systemName: "arrow.up.circle.fill")
        .resizable()
        .frame(width: 50.0, height: 50.0)
}
.buttonStyle(.plain)

如果需要自定义点击交互效果（比如高亮、缩放），可以编写自定义ButtonStyle：

struct CustomCircleButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .scaleEffect(configuration.isPressed ? 0.9 : 1.0) // 点击时缩小
            .opacity(configuration.isPressed ? 0.8 : 1.0) // 点击时半透明
    }
}

// 使用方式
Button(action: {}) {
    Image(systemName: "arrow.up.circle.fill")
        .resizable()
        .frame(width: 50, height: 50)
}
.buttonStyle(CustomCircleButtonStyle())

修复NavigationLink的多余背景 #

NavigationLink的问题和Button完全一致，同样通过.buttonStyle(.plain)移除默认背景：

NavigationLink(destination: YourDestinationView()) {
    Image(systemName: "arrow.right.circle.fill")
        .resizable()
        .frame(width: 50, height: 50)
}
.buttonStyle(.plain)

关键说明 #

VisionOS为适配空间交互，给可交互控件默认添加了触控反馈的背景层，这个层不属于background修饰符控制范围，必须通过修改控件样式（buttonStyle）来移除或替换。

内容的提问来源于stack exchange，提问作者J. Edgell