名称： swiftui-liquid-glass
描述： 使用 iOS 26+ Liquid Glass API 实现、审查或改进 SwiftUI 功能。适用于以下场景：被要求在新 SwiftUI 界面中采用 Liquid Glass、将现有功能重构为使用 Liquid Glass，或审查 Liquid Glass 的使用以确保其正确性、性能及设计一致性。

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 改进功能

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

3) 使用 Liquid Glass 实现新功能

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

核心准则

• 优先使用原生 Liquid Glass 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("你好")
        .padding()
        .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16))
} else {
    Text("你好")
        .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("确认") { }
    .buttonStyle(.glassProminent)

资源

• 参考指南：references/liquid-glass.md
• 请优先查阅 Apple 官方文档以获取最新的 API 详情。