swiftui-liquid-glass

SwiftUI Liquid Glass

概述

使用此技能构建或审查 SwiftUI 功能，确保其全面符合 iOS 26+ Liquid Glass API。优先使用原生 API（glassEffect、GlassEffectContainer、玻璃按钮样式）和 Apple 设计指南。确保用法一致、在需要时支持交互，并关注性能。

工作流决策树

选择与请求相符的路径：

1) 审查现有功能

• 检查哪些位置适合使用 Liquid Glass，哪些位置不适合。
• 验证修饰符顺序、形状用法和容器位置是否正确。
• 检查是否处理了 iOS 26+ 可用性，并提供合理的回退方案。

2) 使用 Liquid Glass 改进功能

• 确定适合应用玻璃效果的目标组件（表面、标签、按钮、卡片）。
• 多个玻璃元素同时出现时，重构为使用 GlassEffectContainer。
• 仅对可轻点或可聚焦的元素启用交互式玻璃效果。

3) 使用 Liquid Glass 实现新功能

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

核心指南

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

审查清单

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

实现清单

• 确定目标元素和所需的玻璃效果突出程度。
• 使用 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 详情请优先参考 Apple 文档，以获取最新信息。