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

引子

浪浪山的朝阳刚爬上山头，小妖怪阿强就抱着他那台快被摸包浆的 MacBook，跟阿花蹲在老桃树下唉声叹气。

山大王昨天拍着青石桌下令，三天内必须给 "浪浪山访客登记 APP" 换上 iOS 26 新出的Liquid Glass 设计，要是搞不定，俩人这个月的桃干俸禄就得全扣光。

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

- 引子
- [🔍 先搞明白：Liquid Glass 这 "妖法" 该啥时候用？](#🔍 先搞明白：Liquid Glass 这 “妖法” 该啥时候用？)
- [🛠️ 动手试试：给 UI 元素裹上 Liquid Glass "琉璃罩"](#🛠️ 动手试试：给 UI 元素裹上 Liquid Glass “琉璃罩”)
- [🎨 给 "琉璃罩" 上色：加 tint 调背景](#🎨 给 “琉璃罩” 上色：加 tint 调背景)
- [✨ 让按钮 "活" 起来：加 interactive "互动咒"](#✨ 让按钮 “活” 起来：加 interactive “互动咒”)
- [上集尾声：山大王催进度，容器 "秘招" 待解锁](#上集尾声：山大王催进度，容器 “秘招” 待解锁)

可这Liquid Glass到底是啥 "妖法"？俩小妖连门儿都没摸着，只能对着屏幕抓耳挠腮，连树上掉下来的桃毛都没心思拍。

🔍 先搞明白：Liquid Glass 这 "妖法" 该啥时候用？

阿花翻遍了 Apple 给的 "仙册"（其实就是开发者文档），终于指着一行字喊："阿强你看！Liquid Glass是 iOS 26 的新设计语言，说白了就是给 APP 盖一层'琉璃罩'，但这罩子可不能乱盖！"

原来这 "琉璃罩" 的核心规矩是：只盖在 "浮" 于主界面上的元素，不能裹住整个 APP 的内容。阿强不信邪，偷偷给 APP 里的访客列表每一行都加了 "琉璃罩"，结果运行起来一看 ------ 界面乱得像妖精打架，文字和背景糊在一块儿，比山大王喝醉后画的地图还难认。

"你这是犯了'本末倒置'的错！" 阿花戳了戳屏幕，"主内容是访客信息，得清清楚楚；'琉璃罩'该用在工具栏、标签栏、浮标按钮这些'外挂'元素上，就像浪浪山入口的岗亭，得盖层罩子挡雨，但不能把山路都罩起来啊！"

说着阿花打开参考 APP "Maxine"（据说是山外神仙做的健身 APP），指着屏幕底部："你看这默认的标签栏，就是Liquid Glass做的'琉璃罩'，盖在列表上面不挡内容；还有那个浮标加号，也裹了层薄罩，就是背景太亮看不太清 ------ 这才是正确用法！"

阿强摸了摸后脑勺："原来如此！那要是实在不想用这'琉璃罩'咋办？" 阿花又翻了翻 "仙册"："Apple 留了个'逃生舱'，下一个大版本前都能用，但山大王要新效果，咱躲不过咯！"

想要进一步了解如何在 iOS 26 中让 App 界面不适配液体玻璃效果的方法，请小伙伴们移步如下链接观赏精彩的内容：

当液态玻璃计划遭遇反叛者：一场 iOS 26 界面的暗战

🛠️ 动手试试：给 UI 元素裹上 Liquid Glass "琉璃罩"

既然躲不过，俩小妖决定先从一个小功能下手 ------ 复刻山外早已失传的 "Path APP" 按钮，给它裹上Liquid Glass。

阿强从 GitHub 上扒来了起始代码（据说那是山外神仙留下的 "秘籍"），代码长这样，阿花还贴心加了中文注释：

swift 复制代码

struct ContentView: View {
    // 控制按钮展开/收起的状态，就像控制桃树结果子的开关
    @State private var isExpanded = false
    
    var body: some View {
        // ZStack：把背景图和按钮叠放，类似先铺桃叶再放果子
        ZStack(alignment: .bottomTrailing) {
            Color
                .clear
                .overlay(
                    // 背景图：浪浪山的风景图，铺满整个屏幕
                    Image("bg_img")
                        .resizable()
                        .scaledToFill()
                        .edgesIgnoringSafeArea(.all)
                )

            // 四个功能按钮：首页、写字、聊天、邮件
            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) // 按钮大小：像个小桃儿
                    .background(Circle().fill(.purple)) // 紫色圆形背景
                    .foregroundColor(.white) // 图标白色
            }.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)
                .background(Circle().fill(.white)) // 白色背景
        }
        .padding(32)
        .offset(type.offset(expanded: isExpanded)) // 按钮展开时的位置偏移
        .animation(.spring(duration: type.duration, bounce: 0.2)) // 弹簧动画，有点弹性
    }
}

"这按钮现在就是普通的'硬疙瘩'，咱给它裹上Liquid Glass 试试！" 阿强说着，在主按钮后面加了个glassEffect() 修饰符，代码变成这样：

swift 复制代码

Button {
    withAnimation {
        isExpanded.toggle()
    }
} label: {
    Label("Home", systemImage: "list.bullet")
        .labelStyle(.iconOnly)
        .frame(width: 50, height: 50)
        .background(Circle().fill(.purple))
        .foregroundColor(.white)
}
// 加上Liquid Glass"琉璃罩"！
.glassEffect()
.padding(32)

结果运行一看 ------ 啥 "琉璃罩" 都没有！按钮还是原来的紫色硬疙瘩。

阿花凑过来一看，突然笑出声："你这是把'隐身符贴在铠甲外面'啊！按钮有个紫色背景，把glassEffect全挡住了，得把背景去掉才行哦！"

🎨 给 "琉璃罩" 上色：加 tint 调背景

阿强赶紧删掉.background(Circle().fill(.purple))，再运行 ------ 按钮是透明了，但图标淡得像蒙了层雾，差点看不清。俩人对着屏幕嘀咕："这是 beta 版的'妖气'干扰，还是本来就这样啊？"

阿花又翻了翻 "仙册"："还有个buttonStyle(.glass) 能试，不过这风格太'死板'，像山大王给的统一制服，想绣个小桃花都不行。" 试了之后果然如此，自定义空间少得可怜。

"有了！" 阿花忽然拍了下手，"给glassEffect加个 tint（色调），就能给'琉璃罩'上色，还能调透明度！" 说着就改了代码：

swift 复制代码

Button {
    withAnimation {
        isExpanded.toggle()
    }
} label: {
    Label("Home", systemImage: "list.bullet")
        .labelStyle(.iconOnly)
        .frame(width: 50, height: 50)
        .foregroundColor(.white)
}
// 给琉璃罩加紫色调，像后山的紫藤花汁
.glassEffect(.regular.tint(.purple))
.padding(32)

运行后一看 ------ 嘿！按钮变成了带紫色的透明 "琉璃盏"，还自动是圆形的，不用再画背景了！

"Apple 这'妖法'还挺贴心，知道圆形好看！" 阿强忍不住夸了一句。

但阿花觉得还不够通透："再加点透明度，像晨雾里的琉璃盏才好看！" 于是又把颜色改成.purple.opacity(0.8)，这下效果刚好 ------ 既清楚又有 "玻璃感"，比山大王的琉璃酒杯还精致。

✨ 让按钮 "活" 起来：加 interactive "互动咒"

按钮好看了，但点下去没反应，像块死木头。

阿花又找到了 "仙册" 里的秘诀：给glassEffect 加个interactive()，就能让按钮点的时候 "亮一下" 还稍微变大，像 "一碰就发光的仙果"！

改完的代码是这样：

swift 复制代码

Button {
    withAnimation {
        isExpanded.toggle()
    }
} label: {
    Label("Home", systemImage: "list.bullet")
        .labelStyle(.iconOnly)
        .frame(width: 50, height: 50)
        .foregroundColor(.white)
}
// 加了interactive，点的时候会有 shimmer 效果还会变大
.glassEffect(.regular.tint(.purple.opacity(0.8)).interactive())
.padding(32)

俩人轮番点了点，都笑了："这下有那味儿了！像摸了会发光的萤火虫，比山大王的夜明珠还灵！"

可高兴没多久，阿强又皱起眉："虽然互动有了，但这些按钮还是各自独立的，像散落在石桌上的果子，没'液态'那感觉 ------Apple 说的'液体玻璃'，得像流水似的融在一起才对呀！"

上集尾声：山大王催进度，容器 "秘招" 待解锁

阿花盯着屏幕忽然眼睛一亮："'仙册'里提了个GlassEffectContainer！把所有按钮放进这个'容器'里，它们靠近时就会像融在一起的糖浆，动起来也会像流水似的！"

俩人刚要动手写代码，就听见山大王的大嗓门从远处传来："俩小妖！APP 改得咋样了？再磨蹭午饭的肉干也没了！"

阿强赶紧把 MacBook 合上，阿花攥着写满笔记的桃叶小声说："别急，下晌咱们就试这个GlassEffectContainer，肯定能让这些按钮像浪浪河的水似的，流着动起来！"

到底这 "容器" 咋用？按钮能不能真的 "液态" 起来？山大王的肉干能不能保住？咱们下集接着唠！