浪浪山 iOS 奇遇记：给 APP 裹上 Liquid Glass “琉璃罩”（下集）

引子

山大王的脚步声越靠越近，阿强手忙脚乱地把 MacBook 重新打开，阿花则攥着那片记满 "妖法秘籍" 的桃叶，指尖都捏出了汗。

在本篇奇遇记中，您将学到如下内容：

• • 引子
  • [📦 给按钮找 "新家"：GlassEffectContainer 的神奇魔法](#📦 给按钮找 “新家”：GlassEffectContainer 的神奇魔法)
  • [🔧 修 bug：让 "蜜滴" 真正融在一起](#🔧 修 bug：让 “蜜滴” 真正融在一起)
  • [🎉 山大王验收：从吹胡子瞪眼到拍手叫好](#🎉 山大王验收：从吹胡子瞪眼到拍手叫好)
  • [📝 下集总结：浪浪山小妖的 "琉璃心得"](#📝 下集总结：浪浪山小妖的 “琉璃心得”)

"别慌！" 阿花压低声音，"先把所有按钮塞进GlassEffectContainer里，这是让它们'流起来'的关键，咱快试试！"

---

📦 给按钮找 "新家"：GlassEffectContainer 的神奇魔法

阿花对照着 "仙册"（开发者文档），手指在键盘上飞快敲击 ------ 先给所有 Liquid Glass 按钮套上一个GlassEffectContainer容器，就像给散落在石桌上的果子找个 "蜜罐"，让它们能沾着糖浆融在一起。

修改后的代码长这样，阿花还特意加了中文注释，方便阿强看懂：

struct ContentView: View {
    @State private var isExpanded = false
    
    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            // 背景图不变，还是浪浪山的风景
            Color
                .clear
                .overlay(
                    Image("bg_img")
                        .resizable()
                        .scaledToFill()
                        .edgesIgnoringSafeArea(.all)
                )

            // 重点！把所有琉璃按钮放进同一个GlassEffectContainer
            // 就像把所有果子放进同一个蜜罐，让它们能沾着糖浆融合
            GlassEffectContainer {
                button(type: .home)
                button(type: .write)
                button(type: .chat)
                button(type: .email)

                // 主按钮：之前加了interactive的"发光仙果"
                Button {
                    withAnimation {
                        isExpanded.toggle()
                    }
                } label: {
                    Label("Home", systemImage: "list.bullet")
                        .labelStyle(.iconOnly)
                        .frame(width: 50, height: 50)
                        .foregroundColor(.white)
                }
                .glassEffect(.regular.tint(.purple.opacity(0.8)).interactive())
                .padding(32)
            }
        }
    }

    // 自定义按钮方法：这里要改！去掉单个按钮的背景，让容器统一管"琉璃罩"
    private func button(type: ButtonType) -> some View {
        return Button {} label: {
            Label(type.label, systemImage: type.systemImage)
                .labelStyle(.iconOnly)
                .frame(width: 50, height: 50)
                .foregroundColor(.white) // 图标白色，和主按钮呼应
        }
        // 给单个按钮也加上琉璃效果，让它能和主按钮融合
        .glassEffect(.regular.tint(.white.opacity(0.7)).interactive())
        .padding(32)
        .offset(type.offset(expanded: isExpanded))
        // 弹簧动画：让按钮展开时像弹起来的蜜滴
        .animation(.spring(duration: type.duration, bounce: 0.2))
    }
}

写完代码，阿强深吸一口气点击 "运行"------ 结果屏幕上的按钮还是各自为政，既没融合，动起来也像生涩的石头，半点 "液态" 的影子都没有。

"咋回事啊？" 阿强急得抓头发，山大王的脚步声都到桃树下了。

阿花盯着代码突然拍了下大腿："忘啦！单个按钮的glassEffect得让容器'统一管理'，不能自己带！就像山大王的兵，得听一个将军指挥，不然就乱套了！"

---

更多关于 iOS 26 液态玻璃界面超帅动画的介绍，请小伙伴们移步如下链接观赏精彩的内容：

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

---

🔧 修 bug：让 "蜜滴" 真正融在一起

阿花赶紧删掉单个按钮里的.glassEffect(...)，只在GlassEffectContainer里给主按钮留了效果，又加了个 "统一标识"------glassEffectID，让系统知道这些按钮是 "一伙的"，得一起渲染。

修改后的关键代码变成这样：

GlassEffectContainer {
    // 单个按钮去掉自己的glassEffect，靠容器统一渲染
    button(type: .home)
    button(type: .write)
    button(type: .chat)
    button(type: .email)

    Button {
        withAnimation {
            isExpanded.toggle()
        }
    } label: {
        Label("Home", systemImage: "list.bullet")
            .labelStyle(.iconOnly)
            .frame(width: 50, height: 50)
            .foregroundColor(.white)
    }
    // 主按钮保留效果，再加个glassEffectID，让所有按钮认"大哥"
    .glassEffect(.regular.tint(.purple.opacity(0.8)).interactive())
    .glassEffectID("wave-wave-mountain-button-group") // 浪浪山专属标识
    .padding(32)
}

// 自定义按钮方法：彻底删掉单个按钮的glassEffect
private func button(type: ButtonType) -> some View {
    return Button {} label: {
        Label(type.label, systemImage: type.systemImage)
            .labelStyle(.iconOnly)
            .frame(width: 50, height: 50)
            .foregroundColor(.white)
    }
    .padding(32)
    .offset(type.offset(expanded: isExpanded))
    .animation(.spring(duration: type.duration, bounce: 0.2))
}

这次点击运行，屏幕突然 "活" 了 ------ 当阿强点击主按钮时，四个白色 "琉璃按钮" 像从紫色主按钮里 "流" 出来的蜜滴，靠近时边缘会轻轻融合，收缩时又会 "钻" 回主按钮里，整个过程像浪浪河的水在流动，连光影都跟着晃，比山大王珍藏的 "液态银瓶" 还神奇！

"成了！成了！" 阿强激动得差点把 MacBook 掀翻，阿花也笑着擦了擦额角的汗："你看这效果，Apple 说的'Liquid Glass'就是这意思 ------ 不是硬邦邦的玻璃，是像水、像糖浆一样能融能聚的'活玻璃'！"

俩人还发现，这GlassEffectContainer不仅让效果更 "液态"，还帮系统省了 "法力"（渲染性能）------ 就像把散着的柴火捆起来烧，又旺又省柴，APP 运行时再也不会像之前那样 "卡壳" 了。

🎉 山大王验收：从吹胡子瞪眼到拍手叫好

"你们俩磨磨蹭蹭半天，到底搞出啥玩意儿了？" 山大王背着双手走进来，一脸不耐烦，手里还攥着根桃枝，眼看就要敲阿强的脑袋。

阿花赶紧把 MacBook 转向山大王，阿强颤巍巍地点了下主按钮 ------ 只见紫色 "琉璃盏" 轻轻一亮，四个白色 "蜜滴" 顺着屏幕边缘流出来，每个按钮点下去都会 "闪一下"，收缩时又像归巢的小鸟，稳稳钻回主按钮里。

山大王的眼睛越睁越大，手里的桃枝都掉在了地上："这...... 这是啥妖法？比我上次从山外抢来的'琉璃灯'还好看！点一下还会亮，跟活的似的！"

"大王，这叫Liquid Glass！是 iOS 26 的新设计，就像给 APP 裹了层会流动的琉璃罩！" 阿花赶紧解释，阿强也补充："以后访客登记时，点这些按钮就像摸流水似的，比之前的硬疙瘩舒服多了！"

山大王围着 MacBook 转了三圈，突然拍了下阿强的肩膀："好！好！这次没白扣你们桃干！今晚加肉干，再给你们的 APP 加个新功能 ------ 把访客头像也弄成这'琉璃'样！"

俩人对视一眼，偷偷笑了 ------ 不仅保住了桃干，还赚了肉干，更重要的是，他们终于摸清了 Liquid Glass 的 "脾气"：不是乱盖 "琉璃罩"，而是让元素像水一样 "融" 在界面上，既好看又好用。

📝 下集总结：浪浪山小妖的 "琉璃心得"

阿强和阿花蹲在桃树下，啃着山大王赏的肉干，总结出了用 Liquid Glass 的 "三大秘诀"：

1. 找对位置：只给 "浮在主界面上的元素" 盖罩（工具栏、按钮等），别把主内容裹成 "糊状物"，就像浪浪山的岗亭要盖在路边，不能挡山路；

2. 善用容器 ：多个琉璃元素要放进GlassEffectContainer，再加个glassEffectID"认亲"，让它们像蜜滴一样融在一起，别各自为政；

3. 加互动感 ：给glassEffect加interactive()，让按钮点起来 "亮一下、大一点"，像摸了会发光的萤火虫，比死木头有趣多了。

"对了，" 阿花突然想起，"Apple 还留了'逃生舱'------ 要是有小妖暂时不想用 Liquid Glass，下一个 iOS 大版本前都能躲，不过咱浪浪山要赶时髦，肯定不用躲啦！"

阿强点点头，望着夕阳下的浪浪河："下次再给 APP 加功能，咱还能用这'琉璃妖法'------ 比如给访客列表的筛选按钮也裹层罩，让它像飘在河上的荷叶！"

山大王的大嗓门又传来了："俩小妖！明天开始弄头像的琉璃效果，别偷懒！"

俩人赶紧应着，心里却一点都不慌 ------ 毕竟，他们已经掌握了 Liquid Glass 的 "核心咒语"，再难的任务，也像给 APP 裹层 "会流水的琉璃" 一样简单啦！

（全剧终？不，浪浪山 APP 的优化之路还长着呢，下次咱们再唠新 "妖法"！宝子们不见不散，再会吧！😎）