嘿，这个需求我之前做项目的时候刚好碰到过，折腾了一会儿终于找到完美的实现方式！其实核心就是用模糊效果+遮罩的组合，让模糊只作用在视图边缘，中间完全透出底层内容。直接上代码和细节拆解：

完整实现代码 #

我们可以封装一个可复用的EdgeBlurView，方便在任何场景调用：

import SwiftUI

// 可复用的边缘模糊视图
struct EdgeBlurView: View {
    /// 边缘模糊的宽度，可自定义
    var edgeWidth: CGFloat = 20
    /// 系统模糊样式，完美匹配原生液态玻璃效果
    var blurStyle: UIBlurEffect.Style = .systemMaterial
    
    var body: some View {
        ZStack {
            // 👉 这里替换成你的实际内容视图，中间区域会完全透明
            Color.clear
                .overlay(
                    VStack {
                        Text("中间透明区域")
                            .font(.title)
                            .foregroundColor(.white)
                        Text("边缘是液态玻璃模糊")
                            .font(.subheadline)
                            .foregroundColor(.white.opacity(0.8))
                    }
                )
            
            // 核心：仅在边缘显示的模糊层
            VisualEffectView(effect: UIBlurEffect(style: blurStyle))
                .mask(
                    // 遮罩逻辑：生成"边缘环"形状，只有这个区域会显示模糊
                    Rectangle()
                        .inset(by: edgeWidth)
                        .foregroundColor(.clear)
                        .background(.black)
                        .compositingGroup()
                        .luminanceToAlpha()
                )
        }
    }
}

// 桥接UIKit的模糊效果，兼容iOS16+，和系统原生液态玻璃样式完全对齐
struct VisualEffectView: UIViewRepresentable {
    var effect: UIVisualEffect?
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        UIVisualEffectView()
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = effect
    }
}

// 预览效果
struct EdgeBlurView_Previews: PreviewProvider {
    static var previews: some View {
        ZStack {
            // 模拟底层背景，方便观察透明效果
            LinearGradient(
                colors: [.indigo, .cyan, .teal],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            .ignoresSafeArea()
            
            EdgeBlurView(edgeWidth: 25, blurStyle: .systemUltraThinMaterialDark)
                .frame(width: 320, height: 400)
                .cornerRadius(24) // 可选：添加圆角，模拟相机app的卡片样式
        }
    }
}

关键细节拆解 #

• 桥接VisualEffectView：SwiftUI原生的Blur虽然好用，但UIBlurEffect能更精准匹配系统的「液态玻璃」样式（比如systemUltraThinMaterial就是相机app、标签切换器用的那种细毛玻璃效果）。
• 遮罩（Mask）的妙用：我们用Rectangle().inset(by: edgeWidth)生成中间的透明区域，再通过.background(.black)和.luminanceToAlpha()把这个形状转成「边缘不透明、中间透明」的遮罩——这样模糊层就只会在遮罩不透明的边缘区域显示，中间完全透出底层内容。
• 自定义参数：你可以通过调整edgeWidth改变模糊边缘的粗细，blurStyle切换不同的系统模糊风格（比如systemMaterialLight适配浅色模式，systemUltraThinMaterialDark适配深色模式）。

扩展：适配圆角和全屏场景 #

如果要做类似标签切换器的全屏边缘模糊，只需要去掉.frame，加上.ignoresSafeArea()即可：

struct FullscreenEdgeBlurView: View {
    var body: some View {
        ZStack {
            // 模拟多个标签页的背景
            HStack {
                Color.orange.ignoresSafeArea()
                Color.purple.ignoresSafeArea()
            }
            
            EdgeBlurView(edgeWidth: 30, blurStyle: .systemUltraThinMaterial)
                .ignoresSafeArea()
        }
    }
}

这样实现的效果完全和系统原生的一致，没有依赖任何第三方库，也不需要复杂的计算，在iOS16及以上的SwiftUI中完美运行😎