SwiftUI Charts多图表同步滚动时性能低下问题排查

问题背景 #

• 开发环境：macOS 14.0（测试版）、Xcode 15 Beta 6，基于SwiftUI Charts构建Mac应用
• 核心需求：实现多条轨迹图表的X轴同步滚动（类似Apple Instruments的联动效果）
• 当前问题：使用同一个Binding变量绑定两个Chart的chartScrollPosition(x:)后，滚动时出现严重卡顿、抖动，控制台输出onChange(of: Optional<CGRect>) action tried to update multiple times per frame.；移除绑定后单图表滚动流畅。

问题根源 #

直接将两个Chart的滚动位置绑定到同一个Binding变量，会触发双向循环更新：

1. 滚动第一个Chart时，更新绑定变量，触发第二个Chart重新计算滚动位置
2. 第二个Chart的滚动位置更新又会反向触发绑定变量再次更新，进而导致第一个Chart再次刷新
   每帧内多次重复这个过程，导致UI线程过载，出现卡顿。

解决方案：避免循环触发+过滤频繁更新 #

方案1：使用ObservableObject管理状态并添加阈值过滤

通过集中管理滚动状态，并忽略微小的位置变化，减少不必要的UI更新。

1. 创建滚动状态管理类：

import SwiftUI
import Charts

class ScrollState: ObservableObject {
    @Published var xPosition: Double = 0.0
    private var lastPosition: Double = 0.0
    // 设置阈值过滤微小变化，可根据需求调整
    private let updateThreshold: Double = 0.1

    func updatePosition(_ newValue: Double) {
        // 仅当位置变化超过阈值时才更新，避免频繁触发UI刷新
        if abs(newValue - lastPosition) > updateThreshold {
            lastPosition = newValue
            xPosition = newValue
        }
    }
}

2. 修改ContentView：

import SwiftUI

struct ContentView: View {
    // 使用StateObject管理滚动状态
    @StateObject private var scrollState = ScrollState()
    
    var body: some View {
        VStack {
            DataTraceView(scrollState: scrollState)
        }
        .padding()
    }
}

3. 修改DataTraceView：

import SwiftUI
import Charts

private let SAMPLES = 10000

func generateRandomDataPoints(count: Int) -> [DataPoint] {
    return (0..<count).map { idx in
        DataPoint(id: idx, xValue: Double(idx), yValue: Double.random(in: 0..<1))
    }
}

struct DataPoint: Identifiable {
    var id: Int
    var xValue: Double
    var yValue: Double
}

struct DataTraceView: View {
    @State var testVector1: [DataPoint] = generateRandomDataPoints(count: SAMPLES)
    @State var testVector2: [DataPoint] = generateRandomDataPoints(count: SAMPLES)
    
    @ObservedObject var scrollState: ScrollState
    
    var body: some View {
        VStack {
            Chart(testVector1) {
                LineMark(
                    x: .value("Time", $0.xValue),
                    y: .value("Speed", $0.yValue)
                )
            }
            .chartScrollPosition(x: $scrollState.xPosition)
            .chartXVisibleDomain(length: 15)
            .chartScrollableAxes(.horizontal)
            
            Chart(testVector2) {
                LineMark(
                    x: .value("Time", $0.xValue),
                    y: .value("LatG", $0.yValue)
                )
            }
            // 使用自定义Binding，在设置时调用过滤方法
            .chartScrollPosition(x: Binding(
                get: { scrollState.xPosition },
                set: { scrollState.updatePosition($0) }
            ))
            .chartXVisibleDomain(length: 15)
            .chartScrollableAxes(.horizontal)
        }
    }
}

方案2：使用标志位防止循环触发

通过isSyncing标志位避免双向触发，同时用异步更新确保在当前帧结束后执行状态同步。

修改DataTraceView：

struct DataTraceView: View {
    @State var testVector1: [DataPoint] = generateRandomDataPoints(count: SAMPLES)
    @State var testVector2: [DataPoint] = generateRandomDataPoints(count: SAMPLES)
    @State private var sharedXPosition: Double = 0.0
    // 标记是否正在同步，防止循环触发
    @State private var isSyncing = false
    
    var body: some View {
        VStack {
            Chart(testVector1) {
                LineMark(
                    x: .value("Time", $0.xValue),
                    y: .value("Speed", $0.yValue)
                )
            }
            .chartScrollPosition(x: $sharedXPosition)
            .onChange(of: sharedXPosition) { newValue in
                guard !isSyncing else { return }
                isSyncing = true
                // 异步更新避免当前帧内重复触发
                DispatchQueue.main.async {
                    isSyncing = false
                }
            }
            .chartXVisibleDomain(length: 15)
            .chartScrollableAxes(.horizontal)
            
            Chart(testVector2) {
                LineMark(
                    x: .value("Time", $0.xValue),
                    y: .value("LatG", $0.yValue)
                )
            }
            .chartScrollPosition(x: Binding(
                get: { sharedXPosition },
                set: { newValue in
                    guard !isSyncing else { return }
                    isSyncing = true
                    DispatchQueue.main.async {
                        sharedXPosition = newValue
                        isSyncing = false
                    }
                }
            ))
            .chartXVisibleDomain(length: 15)
            .chartScrollableAxes(.horizontal)
        }
    }
}

效果验证 #

两种方案都能有效避免循环更新，解决滚动卡顿问题，同时保持多图表的X轴同步滚动效果。根据实际场景选择：

• 方案1适合需要过滤微小滚动变化的场景，减少UI更新次数
• 方案2逻辑更直接，适合简单的同步需求

内容的提问来源于stack exchange，提问作者ludwig980