SuperAPI AI 工具集

swiftui-liquid-glass

前端与建站

查看项目

更新于 10-15 20:31

技能介绍

用途:该技能用于构建或审查完全符合 iOS 26+ Liquid Glass API 的 SwiftUI 功能,优先使用原生 API(glassEffect、GlassEffectContainer、玻璃按钮样式)并遵循 Apple 设计指南,保证用法一致、按需交互并注意性能。

主要能力与工作路径:1)审查现有功能:判断哪些位置应使用或不使用液态玻璃,检查修饰符顺序、形状用法与容器放置,验证 iOS 26+ 可用性处理及合理回退。2)用液态玻璃改进功能:识别适合玻璃处理的组件(表面、标签、按钮、卡片),在多个玻璃元素同时出现时改用 GlassEffectContainer,仅对可点击或可聚焦元素引入交互式玻璃。3)实现新功能:先设计玻璃表面与交互(形状、突出程度、分组),再在布局与外观修饰符之后添加玻璃修饰符,仅当视图层级随动画变化时添加形变过渡。

核心准则:优先原生液态玻璃 API 而非自定义模糊;多个玻璃元素共存时使用 GlassEffectContainer;.glassEffect(...) 应用于布局和视觉修饰符之后;对可响应触摸或指针的元素使用 .interactive();相关元素保持形状一致;用 #available(iOS 26, *) 做门槛并提供非玻璃回退。

审查要点:是否含可用性判断与回退 UI;多个玻璃视图是否被 GlassEffectContainer 包裹;glassEffect 是否位于布局/外观修饰符之后;interactive() 是否仅用于有交互处;形变是否用 glassEffectID 配合 @Namespace;形状、着色与间距是否统一。

实现要点:确定目标元素与玻璃突出程度;将成组玻璃元素放入 GlassEffectContainer 并调整间距;按需使用 .glassEffect(.regular.tint(...).interactive(), in: .rect(cornerRadius: ...));动作用 .buttonStyle(.glass) 或 .buttonStyle(.glassProminent);层级变化时用 glassEffectID 添加形变过渡;为更早 iOS 版本提供回退材质与视觉。

代码片段仅作模式参考,形状、着色与间距需按需调整,例如在 #available(iOS 26, *) 下对视图应用 .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16)),否则使用 .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16)) 回退;多个图标可放入 GlassEffectContainer(spacing: 24) 中;按钮可用 .buttonStyle(.glassProminent)。

参考资料:官方 Apple 文档包括 SwiftUI、AppKit、UIKit、WidgetKit 的 Liquid Glass 实现指南,另有社区模式与示例参考;API 细节与设计指南建议以官方文档为准。

限制:以上仅覆盖 iOS 26+ 相关原生能力与回退策略,具体平台支持范围、价格、性能数据及完整 API 清单暂未提供。