SwiftUI技术问题：如何模糊视图的默认背景色？

当然有办法解决这个问题！你之前用.blur(radius: 20)会模糊整个视图及子元素，是因为这个修饰符会作用于整个视图层级。要实现仅模糊背景、内部文本/按钮完全清晰，同时适配系统明暗模式，我们可以通过分层的方式来处理：

核心思路 #

用ZStack将视图分为两层：

• 底层：专门用于模糊的背景层，使用系统原生的毛玻璃效果（自动适配明暗模式）
• 上层：承载你的文本、按钮等内容，完全不受模糊影响

具体实现步骤 #

1. 先封装一个SwiftUI可用的UIVisualEffectView（因为SwiftUI原生的模糊修饰符无法单独作用于背景，而UIKit的UIVisualEffectView刚好支持背景毛玻璃效果）：

struct VisualEffectView: UIViewRepresentable {
    var effect: UIVisualEffect?
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        UIVisualEffectView()
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = effect
    }
}

2. 在需要模糊背景的视图中，用ZStack分层：

ZStack {
    // 背景模糊层 - 仅这一层被模糊，自动适配明暗模式
    VisualEffectView(effect: UIBlurEffect(style: .systemMaterial))
        .edgesIgnoringSafeArea(.all) // 根据需求决定是否忽略安全区
    
    // 内容层 - 完全清晰，不受模糊影响
    VStack(spacing: 20) {
        Text("这是清晰的标题文本")
            .font(.title)
            .foregroundColor(.primary)
        
        Text("这是一段普通的说明文字，同样保持清晰")
            .font(.body)
        
        Button("点击我（清晰按钮）") {
            // 按钮逻辑
        }
        .padding(.horizontal, 24)
        .padding(.vertical, 12)
        .background(Color.accentColor)
        .foregroundColor(.white)
        .cornerRadius(8)
    }
    .padding()
}

针对局部视图的场景 #

如果你的模糊背景不是全屏，而是某个卡片/容器视图的背景，可以直接把模糊层放在容器的background修饰符里：

VStack(spacing: 16) {
    Text("卡片内的清晰文本")
    Button("卡片内的按钮") {}
}
.frame(width: 320, height: 180)
.background(
    VisualEffectView(effect: UIBlurEffect(style: .systemMaterial))
        .cornerRadius(16)
)
.padding()

关键说明 #

• UIBlurEffect(style: .systemMaterial)会自动跟随系统的明暗模式切换：亮模式下是浅色半透明模糊，暗模式下是深色半透明模糊，完全符合你“保留默认背景适配逻辑”的需求。
• 这种分层方式彻底分离了背景和内容，确保只有背景被模糊，所有子元素保持清晰。

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