SwiftUI两个拖拽对齐的BlurView出现边缘接缝，如何无叠加层合并？

问题成因 #

你遇到的分割线是UIVisualEffectView实现系统模糊时的固有特性：系统为了让模糊视图边缘更自然，会在视图边缘生成1像素的半透明过渡区域，两个模糊视图对齐后，两侧的过渡区域叠加后亮度/透明度和中间的模糊主体不一致，就形成了可见的分割线。

以下是三种无需添加额外叠加层的解决方案：

方案1：让模糊视图相邻边重叠1pt #

这是成本最低的方案，只需要在布局两个BlurView时，给相邻的边设置-1pt的padding，让两个模糊视图的边缘过渡区域重叠，就能消除分割线。示例布局代码：

VStack(spacing: 0) {
    BlurView(style: .systemMaterial)
        .padding(.bottom, -1) // 底部向上偏移1pt，和下方视图重叠
    BlurView(style: .systemMaterial)
        .padding(.top, -1) // 顶部向下偏移1pt，和上方视图重叠
}

如果是左右排列的视图，对应修改左右方向的padding即可。

方案2：修改BlurView实现，关闭边缘抗锯齿 #

修改你的BlurView代码，关闭UIVisualEffectView图层的边缘抗锯齿，直接去掉边缘的半透明过渡效果，从根源消除分割线：

import SwiftUI

struct BlurView: UIViewRepresentable {
    var style: UIBlurEffect.Style
    
    func makeUIView(context: Context) -> UIVisualEffectView{
        let view = UIVisualEffectView(effect: UIBlurEffect(style: style))
        // 关闭边缘抗锯齿，消除边缘半透明过渡
        view.layer.allowsEdgeAntialiasing = false
        // 禁止裁剪超出边界的内容，避免模糊采样被截断
        view.clipsToBounds = false
        return view
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
    }
}

注意这个方案会让模糊视图的硬边缘没有过渡，如果你没有给模糊视图加圆角的需求，这个方案效果最好。

方案3：拖拽结束后合并模糊区域 #

如果你的两个模糊视图只在拖拽结束后需要保持对齐无缝，那么可以在拖拽手势结束的回调中，判断两个视图已经对齐时，隐藏原有的两个小模糊视图，显示一个覆盖整个对齐后区域的单个BlurView，单个模糊视图自然不存在分割线问题。

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