SwiftUI Liquid Glass

来源：复制自 @Dimillian 的Dimillian/Skills(2025-12-31).

概览

使用此技能来构建或审查与 iOS 26+ Liquid Glass API 完全对齐的 SwiftUI 功能。优先使用原生 API (glassEffect、GlassEffectContainer、玻璃按钮样式) 和 Apple 设计指南。保持使用方式一致，在需要时具备交互性，并注意性能。

工作流决策树

选择与请求匹配的路径：

1) 审查现有功能

• 检查应在何处以及不应在何处使用 Liquid Glass。
• 验证修饰符顺序、形状使用和容器放置是否正确。
• 检查 iOS 26+ 的可用性处理以及合理的回退方案。

2) 使用 Liquid Glass 改进功能

• 识别适合应用玻璃效果的目标组件（表面、芯片、按钮、卡片）。
• 重构以使用玻璃效果容器当多个玻璃元素出现时。
• 仅为可点击或可聚焦的元素引入交互式玻璃效果。

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

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

核心准则

• 优先使用原生液态玻璃API而非自定义模糊效果。
• 使用玻璃效果容器当多个玻璃元素共存时。
• 应用.glassEffect(...)在布局和视觉修饰符之后。
• 使用.interactive()用于响应触摸/指针的元素。
• 保持相关元素的形状一致，以实现协调的外观。
• 通过条件控制#available(iOS 26, *)并提供非玻璃效果的备用方案。

审查清单

• 可用性：#available(iOS 26, *)呈现时提供备用用户界面。
• 组合：多个玻璃视图包裹在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)

资源

• 参考指南：references/liquid-glass.md
• 优先查阅苹果官方文档以获取最新的API详细信息。