使用全新设计系统构建 SwiftUI App

探索 liquid glass 为 app 的外观和风格带来了哪些颠覆性的改变。了解这个亮眼的新材质如何提升不同平台上工具栏、控制项和 app 结构的视觉效果，从而带来引人入胜的交互体验并将你的 app 与系统无缝整合在一起。了解如何采用新的 api 来帮助你充分利用 liquid glass。

视频地址

此文章由AI生成，可能存在错误，如有问题，请联系djs66256@163.com

使用全新设计系统构建 SwiftUI 应用：Liquid Glass 带来视觉革命

引言

在 WWDC 2025 上，苹果发布了 iOS 26 和 macOS Tahoe 的重大视觉更新，核心亮点是名为 Liquid Glass 的全新自适应材质系统。这种创新材质为 SwiftUI 应用带来了革命性的视觉变革，从工具栏、控件到应用结构都焕然一新。本文将详细介绍如何利用这套新设计系统打造视觉惊艳的应用体验。

Liquid Glass 的核心概念

Liquid Glass 材质巧妙融合了玻璃的光学特性和液体的流动性，创造出轻盈动态的视觉体验。随着用户滚动内容，这种材质能智能适应下方内容，实现从浅色到深色的自然过渡。系统控件如开关、分段选择器和滑块等，在交互时会转变为液态玻璃形态，带来赏心悦目的动态效果。

应用结构的革新

NavigationSplitView 优化

NavigationSplitView是构建层级导航的核心组件，现在拥有了悬浮在内容上方、具备 Liquid Glass 效果的侧边栏。新引入的backgroundExtensionEffect修饰符允许视图扩展到安全区域之外而不裁切内容，当侧边栏隐藏时，背景图像会被镜像并模糊处理，确保内容完整可见。

NavigationSplitView {
    // 侧边栏内容
}
detail: {
    // 详细内容
}
.backgroundExtensionEffect()

TabView 新特性

iPhone 上的标签栏现在悬浮在内容上方，并可配置为滚动时最小化。通过tabBarMinimizeBehavior修饰符，开发者可以控制标签栏的折叠行为。例如，设置.onScrollDown行为会使标签栏在逆向滚动时重新展开。

TabView {
    // 选项卡内容
}
.tabBarMinimizeBehavior(.onScrollDown)

工具栏的全新设计

新设计中的工具栏项目悬浮在 Liquid Glass 表面，自适应下方内容。系统自动分组工具栏项目，开发者可以使用ToolbarSpacer创建灵活的空间布局或固定间距的分组。

.toolbar {
    ToolbarItemGroup(placement: .primaryAction) {
        Button(action: {}) {
            Label("Favorite", systemImage: "heart")
        }
        ToolbarSpacer(fixed: true) // 固定间距分组
        Button(action: {}) {
            Label("Add", systemImage: "plus")
        }
    }
}

对于需要显示状态指示的工具栏项目，简单的badge修饰符就能实现：

ToolbarItem {
    Button(action: {}) {
        Label("Notifications", systemImage: "bell")
    }
    .badge(5) // 显示5条未读通知
}

搜索体验升级

全新搜索系统提供两种关键模式：

1. 工具栏搜索：在iPad/Mac上显示于右上角，在iPhone上自动调整到底部
2. 专用搜索页面：取代标签栏成为独立搜索界面

NavigationSplitView {
    // 导航内容
}
.searchable(text: $searchText) // 应用于整个视图
.searchToolbarBehavior(.minimal) // 可选最小化行为

控件系统的全面更新

按钮与滑块新特性

• 边框按钮默认采用胶囊形状
• 新增超大尺寸按钮选项
• 滑块支持刻度标记和自定义填充起点

Slider(value: $value, in: 0...100, step: 10) // 自动显示刻度
    .ticks { [60, 90] } // 自定义刻度位置
    .neutralValue(50) // 填充起点设为50%

Button("Action") { }
    .controlSize(.extraLarge) // 超大尺寸按钮

同心性设计原则

新设计强调”角同心性”，确保控件与容器的圆角完美对齐。使用containerConcentric配置可实现自动适应的形状：

Rectangle()
    .corner(.containerConcentric) // 自动适应容器圆角

自定义 Liquid Glass 效果

对于需要特殊视觉表现的自定义视图，glassEffect修饰符提供了强大的定制能力：

Text("Badge")
    .glassEffect() // 默认胶囊形状背景
    .glassEffect(in: Circle()) // 自定义圆形形状
    .tint(.accentColor) // 强调色
    .interactive() // 添加交互动画

多个玻璃元素需要组合使用时，GlassEffectContainer确保视觉一致性：

GlassEffectContainer {
    ForEach(badges) { badge in
        BadgeView(badge)
            .glassEffectID(badge.id) // 关联过渡效果
    }
}

总结与行动指南

采用全新设计系统时，建议开发者：

1. 使用Xcode 26构建应用，自动获得大量视觉改进
2. 检查并移除表单和工具栏背后的自定义背景
3. 善用Liquid Glass打造独特视觉元素
4. 遵循新的同心性设计原则
5. 充分利用搜索和工具栏的新布局选项

通过这套全新的设计系统，开发者能够打造出更精美、更统一的应用体验，让应用视觉与苹果生态系统完美融合。

相关视频

了解全新设计系统

文档

Adopting Liquid Glass
Applying Liquid Glass to custom views