liquid-glass

SwiftUI 液态玻璃

概述

液态玻璃是 iOS 26+ 中的一种动态材质，结合了光学玻璃特性与流动感。它会模糊内容、反射周围的颜色和光线，并实时响应触控交互。

工作流决策树

1) 审查现有功能

• 检查哪些位置应该或不应该使用液态玻璃
• 验证修饰符顺序、形状用法和容器位置是否正确
• 检查是否处理了 iOS 26+ 的可用性，并提供回退方案

2) 使用液态玻璃改进功能

• 确定目标组件（表面、标签、按钮、卡片）
• 重构为使用 GlassEffectContainer 来容纳多个玻璃元素
• 仅为可点击或可聚焦元素添加交互式玻璃效果

3) 使用液态玻璃实现新功能

• 先设计玻璃表面和交互（形状、突出程度、分组）
• 在布局和外观修饰符之后添加玻璃修饰符
• 仅在视图层级发生变化且带动画时添加形变过渡

核心指南

• 优先使用原生液态玻璃 API，而不是自定义模糊效果
• 多个玻璃元素同时存在时使用 GlassEffectContainer
• 在布局和视觉修饰符之后应用 .glassEffect(...)
• 对会响应触控或指针操作的元素使用 .interactive()
• 保持相关元素的形状一致
• 使用 #available(iOS 26, *) 进行版本判断，并提供非玻璃效果的回退方案

审查清单

• 可用性：存在 #available(iOS 26, *)，并提供回退 UI
• 组合：多个玻璃视图由 GlassEffectContainer 包裹
• 修饰符顺序：在布局和外观修饰符之后应用 glassEffect
• 交互性：仅在存在用户交互的地方使用 interactive()
• 过渡：将 glassEffectID 与 @Namespace 配合使用以实现形变
• 一致性：功能中的形状、色调和间距保持协调

实现清单

• 定义目标元素及所需的玻璃效果突出程度
• 使用 GlassEffectContainer 包裹分组的玻璃元素，并设置间距
• 按需使用 .glassEffect(.regular.tint(...).interactive(), in: .rect(cornerRadius: ...))
• 对操作使用 .buttonStyle(.glass) / .buttonStyle(.glassProminent)
• 在视图层级发生变化时，使用 glassEffectID 添加形变过渡
• 为较早的 iOS 版本提供回退材质

快速代码片段

基本玻璃效果及回退方案

if #available(iOS 26, *) {
    Text("Hello")
        .padding()
        .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16))
} else {
    Text("Hello")
        .padding()
        .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))
}

多个玻璃元素

GlassEffectContainer(spacing: 24) {
    HStack(spacing: 24) {
        Image(systemName: "scribble.variable")
            .frame(width: 72, height: 72)
            .font(.system(size: 32))
            .glassEffect()
        Image(systemName: "eraser.fill")
            .frame(width: 72, height: 72)
            .font(.system(size: 32))
            .glassEffect()
    }
}

玻璃按钮

Button("Confirm") { }
    .buttonStyle(.glassProminent)

Button("Cancel") { }
    .buttonStyle(.glass)

形变过渡

@State private var isExpanded = false
@Namespace private var namespace

GlassEffectContainer(spacing: 40) {
    HStack(spacing: 40) {
        Image(systemName: "pencil")
            .frame(width: 80, height: 80)
            .glassEffect()
            .glassEffectID("pencil", in: namespace)

        if isExpanded {
            Image(systemName: "eraser")
                .frame(width: 80, height: 80)
                .glassEffect()
                .glassEffectID("eraser", in: namespace)
        }
    }
}

Button("Toggle") {
    withAnimation {
        isExpanded.toggle()
    }
}
.buttonStyle(.glass)

自定义玻璃效果

Text("Tinted Glass")
    .padding()
    .glassEffect(.regular.tint(.orange).interactive(), in: .capsule)

合并玻璃效果

@Namespace private var namespace

GlassEffectContainer(spacing: 20) {
    HStack(spacing: 20) {
        ForEach(items.indices, id: \.self) { index in
            ItemView(item: items[index])
                .glassEffect()
                .glassEffectUnion(id: index < 2 ? "group1" : "group2", namespace: namespace)
        }
    }
}

形状选项

• .capsule（默认）
• .rect(cornerRadius: CGFloat)
• .circle

最佳实践

1. 容器用法：多个玻璃视图始终使用 GlassEffectContainer
2. 修饰符顺序：在外观修饰符之后应用 .glassEffect()
3. 间距：谨慎选择间距值，以控制效果合并
4. 动画：视图层级变化时使用动画，实现平滑形变
5. 交互性：仅为可触控元素添加 .interactive()
6. 一致性：在应用中保持形状和样式一致