Build a SwiftUI app with the new design system
SwiftUI & UI Frameworks 进阶 0m

用新设计系统构建 SwiftUI 应用

Build a SwiftUI app with the new design system

2025年6月9日

在 Apple 官方观看视频

一句话判断

如果你的 app 是纯 SwiftUI，这场是你落地 Liquid Glass 最短的路径——系统控件自动适配，你只需要处理自定义部分和边界情况。

这场 Session 讲了什么

这是一个 Code-along 类型的实操 Session，带着你从零搭建一个适配 Liquid Glass 新设计系统的 SwiftUI app。重点不是讲设计理念（那是 Session 356/363 的事），而是讲具体怎么做——用哪些 modifier、怎么处理 Material 背景、怎么适配六种外观模式、怎么在不同平台间保持一致性。

Session 的核心信息：SwiftUI 在 2025 年对新设计系统的支持是深度集成的。大部分标准控件（NavigationStack、TabView、List、Form、Sheet）会自动获得 Liquid Glass 效果，开发者不需要写额外代码。但如果你有自定义视图、自定义背景、或对导航栏/工具栏做了特殊处理，就需要了解新的 API。

值得深挖的点

Material 的层级体系

SwiftUI 的 Material 在 2025 年有了更清晰的层级定义：从 ultraThinMaterial 到 thickMaterial，每种对应不同的模糊强度和背景透过率。在 Liquid Glass 设计中，选错 Material 层级会直接影响可读性。

外观模式的自动适配逻辑

SwiftUI 的 preferredColorScheme 和新的外观模式（Clear/Tinted）之间的关系需要理清。系统会根据用户的全局设置自动切换，但 app 内也可以通过 modifier 做局部覆盖。

跨平台一致性 vs 平台特异性

同一个 SwiftUI 视图在 iPhone、iPad、Mac、Watch 上的表现可能不同——不是 bug，是设计意图。Session 会讲解哪些差异是正常的、哪些需要你主动适配。

NavigationStack 的行为变化

新设计中导航栏的透明度更高、材质更轻。如果你之前用了 .toolbarBackground(.hidden, for: .navigationBar) 之类的 modifier 做自定义透明效果，现在可能需要重新审视——系统默认已经足够透明了。

代码片段

// 1. 标准 SwiftUI 视图自动适配——无需额外代码
struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                Text("Item 1")
                Text("Item 2")
            }
            .navigationTitle("My App")
        }
        // 自动获得 Liquid Glass 导航栏效果
    }
}

// 2. 自定义视图使用 Material 背景
struct CustomCard: View {
    var body: some View {
        VStack {
            Text("Card Content")
                .font(.headline)
            Text("Details here")
        }
        .padding()
        .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 16))
        // .regularMaterial 在 Liquid Glass 下会自动调整模糊和透明度
    }
}

// 3. 工具栏使用玻璃材质
.toolbarBackground(.glass, for: .navigationBar)
// 注意：.glass 是新增的 Material 类型，专门为 Liquid Glass 优化

// 4. 适配所有外观模式
struct ThemedView: View {
    @Environment(\.colorScheme) var colorScheme
    @Environment(\.colorSchemeContrast) var contrast

    var body: some View {
        Rectangle()
            .fill(colorScheme == .dark ? .white.opacity(0.1) : .black.opacity(0.05))
            // 系统会自动处理 Clear/Tinted 模式
            // 但你可能需要微调自定义颜色的适配
    }
}

// 5. 确保自定义内容在所有模式下可读
Text("Important")
    .foregroundStyle(.primary)      // 系统主色，自动适配
    .font(.system(.title, design: .default, weight: .bold))
    // 避免硬编码颜色——用 semantic color 才能自动适配外观

最佳实践

  1. 先跑一遍标准 SwiftUI 控件。90% 的 Liquid Glass 效果是免费的——你什么都不用改，重新构建就会自动生效。先确认这些默认效果是否满足需求，再决定是否要自定义
  2. 用 semantic color，不要硬编码。.primary、.secondary、.background 这些语义色会自动适配所有外观模式。如果你用了 Color(red:green:blue:) 这种硬编码颜色，在 Clear/Tinted 模式下很可能翻车
  3. 在所有六种外观模式下做一轮视觉检查。Xcode Preview 支持切换外观，但真机效果更准确。尤其注意 Dark → Clear dark 和 Tinted 这两个转换路径
  4. 不要过度使用 Material。新设计中不需要每个元素都套一层玻璃材质——适度的对比和留白才能让 Liquid Glass 效果有呼吸感
  5. 关注 .glass 这个新 Material。它是专门为 Liquid Glass 设计的，比传统的 .ultraThinMaterial 等更贴合新设计语言

还有什么值得关注

  • Session 363 讲设计理念，Session 402 讲实操落地，建议搭配观看
  • Session 356 “Get to know the new design system” 提供了系统级的设计上下文
  • SwiftUI 的新 Web API、3D Charts、Rich Text Editor 等功能也在今年更新，值得单独关注
  • 如果你的 app 还有 UIKit 部分，需要关注 UIKit 侧的 Liquid Glass 适配 Session
  • Xcode 26 的 Preview 功能增强了对新外观模式的支持，善用它来加速迭代
SwiftUI Design