Liquid Glass 全面适配指南：为应用打造更流畅、更具未来感的体验去过WWDC2025现场的人都知道，苹果的同学

去过WWDC2025现场的人都知道，苹果的同学都会问，你们的App啥时候适配Liquid Glass 啊

Liquid Glass 全面适配指南：为应用打造更流畅、更具未来感的体验

Apple 在最新的设计语言中引入了 Liquid Glass 动态材质，为用户界面带来了全新的视觉体验。这种动态材质集合了玻璃的透明感与流体般的动态效果，不仅具有模糊背景、反射周围光线等光学能力，还能够实时响应用户的触摸与指针交互。此外，在动画和过渡中，Liquid Glass 还可以实现自然的形状融合和动态变化。

本篇文章将整合并深入解析 如何适配 Liquid Glass 构建更佳体验的应用 和 如何在自定义视图中应用 Liquid Glass，帮助你全面掌握 Liquid Glass 的适配技术，从系统组件的自动应用到自定义控件的深度优化。

什么是 Liquid Glass？

Liquid Glass 是 Apple 平台上全新引入的一种动态材质，专注于提升视觉深度、动态交互感和整体 UI 的质感。它具有如下特性：

模糊背景：为界面提供深度感和层次感；
反射颜色与光线：与周围内容的色彩动态适配，提升整体视觉一致性；
实时交互响应：对触摸和鼠标指针交互做出流畅反馈。

这一材质应用在系统控件中时，已经能够自动适配各种标准组件。而通过将 Liquid Glass 应用于自定义组件，可以进一步提升界面动态效果，为用户打造独特的视觉体验。

适配 Liquid Glass 的最佳实践

适配 Liquid Glass 涉及两个主要方面：

已有应用的全面适配：最大限度利用系统组件的自动效果；
自定义视图的深度设计：通过代码配置将 Liquid Glass 应用于自定义界面。

快速预览 Liquid Glass 在你的应用中的效果

如果你的应用使用的是 SwiftUI、UIKit 或 AppKit 提供的标准组件，Liquid Glass 效果会在最新的系统版本中自动生效，无需额外配置。以下是快速预览的步骤：

使用最新版本的 Xcode 和 SDK 构建你的应用；
在 iOS、iPadOS、macOS、tvOS 或 watchOS 的最新系统上运行应用；
检查标准控件（例如导航栏、标签栏、工具栏等）以及系统动态效果（例如滚动动画、模糊背景）。

通过这些简单的步骤，你可以直接体验并验证 Liquid Glass 为应用带来的升级效果。

Liquid Glass 在自定义视图中的应用

虽然标准组件已自动支持 Liquid Glass，但如果需要更个性化的设计，可以将 Liquid Glass 效果扩展到自定义组件和视图中。以下是几种具体的实现方法。

1. 添加 Liquid Glass 效果至单个视图

通过 glassEffect(_:in:isEnabled:) 修饰符，你可以为任意视图添加 Liquid Glass 效果。默认情况下，此修饰符在视图内容后面以 Capsule（圆角胶囊）的形状添加动态材质。

基本用法

swiftText("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect()

此代码为文本视图增加了 Liquid Glass 背景，提供类似玻璃材质的动态模糊和光学效果。

自定义形状

如果 Capsule 胶囊形状不适合你的设计，可以通过设置修饰符的 in 参数更改背景形状（如圆角矩形）：

swiftText("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect(in: .rect(cornerRadius: 16.0))

调整色调（Tint）

为突出组件的视觉优先级，你还可以为 Liquid Glass 设置一个色调：

swiftText("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect(.regular.tint(.orange))

添加交互性

通过添加 interactive() 修饰符，可以使自定义组件像标准按钮一样响应用户的触摸或鼠标指针交互：

swiftText("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect(.regular.tint(.orange).interactive())

2. 多视图的 Liquid Glass 效果

当一个界面中包含多个视图时，你可以使用 GlassEffectContainer 容器，将它们组合在一起，以更高效地渲染 Liquid Glass 效果。

合并多个视图的效果

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

swiftGlassEffectContainer(spacing: 40.0) {
    HStack(spacing: 40.0) {
        Image(systemName: "scribble.variable")
            .frame(width: 80.0, height: 80.0)
            .font(.system(size: 36))
            .glassEffect()

        Image(systemName: "eraser.fill")
            .frame(width: 80.0, height: 80.0)
            .font(.system(size: 36))
            .glassEffect()
    }
}

通过调整容器的 spacing 参数，可以控制视图间的距离以及动态合并效果的触发范围。

3. 创建联合效果（Union Effect）

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

示例代码

以下代码展示了如何通过 glassEffectUnion 将动态视图中的图标分组，分别形成两个独立的联合效果：

swiftlet symbolSet: [String] = ["cloud.bolt.rain.fill", "sun.rain.fill", "moon.stars.fill", "moon.fill"]

GlassEffectContainer(spacing: 20.0) {
    HStack(spacing: 20.0) {
        ForEach(symbolSet.indices, id: \.self) { item in
            Image(systemName: symbolSet[item])
                .frame(width: 80.0, height: 80.0)
                .font(.system(size: 36))
                .glassEffect()
                .glassEffectUnion(id: item < 2 ? "1" : "2", namespace: namespace)
        }
    }
}

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

Liquid Glass 支持在视图出现或消失的过程中进行动态形状变换，使过渡动画更加流畅。

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

示例代码

以下是一个动画示例：点击按钮后，“橡皮擦”图标会动态变为“铅笔”图标，并保持 Liquid Glass 的效果：

swift@State private var isExpanded: Bool = false
@Namespace private var namespace

var body: some View {
    GlassEffectContainer(spacing: 40.0) {
        HStack(spacing: 40.0) {
            Image(systemName: "scribble.variable")
                .frame(width: 80.0, height: 80.0)
                .font(.system(size: 36))
                .glassEffect()
                .glassEffectID("pencil", in: namespace)

            if isExpanded {
                Image(systemName: "eraser.fill")
                    .frame(width: 80.0, height: 80.0)
                    .font(.system(size: 36))
                    .glassEffect()
                    .glassEffectID("eraser", in: namespace)
            }
        }
    }

    Button("Toggle") {
        withAnimation {
            isExpanded.toggle()
        }
    }
    .buttonStyle(.glass)
}

总结

Liquid Glass 是一项强大且易用的动态材质技术，为用户界面提供了高质量的视觉体验和交互感。在标准组件中，它能自动生效；而在自定义组件中，开发者可以通过简单的配置，达到更个性化、更动态的效果。

无论是通过全面适配系统框架，还是在自定义视图中加入更灵活的 Liquid Glass 应用，开发者都能显著提升应用的现代化设计感，为用户带来更加流畅、精致的交互体验。

立即尝试 Liquid Glass，将你的应用提升至新的视觉高度！

其他

Liquid Glass 全面适配指南：为应用打造更流畅、更具未来感的体验

去过WWDC2025现场的人都知道，苹果的同学都会问，你们的App啥时候适配Liquid Glass 啊