如何快速上手 iOS 26 Liquid Glass：swift-ios-skills 液态玻璃效果实战教程-平芜编程栈

【免费下载链接】swift-ios-skills

Agent Skills for iOS 26+, Swift 6.3, SwiftUI, and modern Apple frameworks

项目地址：https://gitcode.com/gh_mirrors/sw/swift-ios-skills

iOS 26 带来了全新的Liquid Glass（液态玻璃）材质：模糊背后内容、反射周围色彩与光线，还能实时响应触摸和指针。想快速做出 iOS 26 液态玻璃效果，swift-ios-skills 是一套面向 iOS 26+ 与 Swift 6.3 的 Agent Skills 开源项目，其中 swiftui-liquid-glass 技能把 glassEffect、GlassEffectContainer、玻璃按钮样式、形变动画等要点整理成了可直接参考的实战指南，帮你快速上手 Liquid Glass。

1. Liquid Glass 是什么？

Liquid Glass 是 Apple 在 iOS 26、iPadOS 26、macOS 26 等"26 世代"平台上推出的动态半透明材质。理解它只要记住三点：

自动生效：用最新 SDK 构建时，系统自带的标签栏、工具栏、导航栏、sheet 等组件会自动采用液态玻璃外观，无需写代码；
自定义才需要 API：只有当你要做"浮在内容之上的自定义控件"（如悬浮工具条、自定义胶囊）时，才需要用到glassEffect系列 API；
用在控件层，不用于内容背景：玻璃效果适合功能控件和导航表面，不要拿它去装饰大段静态内容。

核心 API 一览

API	作用
`glassEffect(_:in:)`	在视图背后应用玻璃材质，默认 Capsule 胶囊形状
`Glass`	玻璃配置：`.regular`/`.clear`/`.identity`，可链式`.tint(_:)`染色、`.interactive()`启用触摸反馈
`GlassEffectContainer`	容器，把多个玻璃形状合并为一次渲染，实现融合与形变
`glassEffectID(_:in:)`	配合`@Namespace`提供稳定身份，让形变动画"知道"从哪里变形而来
`glassEffectTransition(_:)`	控制玻璃出现/消失的方式
`glassEffectUnion(id:namespace:)`	把多个视图合并成一个玻璃形状
`scrollEdgeEffectStyle`	自定义滚动边界（如顶部）的视觉过渡
`ToolbarSpacer`	工具栏项目之间的视觉分隔
`backgroundExtensionEffect`	把背景镜像延展到侧边栏等安全区之下

完整 API 参考与更多示例见 references/liquid-glass.md。

2. 快速上手：安装 swift-ios-skills

每个技能都是自包含的，按需安装即可。推荐通过 skills CLI 交互式安装（会自动适配你的 AI 编码代理）：

npx skills add dpearson2699/swift-ios-skills

只装液态玻璃这一个技能：

npx skills add dpearson2699/swift-ios-skills --skill swiftui-liquid-glass

如果用的是 Claude Code，也可以通过插件市场安装 SwiftUI 主题包（包含swiftui-liquid-glass在内的 10 个 SwiftUI 技能）：

/plugin install swiftui-skills@swift-ios-skills

💡 装好后直接对 AI 说"帮我把这个悬浮工具条改成 Liquid Glass 样式"，它就能按技能内置的最佳实践给出代码。手动实现时，按下面四步走即可。

3. 实战四步：做出你的第一个玻璃控件

步骤 1：版本判断 + 降级方案

所有 Liquid Glass API 都要求 iOS 26.0+，老版本必须保留可用降级（通常用.ultraThinMaterial材质近似）：

if #available(iOS 26, *) { content.padding().glassEffect(in: .rect(cornerRadius: 16)) } else { content.padding().background(.ultraThinMaterial, in: .rect(cornerRadius: 16)) }

步骤 2：给视图加玻璃

.glassEffect()默认是标准玻璃 + 胶囊形状，自定义形状传in:参数。注意顺序：先写布局与外观修饰符（padding、frame、font 等），最后再挂玻璃效果：

Text("Hello, World!") .font(.title) .padding() .glassEffect(in: .rect(cornerRadius: 16))

想染色、启用触摸反馈，直接链式组合：.glassEffect(.regular.tint(.orange).interactive())。

步骤 3：玻璃按钮

按钮优先用内置玻璃按钮样式，它们自带触摸/指针反馈，不需要再手动加.interactive()：

Button("Action") { } .buttonStyle(.glass) // 标准玻璃按钮 Button("Primary") { } .buttonStyle(.glassProminent) // 高强调主操作按钮

需要特定颜色或透明变体时用可配置样式，如.buttonStyle(.glass(.clear))。⚠️ 透明玻璃（.clear）放在明亮背景上要先验证可读性，必要时加一层轻微暗化（dimming）垫底。

步骤 4：组合容器与形变动画 🎬

多个相邻玻璃形状放在同一个GlassEffectContainer里，系统会一次渲染并让它们互相融合；spacing决定"多近时开始融合"——建议与内部布局间距保持一致，这样静止时彼此独立、动画时平滑合并：

GlassEffectContainer(spacing: 40) { HStack(spacing: 40) { Image(systemName: "pencil").frame(width: 80, height: 80).glassEffect() Image(systemName: "eraser.fill").frame(width: 80, height: 80).glassEffect() } }

当视图随动画插入/删除时，加上glassEffectID（用@Namespace）+glassEffectTransition，玻璃形状就会"流动"变形。关键细节：ID 和 transition 要挂在会被插入/移除的玻璃子视图上，而不是永远存在的容器上：

if isExpanded { Image(systemName: "eraser.fill") .frame(width: 80, height: 80) .glassEffect() .glassEffectID("eraser", in: ns) .glassEffectTransition(.matchedGeometry) }

过渡方式怎么选：容器间距内的相邻效果用.matchedGeometry（形变）；距离较远、不想做几何匹配的用.materialize（淡入淡出）；完全不要动画用.identity。

4. 实战场景：三个高频踩坑点

技能目录内置了三个典型评审场景（位于 evals/），正好覆盖了新手最容易翻车的三种情况：

明亮背景上的玻璃内容层：图表面板评审 —— 大图表面板只是"视觉容器"，不该加玻璃；真正要玻璃化的是旁边的 Play 按钮，并处理亮底对比度。
状态徽章别做成"假按钮"：Sheet 头部评审 —— 工具栏里的"到期数量"被用户反复点击，因为它长得像控件。只读状态应当作为内容呈现，不要加.interactive()，也不要占用操作槽位。
悬浮工具组的形变：浮动工具面板 —— 画笔/橡皮/套索三个图标用一个GlassEffectContainer包裹，展开动画用稳定字符串 ID 而非模型对象，并避免多层透明包装嵌套。

5. 避坑指南：常见错误对照表

常见错误	正确做法
玻璃装饰了静态内容	只留在控件/导航层
`.glassEffect()`写在 padding/frame 之前	先布局与外观，最后挂玻璃
相关效果用了嵌套容器	一组融合/形变关系对应一个`GlassEffectContainer`
状态数字也加`.interactive()`	只读状态作为内容呈现，不暴露按压暗示
间距参数随意填	容器 spacing 与内部布局间距保持一致
没有 iOS 26 以下方案	`if #available(iOS 26, *)`+ 功能等价的降级 UI

别忘了辅助功能：开启Reduce Transparency（降低透明度）和Reduce Motion（减弱动态效果）实测自绘玻璃的表现；性能上用 Instruments 检查渲染，并控制同屏玻璃效果的数量。

6. 速查：资料导航 📚

路径	说明
skills/swiftui-liquid-glass/SKILL.md	主技能文件：工作流程、核心 API、代码示例、评审清单
skills/swiftui-liquid-glass/references/liquid-glass.md	完整 API 参考：性能指南、辅助功能注意事项、最佳实践汇总
evals/swiftui-liquid-glass-tool-palette/task.md	悬浮工具组（融合/形变）评审场景
evals/swiftui-liquid-glass-status-affordance/task.md	状态徽章可点击性（affordance）评审场景
evals/swiftui-liquid-glass-content-layer-clear/task.md	明亮背景上的清晰玻璃与可读性评审场景
README.md	项目总览：86 个技能清单与全部安装方式