Build a SwiftUI app with the new design
Design|SwiftUI & UI Frameworks 进阶 3m

用 SwiftUI 构建全新设计风格的应用

Build a SwiftUI app with the new design

2025年6月9日

在 Apple 官方观看视频

一句话判断

如果你只看一个关于 Liquid Glass 和新设计系统的 session，就是这个——它是 SwiftUI 新设计的「实操手册」，从 app 结构到自定义 glass 效果全覆盖。

这场 Session 讲了什么

Franck 以 Landmarks 示例项目为主线，用 iOS 26 / macOS Tahoe 的新 SDK 重新构建了一遍 app，系统性地展示了五个层面的变更：

1. App 结构（NavigationSplitView / TabView / Sheets）

  • NavigationSplitView 的 sidebar 现在是 Liquid Glass 材质，浮在内容之上。
  • 新增 backgroundExtensionEffect modifier，让 hero 图片可以延伸到 safe area 外面做镜像模糊，不再被 sidebar 裁切。
  • TabView 的 tab bar 在 iPhone 上变为悬浮式，支持 tabBarMinimizeBehavior 配置滚动时的收起策略（如 onScrollDown）。
  • 新增 tabViewBottomAccessory，可以在 tab bar 上方放置额外控件（比如 Music 的播放条），利用 bar 收起时腾出的空间。
  • Sheet 在 iOS 26 上默认内嵌、带 Liquid Glass 背景，从按钮直接 morph 出来（配合 navigation zoom transition）。

2. Toolbars

  • 工具栏项自动分组。新增 ToolbarSpacer（fixed/flexible）控制分组间距。
  • sharedBackgroundVisibility 让某些 item 脱离背景组（比如头像）。
  • 工具栏 item 支持 badge modifier。
  • 图标默认 monochrome 渲染，减少视觉噪音。
  • 新增 automatic scroll edge effect，保证浮动控件在内容上方的可读性。

3. Search

  • 搜索栏在 toolbar placement 时自动适配：iPhone 底部、iPad/Mac 顶部。
  • 多 tab app 支持 dedicated search tab：设置 search role，搜索框替代 tab bar。
  • searchToolbarBehavior 可显式 opt-in 最小化搜索框。

4. Controls

  • 按钮默认 capsule shape；macOS 的 mini/small/medium 保留圆角矩形。
  • macOS 控件整体增高，增大点击目标。
  • 新增 extra large button size、glass / glassProminent button style。
  • Slider 支持 tick marks（step 参数自动生成）、neutralValue 设置填充起点。
  • Menu 在各平台统一布局，图标在 leading edge。
  • 新增 concentricRectangle shape 实现角同心性（corner concentricity）。

5. 自定义 Liquid Glass 效果

  • glassEffect modifier 给任意 view 加玻璃效果，默认 capsule shape。
  • interactive modifier 让 glass 对用户交互产生缩放/弹跳/微光反馈。
  • GlassEffectContainer 组合多个 glass 元素，共享采样区域，支持 fluid morphing。
  • glassEffectID 配合 matchedGeometryEffect 实现展开/收起的流畅过渡。

值得深挖的点

GlassEffectContainer 的必要性：glass 材质会从比自身更大的区域采样颜色来做折射，但 glass 不能采样其他 glass。如果你把多个 glass 元素放在不同容器里，视觉上会不一致。必须用 GlassEffectContainer 把它们包起来，让采样区域共享。这是很多人会踩的坑。

TabView accessory 的 placement 感知：tabViewBottomAccessoryPlacement 环境值会告诉你 accessory 当前是展开还是收在 bar 里，据此调整 UI。这种「空间感知」的设计思路值得借鉴。

Sheet 的 morph transition：Sheet 不再是「从底部弹出」那么简单，它可以从业务按钮直接 morph 展开。这需要 toolbar item 作为 navigation zoom transition 的 source、sheet content 作为 destination。效果非常流畅，但需要理解 transition 的方向性。

代码片段

// TabView 滚动收起 + 底部 accessory
TabView {
    Tab("Home", systemImage: "house") { HomeView() }
    Tab("Search", systemImage: "magnifyingglass", role: .search) { SearchView() }
}
.tabBarMinimizeBehavior(.onScrollDown)
.tabViewBottomAccessory {
    PlaybackControls()
}

// 自定义 Glass 效果 + 交互反馈
Text("Badge")
    .padding()
    .glassEffect(.interactive, in: .capsule)

// Glass 容器内的 fluid morphing
@Namespace var namespace
GlassEffectContainer {
    HStack {
        ForEach(badges) { badge in
            BadgeView(badge)
                .glassEffectID(badge.id, in: namespace)
        }
    }
}

// 角同心性 shape
RoundedRectangle(corner: .concentricRectangle)

最佳实践

  1. 先删再加：如果你之前用 presentationBackground 给 sheet 加了自定义背景，考虑删掉，让新的 Liquid Glass 材质自然展现。
  2. 清理 toolbar 后面的背景色：新设计有 automatic scroll edge effect，你之前加在 toolbar 后面的半透明遮罩或深色背景会和它冲突。
  3. 图标用 monochrome，但不要随便 tint：新设计下图标默认单色渲染。只有需要表达「行动号召」或「下一步」时才用 tint，不要单纯为了好看。
  4. 搜索框优先放在 NavigationSplitView 上：这样 iPhone 会自动把它放到底部，iPad/Mac 放到顶部 trailing 位置，一套代码适配两个平台。
  5. 用 concentricRectangle 替代手动算圆角：它会根据容器自动匹配圆心，跨设备表现一致。

还有什么值得关注

  • glassEffect 支持自定义 shape（不限于 capsule）和 tint，但 tint 同样只用于传达意义。
  • Sheets、menus、alerts、popovers 都会自动从触发它们的 Liquid Glass 控件 morph 出来，不需要额外代码。
  • 如果你的 app 有密集的浮动 UI（类似 Calendar），可以用 scrollEdgeEffectStyle 调整 edge effect 的锐度。
  • 配合观看 “Meet Liquid Glass” 和 “Get to know the new design system” 两个 session 效果更佳。
Design SwiftUI