iOS 26 液态玻璃效果适配指南

Liquid Glass 是什么？

简单说，它是苹果为 iOS 26、iPadOS 26 及 watchOS 11 打造的新视觉语言，特点如下：

• 分层设计：玻璃层始终漂浮在主内容之上，不与主 UI 争抢视觉焦点。

• 动态模糊：系统实时采样下方内容，进行模糊和着色处理，让玻璃像水滴一样“融”进背景。

• 统一动效：交互时，玻璃会有微妙的尺寸变化和高光闪烁，如同液体流动。

一句话：它既是装饰，也是交互的一部分。

基础用法：`glassEffect()` 三连击

在 SwiftUI 中，苹果提供 glassEffect() 修饰符，一行代码就能实现玻璃效果：

Button {    // TODO: Action
} label: {
    Label("Home", systemImage: "house")
        .labelStyle(.iconOnly)
        .frame(width: 50, height: 50)
        .foregroundColor(.red)
}.glassEffect()  // 默认玻璃

若没看到效果，大概率是给按钮加了不透明背景，去掉背景就能呈现通透感！

1、给玻璃上色——tint()

.glassEffect(.regular.tint(.purple.opacity(0.8)))

• regular：强度，系统预设 .thin / .regular / .thick 三档。

• tint：给玻璃液滴添色，记得配合 opacity，避免颜色过实。

2、让玻璃活起来—— interactive()

.glassEffect(.regular.tint(.purple).interactive())

点按时按钮会略微放大并伴随特效，这个细节能让用户觉得“这东西像真的液体！”

3、把玻璃们“粘”在一起—— glassEffectID()

多个玻璃组件靠近时，给它们设置同一个 ID，系统会将其渲染成“一整块”：

@Namespace var glassNS

Button("A") {}
    .glassEffect(.regular)
    .glassEffectID("menu", in: glassNS)

Button("B") {}
    .glassEffect(.regular)
    .glassEffectID("menu", in: glassNS)

配合 GlassEffectContainer { ..、} 使用，性能更稳定，不会掉帧。

实战 Demo：制作 Path 风格的漂浮菜单

最终效果：中间一个 + 号，点开后四个子按钮像水珠一样弹射出来，收起时又自动融合成一整滴玻璃。

import SwiftUI

struct FloatingMenu: View {
    enum Item: String, CaseIterable {
        case home = "house", write = "pencil", chat = "bubble.left", mail = "envelope"
        var offset: CGSize {
            switch self {
            case .home:  return CGSize(width: -0, height: -70)
            case .write: return CGSize(width:  0, height: -140)
            case .chat:  return CGSize(width: 0, height:  -210)
            case .mail:  return CGSize(width:  0, height:  -280)
            }
        }
    }
    @State private var expand = false
    @Namespace private var ns

    var body: some View {
        GlassEffectContainer {
            // 使用 ZStack 让所有按钮共享同一坐标系
            ZStack(alignment: .bottomTrailing) {
                ForEach(Item.allCases, id: \.self) { item in
                    Button {
                        print("点击")
                    } label: {
                        Image(systemName: item.rawValue)
                            .frame(width: 44, height: 44)
                            .foregroundColor(.white)
                            .opacity(expand ? 1 : 0)
                    }
                    .buttonStyle(.glass)
                    .offset(expand ? item.offset : .zero) // 整个按钮随 offset 移动
                    .glassEffect(.regular.interactive())
                    .glassEffectID("menu", in: ns)
                }

                // 中央控制按钮
                Button {
                    withAnimation(.spring(duration: 2, bounce: 0.1)) { expand.toggle() }
                } label: {
                    Image(systemName: expand ? "xmark" : "plus")
                        .frame(width: 44, height: 44)
                        .foregroundColor(.white)
                }
                .buttonStyle(.glass)
                .glassEffect(.regular.interactive())
                .glassEffectID("menu", in: ns)
            }
        }
        .padding(30)
    }
}

运行后，所有按钮仿佛从同一滴液体中“长”出来，收回时又融为一体，体验很治愈。