MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

SwiftUI SwiftUI预览与调试

2024-04-251.1k 阅读

SwiftUI 预览基础

SwiftUI 提供了一种极为便捷的方式来实时预览视图，这极大地加快了开发速度并增强了开发体验。在 Xcode 中，当创建一个新的 SwiftUI 视图文件时，会自动生成一些代码模板，其中就包含了预览相关的代码。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在上述代码中，ContentView 是我们定义的视图结构体。而 ContentView_Previews 结构体遵循 PreviewProvider 协议，该协议要求提供一个 previews 静态属性，其返回值是 some View，在这里我们直接返回 ContentView()。这意味着在 Xcode 的预览面板中，会展示 ContentView 的外观。

多设备预览

Xcode 允许我们在不同设备的模拟器上预览 SwiftUI 视图，这对于确保视图在各种屏幕尺寸和分辨率下的适配性非常重要。在预览面板的左上角，有一个设备选择菜单，通过它可以切换不同的设备，如 iPhone、iPad、Mac 等。

例如，如果我们想要在 iPhone 14 Pro 和 iPad Pro 上同时预览视图，可以修改 ContentView_Previews 如下：

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
              .previewDevice(PreviewDevice(rawValue: "iPhone 14 Pro"))
              .previewDisplayName("iPhone 14 Pro")
            ContentView()
              .previewDevice(PreviewDevice(rawValue: "iPad Pro (12.9-inch) (6th generation)"))
              .previewDisplayName("iPad Pro 12.9")
        }
    }
}

这里使用了 Group 来组合多个预览实例，每个实例通过 previewDevice 方法指定设备，并通过 previewDisplayName 方法设置在预览面板中显示的名称。

不同环境下的预览

除了设备差异，我们还可以在不同的环境下预览视图，比如不同的本地化设置、动态类型尺寸以及外观模式（亮色或暗色模式）。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
              .environment(\.locale, Locale(identifier: "fr_FR"))
              .previewDisplayName("French")
            ContentView()
              .environment(\.sizeCategory, .extraExtraLarge)
              .previewDisplayName("Large Text")
            ContentView()
              .preferredColorScheme(.dark)
              .previewDisplayName("Dark Mode")
        }
    }
}

在上述代码中，第一个预览实例通过 environment 方法设置了法语本地化环境，第二个实例设置了大字体尺寸环境，第三个实例设置了暗色模式环境。这样可以快速查看视图在不同环境下的显示效果。

实时预览与交互

SwiftUI 的实时预览不仅能展示静态视图，还支持一定程度的交互。当我们在代码中定义了一些可交互的视图，如按钮、滑块等，在预览面板中可以直接与之交互。

struct InteractiveView: View {
    @State private var isTapped = false
    var body: some View {
        VStack {
            Button(action: {
                self.isTapped.toggle()
            }) {
                Text(isTapped ? "Tapped!" : "Tap Me")
            }
        }
    }
}

struct InteractiveView_Previews: PreviewProvider {
    static var previews: some View {
        InteractiveView()
    }
}

在这个 InteractiveView 中，我们使用了 @State 来跟踪按钮是否被点击。在预览面板中，点击按钮可以看到文本在 “Tap Me” 和 “Tapped!” 之间切换，就像在实际设备上运行一样。

实时更新代码

当我们在编写 SwiftUI 代码时，Xcode 的实时预览功能会自动检测代码的变化并更新预览。这意味着我们可以一边修改视图的样式、布局或逻辑，一边实时看到修改后的效果，无需手动重新构建或运行应用。

例如，假设我们有一个简单的 Rectangle 视图：

struct RectangleView: View {
    var body: some View {
        Rectangle()
          .fill(Color.blue)
          .frame(width: 200, height: 100)
    }
}

struct RectangleView_Previews: PreviewProvider {
    static var previews: some View {
        RectangleView()
    }
}

如果我们将 fill 颜色从 Color.blue 修改为 Color.red，预览面板会立即更新显示为红色的矩形。这种实时反馈大大提高了开发效率，使我们能够快速迭代视图设计。

预览复杂视图层次结构

在实际开发中，视图通常会有复杂的层次结构。SwiftUI 的预览功能同样能很好地处理这种情况。

struct OuterView: View {
    var body: some View {
        VStack {
            InnerView()
            AnotherInnerView()
        }
    }
}

struct InnerView: View {
    var body: some View {
        Text("Inner Text")
          .font(.headline)
    }
}

struct AnotherInnerView: View {
    var body: some View {
        Image(systemName: "star.fill")
          .foregroundColor(.yellow)
    }
}

struct OuterView_Previews: PreviewProvider {
    static var previews: some View {
        OuterView()
    }
}

在这个例子中，OuterView 包含了 InnerView 和 AnotherInnerView。预览 OuterView 时，会完整展示其包含的所有子视图及其布局，方便我们检查整个视图层次结构的外观和布局是否符合预期。

预览数据驱动的视图

许多 SwiftUI 视图是由数据驱动的，比如列表视图展示一组数据。在预览这类视图时，我们需要提供一些示例数据。

struct User {
    let name: String
    let age: Int
}

struct UserListView: View {
    let users: [User]
    var body: some View {
        List(users) { user in
            VStack(alignment:.leading) {
                Text(user.name)
                  .font(.headline)
                Text("Age: \(user.age)")
                  .font(.subheadline)
            }
        }
    }
}

struct UserListView_Previews: PreviewProvider {
    static var previews: some View {
        let sampleUsers = [
            User(name: "Alice", age: 25),
            User(name: "Bob", age: 30)
        ]
        return UserListView(users: sampleUsers)
    }
}

在上述代码中，UserListView 展示了一个用户列表。为了在预览中显示该列表，我们在 UserListView_Previews 中创建了一些示例用户数据，并将其传递给 UserListView。这样就可以在预览面板中看到列表视图的实际效果，包括数据的展示格式和布局。

预览视图模型驱动的视图

在 MVVM（Model - View - ViewModel）架构中，视图通常由视图模型驱动。我们同样可以在预览中模拟视图模型的行为。

class UserViewModel: ObservableObject {
    @Published var users: [User] = []
    init() {
        // 这里可以模拟从网络加载数据等操作
        users.append(User(name: "Charlie", age: 35))
    }
}

struct UserViewModelDrivenView: View {
    @ObservedObject var viewModel: UserViewModel
    var body: some View {
        List(viewModel.users) { user in
            VStack(alignment:.leading) {
                Text(user.name)
                  .font(.headline)
                Text("Age: \(user.age)")
                  .font(.subheadline)
            }
        }
    }
}

struct UserViewModelDrivenView_Previews: PreviewProvider {
    static var previews: some View {
        let viewModel = UserViewModel()
        return UserViewModelDrivenView(viewModel: viewModel)
    }
}

在这个例子中，UserViewModelDrivenView 依赖于 UserViewModel。在预览时，我们创建了一个 UserViewModel 实例并传递给视图，从而能够在预览中观察视图在视图模型数据驱动下的表现。

SwiftUI 调试技巧

虽然 SwiftUI 提供了强大的预览功能，但在开发过程中，调试仍然是必不可少的环节。以下介绍一些针对 SwiftUI 的调试技巧。

使用 print 语句

在 SwiftUI 视图的代码中，我们可以像在其他 Swift 代码中一样使用 print 语句来输出调试信息。

struct DebuggingView: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("Count: \(count)")
            Button("Increment") {
                count += 1
                print("Button tapped, new count: \(count)")
            }
        }
    }
}

struct DebuggingView_Previews: PreviewProvider {
    static var previews: some View {
        DebuggingView()
    }
}

当我们在预览面板中点击按钮时，Xcode 的控制台会输出 “Button tapped, new count: [具体数字]”，这有助于我们了解按钮点击事件的执行情况以及 count 变量的变化。

视图检查器

Xcode 提供了视图检查器工具，它可以帮助我们深入了解视图的布局和属性。在模拟器或真机上运行应用时，通过 Xcode 的调试菜单（Debug -> View Debugging -> Capture View Hierarchy）可以捕获视图层次结构。

在 SwiftUI 中，视图检查器同样有效。例如，我们有一个复杂的布局：

struct ComplexLayoutView: View {
    var body: some View {
        HStack {
            VStack {
                Text("Top Left")
                Text("Bottom Left")
            }
            VStack {
                Text("Top Right")
                Text("Bottom Right")
            }
        }
    }
}

struct ComplexLayoutView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexLayoutView()
    }
}

通过捕获视图层次结构，我们可以在视图检查器中看到每个 Text 视图以及 HStack 和 VStack 的布局关系，包括它们的位置、大小和约束等信息，这对于排查布局问题非常有帮助。

断点调试

在 SwiftUI 代码中设置断点与在其他 Swift 代码中设置断点方式相同。我们可以在视图的属性、方法或计算属性中设置断点。

struct BreakpointView: View {
    @State private var value = 0
    var body: some View {
        VStack {
            Text("Value: \(value)")
            Button("Change Value") {
                value = calculateNewValue()
            }
        }
    }

    func calculateNewValue() -> Int {
        // 设置断点在此处
        let newVal = value + 10
        return newVal
    }
}

struct BreakpointView_Previews: PreviewProvider {
    static var previews: some View {
        BreakpointView()
    }
}

当在预览面板中点击按钮时，执行到 calculateNewValue 方法中的断点处，Xcode 会暂停执行，我们可以检查变量的值、调用栈等信息，以帮助调试代码逻辑。

调试环境相关问题

在处理不同环境（如本地化、动态类型、外观模式）时，可能会遇到一些问题。我们可以通过在代码中添加条件判断来调试这些问题。

struct EnvironmentDebugView: View {
    var body: some View {
        let sizeCategory = UIScreen.main.traitCollection.preferredContentSizeCategory
        if sizeCategory.isAccessibilityCategory {
            Text("Large text mode detected. Adjust layout accordingly.")
        } else {
            Text("Normal text mode.")
        }
    }
}

struct EnvironmentDebugView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            EnvironmentDebugView()
              .environment(\.sizeCategory, .extraExtraLarge)
              .previewDisplayName("Large Text")
            EnvironmentDebugView()
              .environment(\.sizeCategory, .medium)
              .previewDisplayName("Normal Text")
        }
    }
}

在这个例子中，我们通过检查 sizeCategory 是否为可访问性相关的类别，来判断是否处于大字体模式，并在视图中显示相应的提示信息。通过在不同环境下预览，我们可以验证这种逻辑是否正确工作。

处理预览与实际运行差异

尽管 SwiftUI 的预览功能尽可能模拟实际运行环境，但仍可能存在一些差异。了解并处理这些差异对于确保应用在实际设备上正常运行至关重要。

性能差异

在预览中，由于运行环境和资源的不同，可能无法准确反映应用在实际设备上的性能表现。例如，复杂的动画或大量数据的加载在预览中可能运行流畅，但在实际设备上可能出现卡顿。

为了优化性能，我们可以在实际设备上进行性能测试。Xcode 提供了 Instruments 工具，它可以帮助我们分析应用的性能瓶颈。例如，我们可以使用 Core Animation 工具来检查动画的帧率，使用 Instruments 的 CPU 和 Memory 分析工具来查看应用在运行时的资源消耗情况。

// 模拟一个复杂动画
struct ComplexAnimationView: View {
    @State private var angle = Angle.zero
    var body: some View {
        Circle()
          .fill(Color.blue)
          .rotationEffect(angle)
          .onAppear {
                withAnimation(.linear(duration: 5).repeatForever()) {
                    self.angle = Angle(degrees: 360)
                }
            }
    }
}

struct ComplexAnimationView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexAnimationView()
    }
}

在实际设备上运行这个视图，并使用 Instruments 检查动画性能，可能会发现一些优化点，比如是否可以使用更高效的动画曲线，或者是否需要减少动画的复杂度。

设备特性差异

不同设备可能具有不同的特性，如不同的屏幕尺寸、分辨率、传感器等。在预览中，虽然可以模拟多种设备，但某些设备特定的功能可能无法完全准确模拟。

例如，在处理设备方向变化时，预览可能无法完全重现实际设备上的方向变化逻辑。我们需要在实际设备上测试方向变化的处理，确保视图能够正确地调整布局。

struct OrientationView: View {
    @Environment(\.verticalSizeClass) var verticalSizeClass
    var body: some View {
        if verticalSizeClass == .compact {
            Text("Landscape layout")
        } else {
            Text("Portrait layout")
        }
    }
}

struct OrientationView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            OrientationView()
              .environment(\.verticalSizeClass, .compact)
              .previewDisplayName("Landscape")
            OrientationView()
              .environment(\.verticalSizeClass, .regular)
              .previewDisplayName("Portrait")
        }
    }
}

虽然在预览中可以通过设置 verticalSizeClass 来模拟不同方向，但在实际设备上测试方向变化时，可能会发现一些布局或逻辑上的问题，需要进一步调整代码。

依赖项差异

在应用开发中，我们可能会使用一些外部库或依赖项。这些依赖项在预览环境和实际运行环境中的行为可能略有不同。

例如，一个网络请求库可能在预览环境中无法真正进行网络请求（因为预览通常在离线状态下运行）。在这种情况下，我们可以使用模拟数据来代替网络请求结果，确保视图在预览中有正确的显示。同时，在实际运行环境中，要确保网络请求的正确性和稳定性。

// 假设这是一个网络请求函数
func fetchData(completion: @escaping (Result<Data, Error>) -> Void) {
    // 实际实现会进行网络请求
    // 这里简单模拟失败情况
    completion(.failure(NSError(domain: "NetworkError", code: 0, userInfo: nil)))
}

struct NetworkDependentView: View {
    @State private var data: Data?
    var body: some View {
        if let data = data {
            Text("Data received: \(String(data: data, encoding:.utf8) ?? "Unknown")")
        } else {
            Text("Loading data...")
        }
        .onAppear {
            fetchData { result in
                switch result {
                case .success(let receivedData):
                    self.data = receivedData
                case .failure(let error):
                    print("Error: \(error)")
                }
            }
        }
    }
}

struct NetworkDependentView_Previews: PreviewProvider {
    static var previews: some View {
        let sampleData = "Sample data".data(using:.utf8)!
        return NetworkDependentView()
          .environmentObject(PreviewData(data: sampleData))
    }
}

class PreviewData: ObservableObject {
    let data: Data
    init(data: Data) {
        self.data = data
    }
}

在这个例子中，NetworkDependentView 依赖于网络请求获取数据。在预览中，我们通过 PreviewData 提供模拟数据，而在实际运行中，需要确保 fetchData 函数能够正确进行网络请求并处理结果。

通过对这些差异的认识和处理，我们可以利用 SwiftUI 的预览功能高效开发视图，同时保证应用在实际设备上的稳定运行。无论是通过优化性能、处理设备特性，还是管理依赖项，都有助于我们创建高质量的 SwiftUI 应用。