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
• 优先查阅 Apple 文档以获取最新 API 详情；除上述参考资料外，也可通过网页搜索查阅当前的 Apple Developer 文档。