介绍
# SwiftUI Liquid Glass
_归因：复制自 @Dimillian 的 `Dimillian/Skills` (2025-12-31)。_
## 概述 使用此技能来构建或审查完全符合 iOS 26+ 液态玻璃 API 的 SwiftUI 特性。优先使用原生 API（`glassEffect`、`GlassEffectContainer`、玻璃按钮样式）和 Apple 设计指南。保持用法一致，在需要时提供交互，并关注性能。
## 工作流程决策树 选择与请求匹配的路径：
### 1) 审查现有特性 - 检查哪里应该使用液态玻璃，哪里不应该。 - 验证修饰符顺序、形状使用和容器位置是否正确。 - 检查 iOS 26+ 可用性处理和合理的回退方案。
### 2) 使用液态玻璃改进特性 - 确定进行玻璃处理的目标组件（表面、标签、按钮、卡片）。 - 在出现多个玻璃元素的地方，重构为使用 `GlassEffectContainer`。 - 仅对可点击或可聚焦的元素引入交互式玻璃。
### 3) 使用液态玻璃实现新特性 - 首先设计玻璃表面和交互（形状、显著性、分组）。 - 在布局/外观修饰符之后添加玻璃修饰符。 - 仅当视图层级随动画变化时，才添加变形过渡。
## 核心指南 - 优先使用原生液态玻璃 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 版本提供回退材质和视觉效果。
## 快速代码片段 直接使用这些模式，并调整形状/色调/间距。
```swift if #available(iOS 26, *) { Text("Hello") .padding() .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16)) } else { Text("Hello") .padding() .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16)) } ```
```swift 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() } } ```
```swift Button("Confirm") { } .buttonStyle(.glassProminent) ```
## 资源 - 参考指南：`references/liquid-glass.md` - 优先查阅 Apple 文档以获取最新的 API 详情。