SwiftUI笔记（十）：实战技巧与最佳实践

在实际开发中，除了掌握 SwiftUI 的基础知识外，还需要了解一些实用技巧和最佳实践，以提高开发效率和代码质量。

重点：

视图组织和复用
性能优化策略
调试技巧
UIKit 集成
常见问题解决

视图组织 Link to heading

视图拆分原则：

// 避免视图过大
struct ComplexView: View {
    var body: some View {
        VStack {
            HeaderView()
            ContentView()
            FooterView()
        }
    }
}

// 提取子视图
struct HeaderView: View {
    var body: some View {
        // 头部内容
    }
}

视图组件化：

struct CustomButton: View {
    let title: String
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            Text(title)
                .font(.headline)
                .foregroundColor(.white)
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.blue)
                .cornerRadius(10)
        }
    }
}

// 使用组件
CustomButton(title: "确定") {
    // 处理点击
}

性能优化 Link to heading

避免重复计算：

struct OptimizedView: View {
    let items: [Item]
    
    // 计算属性缓存结果
    private var filteredItems: [Item] {
        items.filter { $0.isValid }
    }
    
    var body: some View {
        List(filteredItems) { item in
            ItemRow(item: item)
        }
    }
}

延迟加载：

struct LazyLoadView: View {
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(0..<1000) { index in
                    Text("Row \(index)")
                        .onAppear {
                            // 仅当视图出现时加载数据
                            loadDataIfNeeded(for: index)
                        }
                }
            }
        }
    }
}

调试技巧 Link to heading

预览多设备：

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .previewDevice("iPhone 14")
            
            ContentView()
                .previewDevice("iPhone 14 Pro Max")
                .preferredColorScheme(.dark)
        }
    }
}

调试视图层级：

struct DebugView: View {
    var body: some View {
        VStack {
            Text("调试文本")
        }
        .border(Color.red)  // 显示边界
        .background(Color.yellow.opacity(0.3))  // 显示背景
    }
}

UIKit 集成 Link to heading

UIKit 视图包装：

struct UIKitWrapper: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        // 创建 UIKit 视图
        let view = UIView()
        view.backgroundColor = .red
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
        // 更新视图
    }
}

UIViewController 集成：

struct UIKitControllerWrapper: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> UIViewController {
        // 创建 UIViewController
        let controller = UIViewController()
        return controller
    }
    
    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
        // 更新控制器
    }
}

常见问题解决 Link to heading

键盘处理：

struct KeyboardAwareView: View {
    @State private var keyboardHeight: CGFloat = 0
    
    var body: some View {
        TextField("输入", text: .constant(""))
            .padding(.bottom, keyboardHeight)
            .onAppear {
                NotificationCenter.default.addObserver(
                    forName: UIResponder.keyboardWillShowNotification,
                    object: nil,
                    queue: .main
                ) { notification in
                    let keyboardFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect
                    keyboardHeight = keyboardFrame?.height ?? 0
                }
            }
    }
}

导航栈管理：

struct NavigationManager: View {
    @State private var path = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $path) {
            List {
                NavigationLink("页面1", value: 1)
                NavigationLink("页面2", value: 2)
            }
            .navigationDestination(for: Int.self) { value in
                DetailView(id: value)
            }
        }
    }
}

项目架构 Link to heading

MVVM 模式：

// 模型
struct User {
    let id: UUID
    var name: String
}

// 视图模型
class UserViewModel: ObservableObject {
    @Published var user: User
    
    init(user: User) {
        self.user = user
    }
    
    func updateName(_ name: String) {
        user.name = name
    }
}

// 视图
struct UserView: View {
    @StateObject var viewModel: UserViewModel
    
    var body: some View {
        VStack {
            Text(viewModel.user.name)
            Button("更新") {
                viewModel.updateName("新名字")
            }
        }
    }
}

依赖注入：

protocol DataService {
    func fetchData() async throws -> [Item]
}

class AppDataService: DataService {
    func fetchData() async throws -> [Item] {
        // 实现数据获取
        return []
    }
}

struct ContentView: View {
    let dataService: DataService
    
    var body: some View {
        // 使用 dataService
    }
}

测试策略 Link to heading

视图测试：

import XCTest
@testable import YourApp

class ViewTests: XCTestCase {
    func testButtonTap() {
        let view = ContentView()
        let button = view.find(viewWithId: "submitButton")
        XCTAssertNotNil(button)
    }
}

视图模型测试：

class ViewModelTests: XCTestCase {
    func testDataUpdate() {
        let viewModel = ViewModel()
        viewModel.updateData("新数据")
        XCTAssertEqual(viewModel.data, "新数据")
    }
}

SwiftUI 开发中的最佳实践不仅包括代码层面的优化，还包括架构设计、测试策略等多个方面。合理运用这些实践可以提高代码质量和开发效率，创建出更好的应用程序。