tvOS中SwiftUI NavigationLink保留悬停闪烁效果去除.card背景

问题场景 #

在LazyVGrid里用了一堆NavigationLink，为了省事直接加了.buttonStyle(.card)来获取现成的悬停和按压“闪烁”效果，但这个样式会自动给视图套个浅色背景，破坏了原本的UI设计。试了.hoverEffect()和.focusEffect()，没达到想要的效果，得想办法去掉这个多余的背景。

解决方案 #

方法1：自定义无背景的Card风格按钮样式 #

直接复刻系统Card按钮的交互逻辑，把背景改成透明就行，既保留交互效果又去掉讨厌的背景：

struct TransparentCardButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(4)
            .background(Color.clear) // 强制透明背景
            .cornerRadius(12)
            .shadow(color: configuration.isPressed ? .clear : .black.opacity(0.1), radius: 4, x: 0, y: 2)
            .scaleEffect(configuration.isPressed ? 0.98 : 1.0)
            .animation(.easeInOut(duration: 0.2), value: configuration.isPressed)
            .hoverEffect(.lift) // 保留悬停抬起效果
    }
}

// 替换原有的.buttonStyle(.card)即可使用
NavigationLink(destination: Text("Item: \(item)")) {
    ItemView(item: item)
}
.buttonStyle(TransparentCardButtonStyle())

方法2：直接覆盖Card样式的背景色 #

如果不想自定义样式，试试直接在NavigationLink的label里加.background(Color.clear)，强制覆盖.card自带的背景：

NavigationLink(destination: Text("Item: \(item)")) {
    ItemView(item: item)
        .background(Color.clear) // 覆盖背景为透明
}
.buttonStyle(.card)

注意：这个方法在部分SwiftUI版本里可能因为视图层级问题失效，需要实际测试验证。

方法3：手动实现交互效果，抛弃.card样式 #

要是上面两种方法都不凑效，干脆自己手动加交互效果，完全摆脱.card的限制：

struct ContentView: View {
    let items = 1 ... 10
    @State private var pressScale: CGFloat = 1.0 // 控制按压缩放

    var body: some View {
        NavigationView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 200))], spacing: 16) {
                ForEach(items, id: \.self) { item in
                    NavigationLink(destination: Text("Item: \(item)")) {
                        ItemView(item: item)
                            .scaleEffect(pressScale)
                    }
                    .hoverEffect(.lift) // 悬停抬起效果
                    .simultaneousGesture(
                        DragGesture(minimumDistance: 0)
                            .onChanged { _ in
                                withAnimation(.easeInOut(duration: 0.1)) {
                                    pressScale = 0.98
                                }
                            }
                            .onEnded { _ in
                                withAnimation(.easeInOut(duration: 0.1)) {
                                    pressScale = 1.0
                                }
                            }
                    )
                }
            }
        }
    }
}

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