[WWDC 2025] 用新设计构建一个SwiftUI应用程序

在介绍使用新设计来开发SwiftUI app之前，我们先了解一下苹果推出的新设计

Meet Liquid Glass

Liquid Glass 是苹果在 WWDC 2025 推出的全新设计语言，它将苹果的用户界面体验提升到一个全新的层次，结合了多个历史设计元素，如 macOS Aqua、iOS 7 的实时模糊效果、iPhone X 的流畅性、灵动岛的灵活性和 visionOS 的沉浸式界面。

历史设计设计预览：

macOS Aqua 界面设计

iOS7的实时模糊效果

灵动岛的灵活性

visionOS的沉浸式界面

Liquid Glass 样式

Liquid Glass 的特性

动态光学效果：

Liquid Glass 使用透镜效果来传递和塑形光线，使界面元素能够动态弯曲光线，从而增加界面的层次感和深度。
它的行为像轻质液体，既能响应触摸流畅性，又能适应现代应用的动态变化，给用户带来直观的自然感受。
液态玻璃物体不会逐渐消失，而是通过逐渐调节光线的弯曲和透镜来实现和消失，确保优雅的过渡，保持材料的光学完整性。

物理与动态交互：

Liquid Glass 在视觉和触觉交互上都非常灵敏，界面元素能够根据用户的交互进行即时反应，模拟真实世界的物理特性。
例如，界面元素如按钮不仅看起来透明且轻盈，当用户交互时，它们能展现出瞬时性和可塑性，仿佛"液态"流动。

响应式与自适应性：

Liquid Glass 根据不同的环境和情境自动调整其外观，例如在明暗模式下的适配、光线变化的响应等，使得内容永远保持清晰并与背景保持适当的对比。
在较大的元素上，例如侧边栏，液态玻璃的外观由应用程序内的周围环境决定。

在滚动和动态变化的应用场景中，界面元素通过实时变化确保界面过渡流畅、无缝。

例如：当深色内容向下滚动时，玻璃本身会切换至深色样式，效果会智能切换为微妙的暗淡，再次确保对比度和易读性。

像互动时的这些效果：从内部发光，自动分离和聚拢，渐进式隐退，光线和阴影的动态变化等，都是内置的效果。

Liquid Glass 变体

Regular 变体：

适用于大多数常见场景，具备动态光学效果和适应环境的能力，在任何环境下都能提供易读性

Clear 变体：

透明度更高，适用于需要透过背景展示内容的场景，但需要调暗层以确保可读性（相当于弹框的背景）。

官方建议使用场景：

元素位于富媒体内容之上；
内容层不会受到调光层的负面影响；
位于其上方的内容醒目明亮

这两种变体不应混合使用。

自定义着色

使用原则

适配原则：

应该将 Liquid Glass 应用于界面上的浮动元素，如按钮、侧边栏等，避免在内容层中直接堆叠多个液态玻璃元素。
使用 Liquid Glass 时要考虑内容层的清晰性，避免在内容区过多使用这种材质，以防界面过于混乱。

请始终避免玻璃叠加。将 Liquid Glass 元素堆叠在一起会很快使界面显得杂乱无章。

总的来说，Liquid Glass 是苹果在用户界面设计方面的一次重大创新，它通过结合动态光学效果和自适应设计，提升了整个用户体验的沉浸感和流畅度。开发者可以通过这一新设计语言为应用带来更加自然、流畅和互动性的界面。它不仅在视觉上增加了深度感，还通过智能交互确保用户在操作中的每个细节都得到了优化。这标志着苹果产品设计向更加自然和直观的方向迈进。

如何将Liquid Glass引入应用程序

利用系统框架自动采用 Liquid Glass

在系统框架中，诸如条形图、表单、弹出窗口和控件等标准组件会自动采用此材质。系统框架还会根据元素重叠和焦点状态等因素动态调整这些组件。使用 SwiftUI、UIKit 和 AppKit 中的标准组件，以最少的代码充分利用此材质。

下方视频是创建了UIKit和SwiftUI的一些组件，他们自带了液态玻璃效果

如果使用系统控件，请减少在控件和导航元素中使用自定义背景。

在这些元素中使用的任何自定义背景和外观都可能与"液态玻璃"或系统提供的其他效果（例如滚动边缘效果）重叠或干扰。请务必检查NavigationSplitView、titleBar和toolbar(content:)等元素中的所有自定义背景。建议移除自定义效果，并让系统决定背景外观。

在自定义视图上添加液体玻璃

应用和配置液体玻璃效果

swift 复制代码

nonisolated
func glassEffect(
    _ glass: Glass = .regular,
    in shape: some Shape = DefaultGlassEffectShape()
) -> some View

使用glassEffect(_:in:)修饰符为视图添加液态玻璃效果。默认情况下，修饰符使用regular变体，并在视图内容背后的形状内应用指定的效果。

使用不同的形状，确保应用中的自定义组件拥有一致的外观和风格。
定义一种色调来表示突出性。
添加interactive(_:)到自定义组件，使其对触摸和指针交互做出反应。这将应用glass与标准按钮相同的响应和流畅反应。

将多个视图与液体玻璃容器相结合

合并多个视图的效果

当一个界面中包含多个视图时，我们可以使用 GlassEffectContainer 容器，将它们组合在一起，以更高效地渲染 Liquid Glass 效果，同时容器还允许具有液态玻璃效果的视图将其形状混合在一起，并在过渡期间相互变形。

以下示例展示了两个图标的 Liquid Glass 背景会动态结合，当它们彼此更靠近时效果会融合：

通过调整容器的 spacing 参数，可以控制视图间的距离以及动态合并效果的触发范围。彼此靠近的视图会将其效果合并为一个形状。视图之间的距离越远，形状合并得越快。

可以看到当我调整spaceing越来越小时，他们互相融合的速度会越来越慢

创建联合效果（Union Effect）

在某些情况下，我们可能希望多个视图即便是静止不动，它们的 Liquid Glass 背景也能组合成一个统一的整体。通过 glassEffectUnion(id:namespace:) 修饰符，可以实现这种效果。

动态形状变换与动画（Morphing）

通过为视图添加 glassEffectID(_:in:) 修饰符，并结合一个 Namespace 属性包装器，可以实现 Liquid Glass 的流畅过渡动画。

可以看到，上方容器的融合间距是40，而两者之间的间距也是40，所以当橡皮擦的最近边缘小于或等于容器的间距时，他们就开始融合或者分离

利用`GlassEffectContainer`实现一个展开式菜单栏

css 复制代码

GlassEffectContainer(spacing: 16) {
    VStack(alignment: .center, spacing: 20) {
        if isExpanded {
            VStack(spacing: 14) {
                ForEach(icons.indices, id: .self) { index in
                    let icon = icons[index]
                    let color = colors[index]
                    
                    Image(systemName: icon)
                        .foregroundStyle(.white)
                        .font(.system(size: 22))
                        .fontWeight(.medium)
                        .frame(width: 52, height: 52)
                        .background {
                            Image(systemName: "hexagon.fill")
                                .foregroundStyle(color)
                                .font(.system(size: 48))
                                .frame(width: 52, height: 52)
                        }
                        .padding(12)
                        .glassEffect(.regular, in: .rect(cornerRadius: 24))
                        .glassEffectID(icon, in: namespace)
                }
            }
        }

        Button {
            withAnimation {
                isExpanded.toggle()
            }
        } label: {
            Label(isExpanded ? "Hide Badges" : "Show Badges",
                systemImage: isExpanded ? "xmark" : "hexagon.fill")
            .foregroundStyle(Color("badgeShowHideColor"))
            .labelStyle(.iconOnly)
            .font(.system(size: 17))
            .fontWeight(.medium)
            .imageScale(.large)
            .frame(width: 24, height: 32)
        }
        .buttonStyle(.glass)
        .glassEffectID("togglebutton", in: namespace)
    }
    .frame(width: 74)
}