swiftui-liquid-glass

SwiftUI Liquid Glass

来源说明：摘自 @Dimillian 的 Dimillian/Skills（2025-12-31）。

概述

使用这项技能构建或审查 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, *)，并提供回退界面。
• 组合：多个玻璃视图由 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 文档，以获取最新信息。