iOS 26中如何创建无模糊效果的Liquid Glass（液态玻璃）元素？

阿华AIGC实验室

2026-4-2

嘿，这个问题我刚好踩过坑！你说的这种「边缘带玻璃质感但完全没有背景模糊」的效果，确实和系统相机、放大镜里的表现一模一样，咱们不用死磕UIGlassEffect的默认限制，用自定义组合就能轻松实现～

首先得说清楚：官方的UIGlassEffect不管是.regular还是.clear，底层都自带了轻微的模糊滤镜，这是它的默认特性，没法直接关掉。但系统的那种无模糊玻璃效果，本质是只保留玻璃的边缘羽化/光泽样式，中心区域完全透传背景，咱们可以手动模拟这个逻辑。

具体实现方案

我整理了两种实用的方式，你可以按需选：

方式一：自定义无模糊玻璃视图（最贴近系统效果）

这个方案是通过遮罩（mask）让UIVisualEffectView只渲染边缘的环形区域，中心用完全透明的视图填充，完美复刻系统的表现：

import UIKit

class NoBlurLiquidGlassView: UIView {
    // 可选：暴露圆角属性，方便外部调整
    var cornerRadius: CGFloat = 16 {
        didSet {
            layer.cornerRadius = cornerRadius
            setupEdgeMask()
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupBaseStyle()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupBaseStyle()
    }
    
    private func setupBaseStyle() {
        // 基础圆角设置
        layer.cornerRadius = cornerRadius
        layer.masksToBounds = true
        
        // 1. 添加玻璃边缘效果视图
        let glassEffect = UIGlassEffect(style: .clear)
        let edgeEffectView = UIVisualEffectView(effect: glassEffect)
        edgeEffectView.frame = bounds
        edgeEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        addSubview(edgeEffectView)
        
        // 2. 给边缘视图加遮罩，只保留环形边缘
        setupEdgeMask(for: edgeEffectView)
        
        // 3. 添加中心透明视图，用于承载子控件
        let clearContentView = UIView(frame: bounds)
        clearContentView.backgroundColor = .clear
        clearContentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        addSubview(clearContentView)
        // 把clearContentView设为默认的子视图容器，方便外部添加内容
        self.contentView = clearContentView
    }
    
    private func setupEdgeMask(for view: UIView) {
        let edgeMask = CAShapeLayer()
        // 创建外圆角路径
        let outerPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius)
        // 创建内圆角路径（比外路径小1pt，形成环形边缘）
        let innerPath = UIBezierPath(roundedRect: bounds.insetBy(dx: 1, dy: 1), cornerRadius: cornerRadius - 1)
        // 合并路径，用奇偶规则只显示环形区域
        outerPath.append(innerPath)
        outerPath.usesEvenOddFillRule = true
        
        edgeMask.path = outerPath.cgPath
        edgeMask.fillRule = .evenOdd
        view.layer.mask = edgeMask
    }
    
    // 方便外部添加子视图的容器
    private(set) var contentView: UIView!
}

方式二：简化版实现（快速上手）

如果不需要太精细的边缘效果，也可以用更简单的方式：直接给透明视图添加玻璃风格的边框，配合轻微的阴影模拟玻璃光泽：

let simpleGlassView = UIView(frame: CGRect(x: 100, y: 200, width: 200, height: 400))
simpleGlassView.backgroundColor = .clear
simpleGlassView.layer.cornerRadius = 16
simpleGlassView.layer.masksToBounds = true
// 添加玻璃风格的边框
simpleGlassView.layer.borderWidth = 1
simpleGlassView.layer.borderColor = UIColor.systemGray6.withAlphaComponent(0.5).cgColor
// 添加轻微阴影模拟玻璃的立体感
simpleGlassView.layer.shadowColor = UIColor.black.withAlphaComponent(0.1).cgColor
simpleGlassView.layer.shadowOffset = CGSize(width: 0, height: 1)
simpleGlassView.layer.shadowRadius = 4
simpleGlassView.layer.shadowOpacity = 1
simpleGlassView.layer.masksToBounds = false // 注意这里要关闭mask，让阴影显示
self.view.addSubview(simpleGlassView)

使用示例

不管用哪种方式，添加到视图上的逻辑都很简单：

// 用自定义视图的示例
let myGlassView = NoBlurLiquidGlassView(frame: CGRect(x: 100, y: 200, width: 200, height: 400))
// 如果要加子视图，直接加到contentView里
let label = UILabel(text: "无模糊玻璃效果测试")
myGlassView.contentView.addSubview(label)
label.center = myGlassView.contentView.center
self.view.addSubview(myGlassView)