---

name: liquid-glass-design description: iOS 26液态玻璃设计系统——具有模糊、反射和交互变形的动态玻璃材质，适用于SwiftUI、UIKit和WidgetKit。

液态玻璃设计系统（iOS 26）

实现Apple液态玻璃的模式——一种动态材质，模糊其后方内容，反射周围内容的颜色和光线，并对触摸和指针交互做出反应。涵盖SwiftUI、UIKit和WidgetKit集成。

何时激活

• 为iOS 26+构建或更新应用使用新设计语言
• 实现玻璃风格按钮、卡片、工具栏或容器
• 创建玻璃元素之间的变形过渡
• 将液态玻璃效果应用于widgets
• 将现有模糊/材质效果迁移到新的液态玻璃API

核心模式 — SwiftUI

基础玻璃效果

为任何视图添加液态玻璃的最简方式：

Text("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect()  // 默认：regular变体，胶囊形状

自定义形状和色调

Text("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect(.regular.tint(.orange).interactive(), in: .rect(cornerRadius: 12))

玻璃效果变体

| 变体 | 用途 | 示例 | |------|------|------| | .regular | 标准玻璃容器 | 卡片、面板 | | .clear | 微妙玻璃 | 背景元素 |

交互式玻璃按钮

Button("确认") {
    // 操作
}
.buttonStyle(.glass)

变形过渡

struct MorphingView: View {
    @State private var isExpanded = false
    @Namespace private var morphNamespace
    
    var body: some View {
        if isExpanded {
            ExpandedCard()
                .glassEffect(in: .rect(cornerRadius: 20))
                .matchedGeometryEffect(id: "card", in: morphNamespace)
        } else {
            CompactCard()
                .glassEffect(in: .capsule)
                .matchedGeometryEffect(id: "card", in: morphNamespace)
        }
    }
}

UIKit集成

let glassView = UIGlassEffect()
glassView.configuration = .regular
glassView.shape = .rect(cornerRadius: 16)
view.addSubview(glassView)