当前位置：首页 > news >正文

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

news 2025/10/5 5:19:27

在这里插入图片描述

引子

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

在这里插入图片描述

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

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

- 引子
- 🔍 先搞明白：Liquid Glass 这 “妖法” 该啥时候用？
- 🛠️ 动手试试：给 UI 元素裹上 Liquid Glass “琉璃罩”
- 🎨 给 “琉璃罩” 上色：加 tint 调背景
- ✨ 让按钮 “活” 起来：加 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 上扒来了起始代码（据说那是山外神仙留下的 “秘籍”），代码长这样，阿花还贴心加了中文注释：

struct ContentView: View {// 控制按钮展开/收起的状态，就像控制桃树结果子的开关@State private var isExpanded = falsevar 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() 修饰符，代码变成这样：

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（色调），就能给‘琉璃罩’上色，还能调透明度！” 说着就改了代码：

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()，就能让按钮点的时候 “亮一下” 还稍微变大，像 “一碰就发光的仙果”！

改完的代码是这样：

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)