SuperAPI AI 工具集

swiftui-liquid-glass

前端与建站

查看项目

更新于 10-15 08:29

技能介绍

用途

该技能用于构建或审查完全符合 iOS 26+ Liquid Glass API 的 SwiftUI 功能。它强调优先使用原生 API(glassEffect、GlassEffectContainer、玻璃按钮样式)以及 Apple 设计指南,目标是让 Liquid Glass 的使用保持一致、在需要处具备交互性,并兼顾性能。

主要能力

技能围绕三类任务展开,并提供对应的决策路径:

  1. 审查现有功能:检查 Liquid Glass 应在何处使用、何处不应使用;验证修饰符顺序、形状用法与容器放置是否正确;检查 iOS 26+ 的可用性处理与合理的降级方案。
  2. 改进使用 Liquid Glass 的功能:识别适合玻璃处理的组件(表面、chip、按钮、卡片);当出现多个玻璃元素时重构为使用 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("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)

适用场景

适用于 iOS 26+ 的 SwiftUI 界面开发,尤其是需要采用 Liquid Glass 视觉风格、或需要审查既有 Liquid Glass 实现是否正确、性能是否合理、设计是否契合的场景。

限制

技能资料未提供具体的收费、价格、平台支持范围或效果保证等信息,这些内容暂未提供。使用时应以 Apple 官方文档为准,并结合网络搜索查阅最新的 Apple Developer 文档。