visionOS中hoverEffect是否支持自定义颜色设置？

目前（截至visionOS 1.x版本），系统原生的hoverEffect()修饰符并不支持直接自定义光晕颜色——它的颜色跟随系统设计规范自动适配，仅能通过contentShape调整触发区域和光晕的形状。

如果需要实现自定义颜色的hover效果，可以通过手动监听hover状态，结合视图的背景、阴影等修饰符模拟，具体方案如下：

核心思路 #

• 用@State变量跟踪视图的hover状态
• 通过onHover回调更新状态
• 根据状态切换自定义的视觉效果（背景色、阴影等）
• 保留contentShape确保hover触发区域符合预期

示例代码 #

模拟自定义背景色的hover效果 #

struct CustomHoverDemo: View {
    @State private var isHovered = false
    
    var body: some View {
        Button("Hover Me") {
            // 按钮操作逻辑
        }
        .padding(12)
        .background(isHovered ? Color.orange.opacity(0.2) : Color.clear)
        .cornerRadius(10)
        // 确保hover触发区域匹配按钮形状
        .contentShape(.hoverEffect, RoundedRectangle(cornerRadius: 10))
        .onHover { hovering in
            withAnimation(.easeInOut(duration: 0.2)) {
                isHovered = hovering
            }
        }
    }
}

模拟自定义光晕阴影的hover效果 #

如果想要更接近原生光晕的视觉效果，可以用阴影修饰符实现：

struct CustomGlowHoverDemo: View {
    @State private var isHovered = false
    
    var body: some View {
        Text("Custom Glow")
            .font(.title)
            .padding()
            .background(Color.white)
            .cornerRadius(10)
            .shadow(color: isHovered ? Color.blue.opacity(0.6) : .clear, radius: 12)
            .contentShape(.hoverEffect, RoundedRectangle(cornerRadius: 10))
            .onHover { hovering in
                withAnimation(.easeInOut(duration: 0.3)) {
                    isHovered = hovering
                }
            }
    }
}

说明 #

• 这种手动模拟的方式完全可控，你可以自由调整颜色、透明度、动画时长等参数
• 原生hoverEffect()的颜色由系统统一管理，目的是保持visionOS界面设计的一致性，因此未开放自定义颜色的API

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