---

name: swiftui-liquid-glass description: 使用正确的回退和修饰符顺序实现或审查 SwiftUI Liquid Glass API。 risk: safe source: "Dimillian/Skills (MIT)" date_added: "2026-03-25"

SwiftUI Liquid Glass

概述

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

何时使用

• 当用户想要在 SwiftUI UI 中采用或审查 Liquid Glass 时。
• 当你需要 Liquid Glass 的正确 API 用法、回退处理或修饰符排序时。

工作流决策树

选择与请求匹配的路径：

1) 审查现有功能

• 检查哪里应该使用 Liquid Glass，哪里不应该。
• 验证正确的修饰符顺序、形状使用和容器放置。
• 检查 iOS 26+ 可用性处理和合理的回退。

2) 使用 Liquid Glass 改进功能

• 确定需要 glass 处理的目标组件（表面、芯片、按钮、卡片）。
• 在多个 glass 元素出现时重构为使用 GlassEffectContainer。
• 仅对可点击或可聚焦的元素引入交互式 glass。

3) 使用 Liquid Glass 实现新功能

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

核心准则

• 优先使用原生 Liquid Glass API 而非自定义模糊。
• 当多个 glass 元素共存时使用 GlassEffectContainer。
• 在布局和视觉修饰符之后应用 .glassEffect(...)。
• 对响应触摸/指针的元素使用 .interactive()。
• 在相关元素之间保持形状一致以获得统一外观。
• 使用 #available(iOS 26, *) 进行门控并提供非 glass 回退。

审查清单

• 可用性：存在 #available(iOS 26, *) 及回退 UI。
• 组合：多个 glass 视图包装在 GlassEffectContainer 中。
• 修饰符顺序：glassEffect 在布局/外观修饰符之后应用。
• 交互性：interactive() 仅用于存在用户交互的地方。
• 过渡：使用 glassEffectID 配合 @Namespace 进行变形。
• 一致性：形状、着色和间距在整个功能中对齐。

实现清单

• 定义目标元素和期望的 glass 突出度。
• 将分组的 glass 元素包装在 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 详情。

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少所需输入、权限、安全边界或成功标准，请停下来要求澄清。