第三部分：高级图表开发

第 11 章：跨平台图表开发

共享代码与平台特定调整

在跨平台开发中，SwiftUI 提供了强大的代码共享能力，但不同平台（iOS、macOS、watchOS、tvOS）的交互模式和显示特性可能要求我们进行针对性调整。本节将探讨如何高效共享图表代码，同时处理平台差异。

1. 代码共享策略

• 通用视图结构：
  使用 @ViewBuilder 构建基础图表组件，确保核心逻辑（如数据解析、坐标轴计算）在跨平台间复用。

  struct BaseChartView<Content: View>: View {
      @ViewBuilder let content: Content
      // 共享的布局和样式逻辑
  }
  

• 平台条件编译：
  通过 #if os() 指令区分平台特定代码：

  #if os(iOS)
      // iOS 专属手势处理
  #elseif os(macOS)
      // macOS 鼠标事件支持
  #endif
  

2. 平台适配要点

3. 响应式设计技巧

• 动态布局：
  使用 @Environment(\.horizontalSizeClass) 区分 iPad 和 iPhone 布局：

  if horizontalSizeClass == .compact {
      // 手机竖屏布局
  } else {
      // iPad 或横屏布局
  }
  

• 资源适配：
  通过 Asset Catalog 为不同平台提供分辨率优化的图片资源，或使用 Symbols 保持一致性。

4. 案例：跨平台折线图实现

struct CrossPlatformLineChart: View {
    @Environment(\.platform) var platform
    
    var body: some View {
        Chart(data) { point in
            LineMark(x: .value("Day", point.date), 
                     y: .value("Sales", point.value))
            #if os(macOS)
                .symbol(Circle().onHover { showTooltip(for: point) })
            #endif
        }
        .chartXAxis {
            #if !os(watchOS)
            AxisMarks(values: .automatic) // watchOS 隐藏次要刻度
            #endif
        }
    }
}

5. 调试建议

• 使用 Xcode Preview 同时配置多平台预览：

  struct Preview: PreviewProvider {
      static var previews: some View {
          Group {
              CrossPlatformLineChart()
                  .previewDevice("iPhone 15")
              
              CrossPlatformLineChart()
                  .previewDevice("Apple Watch Series 8")
          }
      }
  }
  

通过合理设计架构，可实现 70%-90% 的代码复用率，同时保持各平台的最佳用户体验。