Help us improve
Share bugs, ideas, or general feedback.
Implements iOS 26 Liquid Glass effects in SwiftUI, UIKit, and WidgetKit for dynamic blur, reflections, interactive deformation, and morphing transitions between glass elements.
npx claudepluginhub xu-xiang/everything-claude-code-zhHow this skill is triggered — by the user, by Claude, or both
Slash command
/everything-claude-code:liquid-glass-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
实现 Apple 灵动玻璃(Liquid Glass)的设计模式 — 这是一种动态材质,可以模糊背后的内容,反射周围内容的颜色和光影,并对触摸和指针交互做出反应。涵盖了 SwiftUI、UIKit 和 WidgetKit 的集成。
Implements Apple's iOS 26 Liquid Glass design system with dynamic blur, reflection, and interactive deformation for SwiftUI, UIKit, and WidgetKit.
Implements iOS 26 Liquid Glass design system with dynamic glass material, blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.
Implements, refactors, or reviews iOS 26+ SwiftUI Liquid Glass UI using native glassEffect, GlassEffectContainer, glass button styles, availability gates, and fallback UI.
Share bugs, ideas, or general feedback.
实现 Apple 灵动玻璃(Liquid Glass)的设计模式 — 这是一种动态材质,可以模糊背后的内容,反射周围内容的颜色和光影,并对触摸和指针交互做出反应。涵盖了 SwiftUI、UIKit 和 WidgetKit 的集成。
为任何视图添加灵动玻璃效果的最简单方法:
Text("Hello, World!")
.font(.title)
.padding()
.glassEffect() // 默认:常规变体,胶囊形状
Text("Hello, World!")
.font(.title)
.padding()
.glassEffect(.regular.tint(.orange).interactive(), in: .rect(cornerRadius: 16.0))
关键自定义选项:
.regular — 标准玻璃效果.tint(Color) — 添加颜色提亮以突出显示.interactive() — 响应触摸和指针交互.capsule(默认)、.rect(cornerRadius:)、.circleButton("Click Me") { /* 操作 */ }
.buttonStyle(.glass)
Button("Important") { /* 操作 */ }
.buttonStyle(.glassProminent)
始终将多个玻璃视图包裹在容器中,以优化性能和实现变形效果:
GlassEffectContainer(spacing: 40.0) {
HStack(spacing: 40.0) {
Image(systemName: "scribble.variable")
.frame(width: 80.0, height: 80.0)
.font(.system(size: 36))
.glassEffect()
Image(systemName: "eraser.fill")
.frame(width: 80.0, height: 80.0)
.font(.system(size: 36))
.glassEffect()
}
}
spacing 参数控制合并距离 — 越近的元素其玻璃形状会融合在一起。
使用 glassEffectUnion 将多个视图合并为一个玻璃形状:
@Namespace private var namespace
GlassEffectContainer(spacing: 20.0) {
HStack(spacing: 20.0) {
ForEach(symbolSet.indices, id: \.self) { item in
Image(systemName: symbolSet[item])
.frame(width: 80.0, height: 80.0)
.glassEffect()
.glassEffectUnion(id: item < 2 ? "group1" : "group2", namespace: namespace)
}
}
}
在玻璃元素出现/消失时创建平滑的变形:
@State private var isExpanded = false
@Namespace private var namespace
GlassEffectContainer(spacing: 40.0) {
HStack(spacing: 40.0) {
Image(systemName: "scribble.variable")
.frame(width: 80.0, height: 80.0)
.glassEffect()
.glassEffectID("pencil", in: namespace)
if isExpanded {
Image(systemName: "eraser.fill")
.frame(width: 80.0, height: 80.0)
.glassEffect()
.glassEffectID("eraser", in: namespace)
}
}
}
Button("Toggle") {
withAnimation { isExpanded.toggle() }
}
.buttonStyle(.glass)
要允许水平滚动内容延伸到侧边栏或检查器(Inspector)下方,请确保 ScrollView 内容触及容器的领先/尾随(leading/trailing)边缘。当布局延伸到边缘时,系统会自动处理侧边栏下方的滚动行为 — 无需额外的修饰符。
let glassEffect = UIGlassEffect()
glassEffect.tintColor = UIColor.systemBlue.withAlphaComponent(0.3)
glassEffect.isInteractive = true
let visualEffectView = UIVisualEffectView(effect: glassEffect)
visualEffectView.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.layer.cornerRadius = 20
visualEffectView.clipsToBounds = true
view.addSubview(visualEffectView)
NSLayoutConstraint.activate([
visualEffectView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
visualEffectView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
visualEffectView.widthAnchor.constraint(equalToConstant: 200),
visualEffectView.heightAnchor.constraint(equalToConstant: 120)
])
// 向 contentView 添加内容
let label = UILabel()
label.text = "Liquid Glass"
label.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.contentView.addSubview(label)
NSLayoutConstraint.activate([
label.centerXAnchor.constraint(equalTo: visualEffectView.contentView.centerXAnchor),
label.centerYAnchor.constraint(equalTo: visualEffectView.contentView.centerYAnchor)
])
let containerEffect = UIGlassContainerEffect()
containerEffect.spacing = 40.0
let containerView = UIVisualEffectView(effect: containerEffect)
let firstGlass = UIVisualEffectView(effect: UIGlassEffect())
let secondGlass = UIVisualEffectView(effect: UIGlassEffect())
containerView.contentView.addSubview(firstGlass)
containerView.contentView.addSubview(secondGlass)
scrollView.topEdgeEffect.style = .automatic
scrollView.bottomEdgeEffect.style = .hard
scrollView.leftEdgeEffect.isHidden = true
let favoriteButton = UIBarButtonItem(image: UIImage(systemName: "heart"), style: .plain, target: self, action: #selector(favoriteAction))
favoriteButton.hidesSharedBackground = true // 选择不使用共享玻璃背景
struct MyWidgetView: View {
@Environment(\.widgetRenderingMode) var renderingMode
var body: some View {
if renderingMode == .accented {
// 强调色模式:白色色调、主题化的玻璃背景
} else {
// 全色模式:标准外观
}
}
}
HStack {
VStack(alignment: .leading) {
Text("Title")
.widgetAccentable() // 强调组
Text("Subtitle")
// 主要组(默认)
}
Image(systemName: "star.fill")
.widgetAccentable() // 强调组
}
Image("myImage")
.widgetAccentedRenderingMode(.monochrome)
VStack { /* 内容 */ }
.containerBackground(for: .widget) {
Color.blue.opacity(0.2)
}
| 决策 | 理由 |
|---|---|
| 使用 GlassEffectContainer 包裹 | 性能优化,支持玻璃元素之间的变形过渡 |
spacing 参数 | 控制合并距离 — 微调元素融合所需的接近程度 |
@Namespace + glassEffectID | 支持在视图层级变化时实现平滑的变形过渡 |
interactive() 修饰符 | 显式开启触摸/指针反应 — 并非所有玻璃都应有响应 |
| UIKit 中的 UIGlassContainerEffect | 与 SwiftUI 保持一致的容器模式 |
| 小组件中的强调渲染模式 | 当用户选择强调色主屏幕时,系统会应用色调玻璃 |
.glassEffect()。.interactive()(如按钮、可切换项目)。withAnimation:在更改视图层级时使用,以启用平滑的变形过渡。.glassEffect() 视图。clipsToBounds = true。