第7章：协议在跨平台开发中的应用

7.3 协议在跨平台 UI 层的应用

在跨平台开发中，UI 层是最具挑战性的部分之一，因为不同平台（如 iOS、macOS、Android）的用户界面框架和交互方式差异显著。Swift 的协议化编程（POP）通过抽象 UI 行为和依赖关系，可以帮助开发者在跨平台 UI 层实现一致的逻辑复用，同时适配平台特定的渲染需求。本节将探讨协议在跨平台 UI 层中的应用，分析其设计方法，并通过示例展示如何利用协议构建灵活的 UI 模块。

跨平台 UI 层的挑战

  1. 框架差异：
    • iOS 使用 UIKit 或 SwiftUI，macOS 支持 AppKit，Android 使用 Jetpack Compose 或 View 系统。
  2. 交互差异：
    • 平台间的触摸、手势、导航模式各不相同。
  3. 一致性需求：
    • UI 逻辑（如数据绑定、事件处理）需跨平台复用，但呈现方式需符合平台规范。
  4. 性能要求：
    • UI 渲染需高效，避免跨平台抽象导致延迟。

协议在 UI 层的作用

协议通过以下方式应对 UI 层挑战：

  • 抽象 UI 行为：定义通用的 UI 操作接口，隐藏平台细节。
  • 分离逻辑与渲染：将业务逻辑与视图渲染解耦。
  • 支持依赖注入：注入平台特定实现，保持逻辑复用。
  • 适配 SwiftUI：结合 SwiftUI 的声明式特性，提升跨平台能力。

示例：跨平台任务列表 UI

假设我们要实现一个跨平台的任务列表 UI，支持显示任务和添加任务。

第一步：定义 UI 协议
protocol TaskViewModel {
    var tasks: [String] { get }
    func addTask(title: String)
    func refresh()
}

protocol TaskView {
    func displayTasks(_ tasks: [String])
    func showMessage(_ message: String)
}
  • TaskViewModel 定义 UI 逻辑，管理任务数据和操作。
  • TaskView 定义视图行为，负责渲染和用户反馈。
第二步：实现跨平台业务逻辑
class TaskViewModelImpl: TaskViewModel {
    private let store: TaskStore
    private let view: TaskView
    
    var tasks: [String] {
        store.loadTasks().map { $0.title }
    }
    
    init(store: TaskStore, view: TaskView) {
        self.store = store
        self.view = view
    }
    
    func addTask(title: String) {
        let id = UUID().uuidString
        store.saveTask(id: id, title: title, completed: false)
        view.showMessage("Added: \(title)")
        refresh()
    }
    
    func refresh() {
        view.displayTasks(tasks)
    }
}

protocol TaskStore {
    func saveTask(id: String, title: String, completed: Bool)
    func loadTasks() -> [Task]
}

struct Task {
    let id: String
    let title: String
    var completed: Bool
}
  • TaskViewModelImpl 是跨平台逻辑，依赖 TaskStore 和 TaskView。
第三步：实现平台特定视图

为 iOS（SwiftUI）和模拟环境提供视图实现：

// iOS SwiftUI 视图
import SwiftUI

struct iOSTaskView: TaskView {
    @ObservedObject private var viewModel: TaskViewModelImpl
    
    init(viewModel: TaskViewModelImpl) {
        self.viewModel = viewModel
    }
    
    func displayTasks(_ tasks: [String]) {
        // SwiftUI 自动更新 UI
    }
    
    func showMessage(_ message: String) {
        print("iOS message: \(message)") // 模拟弹窗
    }
    
    var body: some View {
        List(viewModel.tasks, id: \.self) { task in
            Text(task)
        }
        .onAppear { viewModel.refresh() }
    }
}

// 模拟视图
struct MockTaskView: TaskView {
    var displayedTasks: [String] = []
    var messages: [String] = []
    
    mutating func displayTasks(_ tasks: [String]) {
        displayedTasks = tasks
        print("Displayed: \(tasks)")
    }
    
    mutating func showMessage(_ message: String) {
        messages.append(message)
        print("Message: \(message)")
    }
}
  • iOSTaskView 使用 SwiftUI 渲染，绑定 TaskViewModel。
  • MockTaskView 用于测试或非 UI 环境。
第四步：集成与使用
struct MemoryTaskStore: TaskStore {
    private var tasks: [String: Task] = [:]
    
    func saveTask(id: String, title: String, completed: Bool) {
        tasks[id] = Task(id: id, title: title, completed: completed)
    }
    
    func loadTasks() -> [Task] {
        Array(tasks.values)
    }
}

let store = MemoryTaskStore()
let view = MockTaskView()
let viewModel = TaskViewModelImpl(store: store, view: view)
viewModel.addTask(title: "Learn Swift")
// 输出:
// Message: Added: Learn Swift
// Displayed: ["Learn Swift"]
  • TaskViewModelImpl 跨平台工作，注入不同视图适配平台。

测试 UI 逻辑

为 TaskViewModelImpl 添加单元测试：

import XCTest
class TaskViewModelTests: XCTestCase {
    func testAddTask() {
        var mockStore = MemoryTaskStore()
        var mockView = MockTaskView()
        let viewModel = TaskViewModelImpl(store: mockStore, view: mockView)
        
        viewModel.addTask(title: "Test Task")
        XCTAssertEqual(viewModel.tasks, ["Test Task"])
        XCTAssertEqual(mockView.messages, ["Added: Test Task"])
        XCTAssertEqual(mockView.displayedTasks, ["Test Task"])
    }
}
  • 测试验证了添加任务的逻辑和视图交互。

扩展到其他平台

为 macOS 添加 AppKit 实现（简化版）：

import AppKit

class MacTaskView: TaskView {
    private let window: NSWindow
    
    init(viewModel: TaskViewModelImpl) {
        self.window = NSWindow(contentRect: NSRect(x: 0, y: 0, width: 300, height: 200),
                              styleMask: [.titled, .closable], backing: .buffered, defer: false)
        window.makeKeyAndOrderFront(nil)
        viewModel.refresh()
    }
    
    func displayTasks(_ tasks: [String]) {
        print("macOS display: \(tasks)") // 模拟更新 UI
    }
    
    func showMessage(_ message: String) {
        NSAlert().runModal() // 模拟弹窗
    }
}

let macViewModel = TaskViewModelImpl(store: store, view: MacTaskView(viewModel: viewModel))
macViewModel.addTask(title: "Mac Task")
  • MacTaskView 使用 AppKit，逻辑保持一致。

跨平台 UI 的优势

  1. 逻辑复用：
    • TaskViewModelImpl 在 iOS、macOS 等平台共享。
  2. 平台适配：
    • 视图实现适配平台特性（如 SwiftUI、AppKit）。
  3. 测试性：
    • Mock 视图隔离 UI 逻辑，便于测试。
  4. 一致性：
    • 协议确保所有平台 UI 行为一致。

注意事项

  • UI 框架限制：SwiftUI 目前限于 Apple 平台，Android 需其他方案。
  • 条件编译：使用 #if os(iOS) 分隔平台代码。
  • 性能：协议分派可能影响 UI 响应，需优化。

小结

协议在跨平台 UI 层通过抽象逻辑与渲染，实现了业务复用和平台适配。本案例展示了任务列表 UI 的设计过程，结合 SwiftUI 和传统视图展示了其灵活性。下一节将通过实战案例整合跨平台开发，构建完整应用。

Last Updated::