UIVisualEffectView高度过小时闪烁异常问题及解决办法咨询

问题根源 #

UIVisualEffectView（尤其是搭配UIBlurEffect时）确实存在隐含的最小渲染尺寸限制。模糊效果依赖高斯模糊算法，需要一定的像素区域完成背景采样和模糊计算。当高度仅为2像素时，系统无法获取足够的采样范围，导致渲染逻辑异常，出现黑色闪烁、无法稳定显示模糊效果的问题；而3像素刚好达到系统能稳定处理的最小阈值，因此恢复正常。

解决方法 #

1. 视觉伪装：保持2像素视觉高度，实际用3像素渲染

给UIVisualEffectView设置3像素的实际高度，再通过裁剪层（mask）裁掉多余的1像素，既满足系统渲染要求，又保持预期视觉效果：

// 初始化模糊视图并设置3px高度约束
let effectView = UIVisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterial))
effectView.translatesAutoresizingMaskIntoConstraints = false
cell.addSubview(effectView)
NSLayoutConstraint.activate([
    effectView.leadingAnchor.constraint(equalTo: cell.leadingAnchor),
    effectView.trailingAnchor.constraint(equalTo: cell.trailingAnchor),
    effectView.bottomAnchor.constraint(equalTo: cell.bottomAnchor),
    effectView.heightAnchor.constraint(equalToConstant: 3) // 实际高度设为3px
])

// 添加mask裁剪到2px高度
let maskLayer = CALayer()
maskLayer.frame = CGRect(x: 0, y: 1, width: cell.bounds.width, height: 2) // 裁掉顶部1px
effectView.layer.mask = maskLayer

// 在cell的layoutSubviews中更新mask的frame，适配宽度变化
override func layoutSubviews() {
    super.layoutSubviews()
    effectView.layer.mask?.frame = CGRect(x: 0, y: 1, width: bounds.width, height: 2)
}

2. 自定义模糊效果，脱离系统限制

如果不想依赖UIVisualEffectView的限制，可以用Core Image实现自定义模糊，完全控制尺寸：

func createCustomBlurView(targetHeight: CGFloat, in cell: UICollectionViewCell) -> UIView {
    let blurView = UIView()
    blurView.translatesAutoresizingMaskIntoConstraints = false
    
    // 捕获cell背景作为模糊源（可根据需求调整采样对象）
    guard let snapshot = cell.snapshotView(afterScreenUpdates: false),
          let snapshotImage = snapshot.asImage() else {
        return blurView
    }
    
    // 应用高斯模糊滤镜
    let ciImage = CIImage(image: snapshotImage)
    let blurFilter = CIFilter(name: "CIGaussianBlur")!
    blurFilter.setValue(ciImage, forKey: kCIInputImageKey)
    blurFilter.setValue(4, forKey: kCIInputRadiusKey) // 调整模糊强度
    
    // 渲染模糊后的图像
    let context = CIContext(options: [.useSoftwareRenderer: false])
    guard let outputImage = blurFilter.outputImage,
          let cgImage = context.createCGImage(outputImage, from: outputImage.extent) else {
        return blurView
    }
    
    blurView.backgroundColor = UIColor(patternImage: UIImage(cgImage: cgImage))
    NSLayoutConstraint.activate([
        blurView.leadingAnchor.constraint(equalTo: cell.leadingAnchor),
        blurView.trailingAnchor.constraint(equalTo: cell.trailingAnchor),
        blurView.bottomAnchor.constraint(equalTo: cell.bottomAnchor),
        blurView.heightAnchor.constraint(equalToConstant: targetHeight)
    ])
    return blurView
}

// 给UIView添加转UIImage的扩展
extension UIView {
    func asImage() -> UIImage {
        let renderer = UIGraphicsImageRenderer(bounds: bounds)
        return renderer.image { rendererContext in
            layer.render(in: rendererContext.cgContext)
        }
    }
}

注意：自定义模糊在collection view滚动时可能有性能损耗，建议配合cell复用做缓存优化，比如提前渲染模糊图像或复用模糊视图。

3. 简化方案：直接使用3像素高度

如果设计上可以接受，直接把UIVisualEffectView的高度设为3像素，这是最省心的方式，完全符合系统渲染要求，无需额外处理。

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