WWDC 2025 Build a SwiftUI app with the new design

Build a SwiftUI app with the new design

WWDC 2025推出了liquid glass这种重磅级的新设计，怎样在swiftUI开发中用上这些新特性，给你的用户带来耳目一新的视觉盛宴呢，今天我们来聊一下

总结起来就是这个 session 展示了如何用 Liquid Glass 与新 SwiftUI API 重塑 App 结构（导航、标签页、工具栏、搜索、控件），在 iOS 26 和 macOS Tahoe 上实现更轻盈、动态、统一的用户体验。

具体来讲就是以Liquid Glass为中心，在不同场景包括NavigationSplitView, Inspector, TabView, Sheets, Toolbar和不同控件按钮、滑块、菜单的结合，呈现新的设计效果

1. 新设计的核心理念

• Liquid Glass 是 iOS 26 和 macOS Tahoe 的全新自适应材质，用于 控制和导航元素。
• 它结合玻璃的光学特性和液体的流动感，创造出轻盈、动态的视觉效果，帮助内容成为界面的主角。
• 在交互时（比如切换、滑动、点击），控件会"活起来"，提供流体化的反馈。

---

2. 应用结构更新

• NavigationSplitView ：侧边栏采用 Liquid Glass，浮动在内容上，配合新的 backgroundExtensionEffect 可避免图片被裁剪。

• Inspector：对比侧边栏，采用更细腻的分层效果，与所选内容建立视觉联系。

• TabView：

  • 新的 Tab Bar 可 悬浮在内容之上 ，并通过 tabBarMinimizeBehavior 设置滚动时的折叠/展开行为。
  • tabViewBottomAccessory 允许在 Tab Bar 下方附加额外控件（如播放控件）。

• Sheets：

  • 默认带有 Liquid Glass 背景。
  • 支持 部分高度，边缘自动与屏幕圆角对齐。
  • 转换到全屏时会逐渐过渡为不透明背景。
  • 新的 导航缩放过渡 让 Sheet/对话框看起来从按钮"流出"。

---

3. 工具栏 (Toolbars)

• 工具栏表面为 Liquid Glass，自适应底层内容。
• 项目可自动分组，也可用 ToolbarSpacer 控制分组间距。
• badge 修饰符为工具栏按钮提供消息提醒。
• sharedBackgroundVisibility 可以将项目单独分组，避免背景混淆。
• 图标更偏向单色，减少干扰；但仍可通过 tint 传达语义。
• 滚动边缘效果 (scrollEdgeEffect) 自动处理内容与浮动控件之间的可读性，可通过 scrollEdgeEffectStyle 调整。

---

4. 搜索体验

• 提供 两大模式：

  1. 工具栏内搜索：iPhone 显示在底部，iPad/Mac 显示在右上角。
  2. 独立的搜索页面 ：可在 TabView 中定义 search 角色。

• 新的 searchToolbarBehavior API 可精细控制搜索的折叠/展开方式。

• 搜索框本身置于 Liquid Glass 表面，激活时与内容保持自然过渡。

---

5. 标准控件的更新

• 按钮 (Buttons) ：

  • 默认采用 胶囊形状，与系统圆角保持一致。
  • 新增 extra-large 尺寸，强调主操作。
  • 新的 glass 与 glassProminent 样式将 Liquid Glass 引入按钮。

• 滑块 (Sliders) ：

  • 支持 刻度 (tick marks) ，可自动或手动配置。
  • neutralValue 参数允许定义中点值（如播放速度调节）。

• 菜单 (Menus) ：

  • 图标统一在左侧，iOS 与 macOS 行为一致。

• 一致性特性：

  • 新的 corner concentricity 概念：控件自动与容器（如 Sheet）保持圆角同心。

---

6. 自定义 Liquid Glass

• 使用 glassEffect 修饰符为自定义控件加上 Liquid Glass。
• 通过 GlassEffectContainer 管理多个玻璃元素，确保光影一致。
• 使用 glassEffectID 与 namespace 配合，可以实现 流体化的玻璃转场（比如徽章展开/收缩）。
• interactive 修饰符让自定义玻璃控件具备触摸反馈（缩放、弹性、闪光）。
• 支持 tint 高亮关键控件，但应避免过度装饰。

---

7. 最佳实践与采纳策略

• 使用 Xcode 26 SDK 构建，许多 UI 更新自动获得。
• 检查 App 结构，移除不必要的背景，避免与系统滚动边缘效果冲突。
• 优先使用系统控件 来获得一致性和自动适配。
• 在必要时才引入自定义 Liquid Glass 元素，让 App 的独特之处得到凸显。