如何用SwiftUI的Materials创建类似麦当劳的模糊视图（无需第三方库）

SwiftUI原生的material系列修饰符完全可以实现你要的这种毛玻璃模糊效果，不需要依赖第三方库，而且通常不需要额外设置透明度——因为material本身就集成了半透明和模糊的属性，不同类型的material已经预设了合适的透光度和模糊强度。

核心实现代码 #

直接通过background修饰符给承载标识的容器添加material背景即可，示例如下：

struct McdonaldsBlurDemo: View {
    var body: some View {
        // 模拟实际场景的背景层
        ZStack {
            Image("your-background-image")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)
            
            // 带模糊背景的标识容器
            Text("McDonalds")
                .font(.system(size: 32, weight: .bold))
                .foregroundColor(.white)
                .padding(.horizontal, 24)
                .padding(.vertical, 12)
                .background(.ultraThinMaterial) // 切换不同material调整效果
                .cornerRadius(10)
        }
    }
}

不同material效果选择 #

根据你想要的模糊程度和背景透出效果，选择对应的material：

• .ultraThinMaterial：最淡的模糊，背景透出最明显，适合需要轻量模糊的场景
• .thinMaterial：比ultraThin稍浓，模糊感提升
• .regularMaterial：标准模糊效果，平衡模糊度与背景可见性
• .thickMaterial：模糊度更高，背景透出少，视觉更厚重
• .ultraThickMaterial：最浓的模糊，几乎完全遮挡背景细节

微调透明度（可选） #

如果原生material的透光度不符合预期，可以叠加opacity(_:)修饰符调整，比如：

.background(.regularMaterial.opacity(0.8))

不过多数情况下，原生material的默认参数已经能匹配这类品牌标识的模糊设计。

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