按钮上glassEffect效果不显示问题求助

问题原因 #

你使用的.buttonStyle(.borderedProminent)会给按钮添加不透明的纯色背景，完全遮挡了glassEffect()的模糊通透效果，导致玻璃效果无法显示。

解决方案 #

方案1：移除borderedProminent样式，直接应用玻璃效果 #

去掉自带的突出按钮样式，给按钮直接添加glassEffect()，同时通过内边距和圆角模拟按钮形态：

Button(action: {
    Task {
        await generateRecommendation()
    }
}) {
    HStack {
        if aiService.isLoading {
            ProgressView()
                .scaleEffect(0.8)
        } else {
            Image(systemName: "sparkles")
        }
        Text(hasGeneratedRecommendation ? "Regenerate Recommendation" : "Generate Recommendation")
    }
    .frame(maxWidth: .infinity)
    .padding(.vertical, 12) // 调整内边距匹配按钮高度
}
.glassEffect()
.tint(.orange)
.disabled(aiService.isLoading)

方案2：自定义按钮样式，融合玻璃效果与交互反馈 #

如果想保留类似borderedProminent的按压反馈，可自定义ButtonStyle，将玻璃效果嵌入样式中：

// 自定义玻璃突出按钮样式
struct GlassProminentButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .frame(maxWidth: .infinity)
            .padding(.vertical, 12)
            .background(
                // 按压时调整透明度，模拟交互反馈
                configuration.isPressed ? 
                Color.orange.opacity(0.4) : 
                Color.orange.opacity(0.2)
            )
            .glassEffect()
            .cornerRadius(8) // 圆角对齐系统按钮样式
    }
}

// 调用自定义样式
Button(action: {
    Task {
        await generateRecommendation()
    }
}) {
    HStack {
        if aiService.isLoading {
            ProgressView()
                .scaleEffect(0.8)
        } else {
            Image(systemName: "sparkles")
        }
        Text(hasGeneratedRecommendation ? "Regenerate Recommendation" : "Generate Recommendation")
    }
}
.buttonStyle(GlassProminentButtonStyle())
.tint(.orange)
.disabled(aiService.isLoading)

补充说明 #

glassEffect()依赖背景的模糊通透效果，只有当按钮背景不是完全不透明时，才能看到玻璃质感。系统默认的.borderedProminent样式为了突出按钮，使用了高不透明度的纯色背景，因此会和玻璃效果冲突。

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