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

WWDC 25 给自定义 SwiftUI 视图穿上“玻璃外衣”：最新 Liquid Glass 皮肤详解

news 2025/7/26 15:14:54

在这里插入图片描述

引子

各位 iOS 足球体育健儿们，且听我一言！想当年在《少林足球》里，阿星一句“做人如果没梦想，那跟咸鱼有什么分别啊？”点燃了多少人的江湖梦。

在这里插入图片描述

如今在 SwiftUI 江湖里，Apple 于 WWDC 25 推出的 Liquid Glass 设计语言，就像那本失传已久的足球训练秘籍——轻轻一抖，各位宝子们的界面就能从“街边摊”秒变“五星酒店”，通透得让用户直呼“好嘢！”。

在本堂足球特训课中，您将学到如下内容：

- 引子
- 1. 玻璃效果的“内功心法”：不只是块透明玻璃哦
- 2. 玻璃绝招：regular 一招致命
- 3. 炫彩大招 tint：让玻璃更“透光”
- 4. 互动秘籍 interactive()：让玻璃“有反应”
- 5. 形状自由换：圆形、方形任你挑
- 训练结束：总结

前阵子咱们聊过给标签栏和工具栏“贴玻璃膜”的功夫，今天就再来深扒这门绝学的进阶招式：给自定义视图穿上“玻璃衣”。保证让小伙伴们的 UI 效果，比大师兄的铁头功还硬气，比阿梅的太极推手还顺滑！

那还等什么呢？Let’s do it！！！😉

1. 玻璃效果的“内功心法”：不只是块透明玻璃哦

要说这 glassEffect 修饰符，可绝非“贴块透明塑料布”那么简单。

在这里插入图片描述

它就像身怀内功的高手，能和背后的视图“眉目传情”——背后是红花，它就带点胭脂气；背后是绿叶，它就沾点青黛色。

更绝的是，它还能根据背后内容的明暗，自动切换视图的配色方案，从亮色到暗色，比星爷在电影里切换表情还灵活自如！

先来看段入门级代码，感受下这“内功”的威力：

import SwiftUIstruct ContentView: View {var body: some View {NavigationStack {ScrollView {// 下面这些彩色块就像背景里的“群众演员”，负责衬托玻璃效果Color.red.frame(height: 300)Color.yellow.frame(height: 300)Color.green.frame(height: 300)Color.black.frame(height: 300)Color.orange.frame(height: 300)Color.blue.frame(height: 300)Color.brown.frame(height: 300)}// 在底部安全区“安插”一个带玻璃效果的视图，像站在前台的主角.safeAreaInset(edge: .bottom) {Text("Hello, World!").font(.largeTitle.weight(.black)).padding(.horizontal).foregroundStyle(.blue).padding().glassEffect() // 就这一句，直接给文字“穿上玻璃衣”，是不是so easy？.padding()}.ignoresSafeArea()}}
}

瞧见没？只需给视图加个 .glassEffect()，SwiftUI 就像贴心的场务，把所有“玻璃效果”的细节都给你安排得明明白白。

在这里插入图片描述

但这只是皮毛，真正的足球高手，还得会玩花样！

2. 玻璃绝招：regular 一招致命

就像少林功夫有七十二绝技，这玻璃效果也有几招压箱底的功夫，分别是 regular（常规款）、tint（炫彩款）和 interactive（激情款）。它们都是 Glass 类型的“预制招式”，各有各的妙用。

在这里插入图片描述

先说说这 identity 招，堪称“开关神器”。想让玻璃效果时有时无？用它准没错，比阿星关掉水龙头还利索。

看个例子：

struct ContentView: View {@State private var isEnabled = true // 控制玻璃效果的“开关”，像个尽职尽责的裁判var body: some View {NavigationStack {ScrollView {// 下面这些彩色块就像背景里的“群众演员”，负责衬托玻璃效果Color.red.frame(height: 300)Color.yellow.frame(height: 300)Color.green.frame(height: 300)Color.black.frame(height: 300)Color.orange.frame(height: 300)Color.blue.frame(height: 300)Color.brown.frame(height: 300)}// 在底部安全区“安插”一个带玻璃效果的视图，像站在前台的主角.safeAreaInset(edge: .bottom) {Text("Hello, World!").font(.largeTitle.weight(.black)).padding(.horizontal).foregroundStyle(.blue).padding()// 条件判断：打开时用 regular 招，切换自如.glassEffect(.regular, isEnabled: isEnabled).padding()}.navigationTitle("自定义玻璃外衣").toolbar {// 加个开关按钮，让用户自己掌控“玻璃效果”的有无，贴心到家Toggle("玻璃效果", isOn: $isEnabled)}.ignoresSafeArea()}}
}

现在，我们可以随心所欲的开关”玻璃外衣“了，就问宝子们赞不赞吧：
在这里插入图片描述

3. 炫彩大招 tint：让玻璃更“透光”

如果说 regular 是“标准套餐”，那 tint 就是“炫彩版”—— 更加明艳动人，就像刚擦过的玻璃，连苍蝇站在上面都得打滑！更妙的是，它能加“ tint（色调）”，给玻璃染上点“个性色彩”，就像给阿星的球鞋加个酷炫配色。

且看代码：

.glassEffect(.regular.tint(.red.opacity(0.77)), isEnabled: isEnabled)

这 tint 就像给玻璃“上妆”，红的、绿的、蓝的… 想啥色就啥色，比阿梅的胭脂盒还丰富多彩呢！

在这里插入图片描述

4. 互动秘籍 interactive()：让玻璃“有反应”

光好看还不够，得“有互动”才算真功夫！Glass 类型里的 interactive() 方法，就是让玻璃效果“活”起来的关键。

在这里插入图片描述

加了它，玻璃不仅能“倒映”背后的内容，还能对点击、拖动等手势“敏感”起来，像个反应敏捷的守门员，球来必接！

下面来一段代码演示：

struct CustomView: View {var body: some View {ScrollView {// 背景依旧“忙忙碌碌”，衬托互动效果Color.red.frame(height: 300)Color.yellow.frame(height: 300)Color.green.frame(height: 300)Color.black.frame(height: 300)Color.orange.frame(height: 300)Color.blue.frame(height: 300)Color.brown.frame(height: 300)}.safeAreaInset(edge: .bottom) {Text("Hello, World!").padding()// 加了 interactive()，玻璃就从“静态画”变成“互动高手”.glassEffect(.regular.tint(.red.opacity(0.77)).interactive(), isEnabled: isEnabled)}}
}

有了它，你的玻璃视图就像少林队的球员，既能“秀颜值”，又能“拼实力”，用户体验直接上了三个台阶！棒棒哒💯

在这里插入图片描述

5. 形状自由换：圆形、方形任你挑

默认的玻璃效果是“随形就势”的，但如果你想玩点花样，比如弄个圆形玻璃、圆角矩形玻璃，SwiftUI 也能满足你。

就像电影里阿星把足球踢成各种弧线，玻璃的形状也能“随心所欲”。

最后看这个例子吧：

struct CustomView: View {var body: some View {ScrollView {// 背景色继续“当绿叶”Color.red.frame(height: 300)Color.yellow.frame(height: 300)Color.green.frame(height: 300)Color.black.frame(height: 300)Color.orange.frame(height: 300)Color.blue.frame(height: 300)Color.brown.frame(height: 300)}.safeAreaInset(edge: .bottom) {Text("Hello, World!").padding()// 第二个参数指定形状，这里用 .circle 让玻璃变成圆形，是不是很酷炫？.glassEffect(.regular.tint(.red.opacity(0.77)).interactive(), in: .circle, isEnabled: isEnabled)}}
}