如何让Vision Pro中LazyVGrid内Button的高亮圆角更小？

Vision Pro上LazyVGrid内的Button会默认显示大圆角灰色椭圆高亮（hover/点击时），而iPad无此表现。要修改这个高亮的圆角，不能只在默认样式上叠加元素，需要完全自定义ButtonStyle来覆盖系统默认的高亮效果。

实现步骤： #

1. 创建自定义ButtonStyle，接管按钮的背景绘制逻辑，包括hover（Vision Pro专属）和点击状态
2. 为Button应用这个自定义样式

完整代码示例： #

// 自定义ButtonStyle，替换系统默认高亮
struct CustomGridButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(
                Group {
                    if configuration.isPressed || configuration.isHovered {
                        // 自定义高亮背景：设置你想要的圆角和颜色
                        RoundedRectangle(cornerRadius: 8) // 这里修改圆角值
                            .fill(Color.gray.opacity(0.3))
                    } else {
                        // 常态背景（可选，也可以留空）
                        RoundedRectangle(cornerRadius: 8)
                            .fill(Color.clear)
                    }
                }
            )
            .contentShape(RoundedRectangle(cornerRadius: 8)) // 确保点击/hover区域和背景一致
    }
}

// 原LazyVGrid代码修改
LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: columnCount), spacing: 10) {
    ForEach(transformations.keys.sorted(), id: \.self) { transformationId in
        if let transformation = transformations[transformationId] {
            Button(action: {
                self.sharedState.transformationId = transformationId
                sharedState.menu = .transformation
            }) {
                VStack {
                    Text(transformation.name)
                        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 20)
                    Text(["#itx", "#tutorial"].map { "#\($0)" }.joined(separator: " ")) //tags
                        .font(.caption)
                        .foregroundColor(.yellow)
                }
            }
            .buttonStyle(CustomGridButtonStyle()) // 应用自定义样式
        }
    }
}

说明： #

• configuration.isHovered是Vision Pro特有的状态，用来处理视线悬停的高亮
• 调整cornerRadius的值可以自定义高亮的圆角大小，替换成你需要的数值
• contentShape确保按钮的交互区域和背景形状匹配，避免出现点击范围和视觉不一致的问题
• 这个样式会让Vision Pro和iPad的按钮表现统一，不再出现Vision Pro默认的大圆角椭圆高亮

内容的提问来源于stack exchange，提问作者János