AI Skills
swiftui-liquid-glass

swiftui-liquid-glass

热门

使用 iOS 26+ Liquid Glass API 实现、审查或改进 SwiftUI 功能。当需要在新 SwiftUI UI 中采用 Liquid Glass、重构现有功能以使用 Liquid Glass，或审查 Liquid Glass 使用的正确性、性能和设计一致性时使用。

3844Star
203Fork
更新于 2026/3/29
获取 Skill源代码

相关 Skills

design11万algorithmic-art15万frontend-ui-engineering7.7万
SKILL.md
readonly只读
name
swiftui-liquid-glass
description

使用 iOS 26+ Liquid Glass API 实现、审查或改进 SwiftUI 功能。当需要在新 SwiftUI UI 中采用 Liquid Glass、重构现有功能以使用 Liquid Glass，或审查 Liquid Glass 使用的正确性、性能和设计一致性时使用。

SwiftUI Liquid Glass

概述

使用此技能构建或审查完全符合 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("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 详情。