iOS 26 仅需几行代码让 SwiftUI 7 液态玻璃界面焕发新春

概述

在今年的 WWDC 25 中，苹果为全平台推出了崭新的液态玻璃（Liquid Glass）皮肤。不仅如此，Apple 在此基础之上还打造了一整套超凡脱俗的动画和布局体系让 SwiftUI 7 界面焕发新机。

现在，我们只需寥寥几行代码就能将原本平淡无奇、乏善可陈的 SwiftUI 布局变成上面这般鲜活灵动。

想知道如何实现吗？看这篇就对啦！

在本篇博文中，您将学到如下内容：

"一条大河窄又长"
SwiftUI 7 全新玻璃特效来袭
融入，鲜活！

那还等什么呢？让我们马上迈入液态玻璃奇妙的特效世界吧？ Let's go！！！;)

1. "一条大河窄又长"

在如今 App 现代化布局中，秃头小码农们非常喜爱像下面这般简洁、小巧、紧凑的全局菜单系统：

它就像一条长长的河流，伸缩自如，温柔又调皮的流入用户的心坎里。

不幸的是，目前它仿佛少了一点灵动的气息，而且感觉和 WWDC 25 中全新的液态玻璃也不太般配。

swift 复制代码

struct BadgesView: View {
    @Environment(ModelData.self) private var modelData
    @State private var isExpanded: Bool = false
    
    var body: some View {
        VStack(alignment: .center, spacing: Constants.badgeButtonTopSpacing) {
                if isExpanded {
                    VStack(spacing: Constants.badgeSpacing) {
                        ForEach(modelData.earnedBadges) {
                            BadgeLabel(badge: $0)
                        }
                    }
                }

                Button {
                    withAnimation {
                        isExpanded.toggle()
                    }
                } label: {
                    ToggleBadgesLabel(isExpanded: isExpanded)
                        .frame(width: Constants.badgeShowHideButtonWidth,
                               height: Constants.badgeShowHideButtonHeight)
                     
                }
                #if os(macOS)
                .tint(.clear)
                #endif
            }
            .frame(width: Constants.badgeFrameWidth)
    }
}

诚然，我们可以利用 SwiftUI 优秀的动画底蕴重新包装上面 BadgesView 视图的动画和转场效果，但这需要秃头小码农们宝贵的时间和头发，而且效果往往强差人意。

不过别担心，从 SwiftUI 7（iOS 26 / iPadOS 26 / macOS 26）开始，我们有了全新的选择，简单的不要不要的！

2. SwiftUI 7 全新玻璃特效来袭

从 WWDC 25 开始，全面支持 Liquid Glass 的 SwiftUI 7 推出了玻璃特效容器 GlassEffectContainer ，让我们真的可以对玻璃"为所欲为"：

GlassEffectContainer 能把多个带 glassEffect(_:in:) 的视图合并成一张"可变形的联合玻璃"，既省性能又能让玻璃形状彼此融合、变形（morph）。

核心要点：

用法：给子视图添加 .glassEffect(.liquid, in: container) 修改器，系统会把它们自动收集到同一个 GlassEffectContainer 中；
效果：子视图的玻璃形状不再各自独立，而是当成一个整体渲染，可互相吸引、拼接、渐变和 morph；
控制融合：通过容器的 spacing 值调节------值越大，子视图相距越远时就开始"粘"在一起；
并发：@MainActor 隔离，线程安全。

总而言之，GlassEffectContainer 让多块"液态玻璃"合成一块可 morph 的超级玻璃，性能更高、动画更连贯。

同时，SwiftUI 7 还新增了两个配套方法 glassEffect(_:in:) 和 glassEffectID(_:in:) :

我们可以利用它们结合 Namespace 来完成液态玻璃世界中的视图动画效果。

另外 SwiftUI 7 还专门为 Button 视图添加了 glass 按钮样式，真可谓超级"银杏化"：

有了这些 SwiftUI 中的宝贝，小伙伴们可以开始来打造我们的梦幻玻璃天堂啦！

3. 融入，鲜活！

将之前的 BadgesView 视图重装升级为如下实现：

swift 复制代码

struct BadgesView: View {
    @Environment(ModelData.self) private var modelData
    @State private var isExpanded: Bool = false
    @Namespace private var namespace
    
    var body: some View {
        GlassEffectContainer(spacing: Constants.badgeGlassSpacing) {
            VStack(alignment: .center, spacing: Constants.badgeButtonTopSpacing) {
                if isExpanded {
                    VStack(spacing: Constants.badgeSpacing) {
                        ForEach(modelData.earnedBadges) {
                            BadgeLabel(badge: $0)
                                .glassEffect(.regular, in: .rect(cornerRadius: Constants.badgeCornerRadius))
                                .glassEffectID($0.id, in: namespace)
                        }
                    }
                }

                Button {
                    withAnimation {
                        isExpanded.toggle()
                    }
                } label: {
                    
                    ToggleBadgesLabel(isExpanded: isExpanded)
                        .frame(width: Constants.badgeShowHideButtonWidth,
                               height: Constants.badgeShowHideButtonHeight)
                     
                }
                .buttonStyle(.glass)
                #if os(macOS)
                .tint(.clear)
                #endif
                .glassEffectID("togglebutton", in: namespace)
            }
            .frame(width: Constants.badgeFrameWidth)
        }
    }
}

上面这段新代码把" earned 徽章列表"与底部的"展开/收起"按钮一起放进同一个 GlassEffectContainer 容器中，从而让它们全部参与 iOS 26 的「液态玻璃」合并渲染。

下面按"玻璃特性"逐句拆解：

GlassEffectContainer(spacing: ...)

建立一块「联合玻璃画布」。
spacing 决定徽章彼此、徽章与按钮之间多早开始"粘"成一体：值越大，离得越远就开始融合。

展开时才出现的 VStack + ForEach

每个 BadgeLabel 同时挂两个修饰符：
- .glassEffect(.regular, in: .rect(cornerRadius: ...))
  声明"我是 regular 风格玻璃，形状是圆角矩形"。
- .glassEffectID(badge.id, in: namespace)
  给玻璃发身份证；同一 namespace 里身份证不同，SwiftUI 就能在增减徽章时做"液态 morph"------旧玻璃流走、新玻璃流进来，而不是生硬闪现。

底部 Button

.buttonStyle(.glass) 让按钮本身也是玻璃，但风格、圆角与徽章不同。
同样用 .glassEffectID("togglebutton", in: namespace) 注册身份证，于是按钮的玻璃和上面徽章的玻璃被当成"同一张可变形大图"处理。
展开/收起时，按钮玻璃会与刚出现（或消失）的徽章玻璃在边缘处"拉丝"融合，形成液态过渡。

withAnimation { isExpanded.toggle() }

状态变化被包进动画块，GlassEffectContainer 会同步驱动所有玻璃路径的 morph 动画：
- 徽章从 0 高度"流"出来，边缘先与按钮玻璃粘连，再各自分离成独立圆角矩形。
- 收起时反向流回，最终只剩按钮玻璃。

整体效果
用户看到的不是"一行行控件出现"，而是一块完整的「可变玻璃」：
- 展开 → 玻璃区域向下延伸，新徽章像水泡一样从主体里分裂长出；
- 收起 → 多余部分被"吸"回按钮，边缘圆润地收缩消失。
  全程保持同一高光、折射、模糊背景，性能也优于多图层叠加。

简单来说，上面的实现用 GlassEffectContainer 把徽章与按钮收进同一块「液态玻璃」，凭借 glassEffectID 与 namespace 让它们在展开/收起时像流体一样自然融合、morph，呈现出 iOS 26 独有的"整块玻璃可生长可收缩"的视觉魔法。

要注意哦，上面动图中按钮组背后的阴影是由于 gif 图片显示局限导致的，模拟器和真机实际测试的阴影效果可是美美哒的呢！

我们把 BadgesView 视图嵌入到主视图中，宝子们再来一起欣赏一下叹为观止的液态玻璃动画效果吧：

大功告成，打完收工，棒棒哒！💯

总结

在本篇文章中，我们讨论了在 iOS 26/iPadOS 26 里如何使用 SwiftUI 7 最新的液体玻璃系统来装饰小伙伴们的 App 界面。

感谢观赏，再会吧！8-)