
关于
实现或审查 SwiftUI Liquid Glass API,确保正确的降级处理和修饰符顺序。
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 详情。
限制
- 仅在任务明确匹配上述范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少所需输入、权限、安全边界或成功标准,请停下来要求澄清。
兼容工具
Claude CodeCursor
标签
移动端