iOS 17 Swift Chart 如何实现X轴程序化滚动及启停调速？

首先明确核心点：chartScrollPosition(x: $chartPosition)的绑定是双向的——它不仅能读取当前滚动位置，也可以直接赋值来驱动图表滚动。结合定时器就能实现按钮触发的自动滚动，同时支持自定义速度控制。

实现步骤 #

1. 新增状态变量 #

添加控制滚动状态、速度的变量：

• isScrolling：标记是否处于自动滚动状态
• scrollSpeed：自定义滚动速度（单位：每秒滚动的X轴数值）
• scrollTimer：存储定时器实例，用于启停控制

2. 编写滚动控制逻辑 #

通过按钮切换滚动状态：

• 启动滚动：创建高精度定时器，每隔固定时间更新chartPosition的值，增量由滚动速度和定时器间隔计算得出
• 停止滚动：取消定时器，终止滚动更新

3. 完善视图布局 #

添加控制按钮、速度调节滑块，确保chartScrollPosition的双向绑定正常生效

完整代码示例 #

import SwiftUI
import Charts
import Combine

struct ChartData: Identifiable {
    let id = UUID()
    var title: String
    var startTime: Double
    var endTime: Double
    
    init(startTime: Double, duration: Double, title: String) {
        self.title = title
        self.startTime = startTime
        self.endTime = startTime + duration
    }
}

var data2: [ChartData] = [
    ChartData(startTime: 2.0, duration: 5.0, title: "First"),
    ChartData(startTime: 750.0, duration: 30.6, title: "Second")
]

struct ContentView: View {
    @State var chartPosition = Double(0.0)
    @State var chartScale = Double(10.0)
    @State var markPosition = Double(0.0)
    @State var duration = Double(750.0 + 30.6)
    
    // 滚动控制相关变量
    @State private var isScrolling = false
    @State private var scrollSpeed = 10.0 // 每秒滚动10个X轴单位
    @State private var scrollTimer: AnyCancellable?
    
    var body: some View {
        VStack(spacing: 16) {
            HStack{
                Text("当前位置: \(String(format: "%.2f", chartPosition))")
            }
            
            // 滚动启停按钮
            Button(action: toggleScroll) {
                Text(isScrolling ? "停止滚动" : "开始滚动")
                    .padding()
                    .background(isScrolling ? Color.red : Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
            
            // 速度调节滑块
            HStack{
                Text("滚动速度: \(String(format: "%.1f", scrollSpeed))")
                Slider(value: $scrollSpeed, in: 1...50)
            }
            
            HStack{
                Text("缩放比例: \(String(format: "%.1f", chartScale))")
                Slider(value: $chartScale, in: 1...360)
            }
            
            HStack{
                Text("标记位置: \(String(format: "%.2f", markPosition))")
                Slider(value: $markPosition, in: 0...duration)
            }
            
            Chart{
                ForEach(data2) { item in
                    RectangleMark(
                        xStart: .value("开始时间", item.startTime),
                        xEnd: .value("结束时间", item.endTime),
                        y: .value("标题", item.title)
                    )
                }
            }
            .chartXVisibleDomain(length: chartScale)
            .chartScrollableAxes(.horizontal)
            .chartYAxis(.hidden)
            .chartScrollPosition(x: $chartPosition)
            .frame(height: 200)
        }
        .padding()
    }
    
    // 切换滚动状态的核心方法
    private func toggleScroll() {
        isScrolling.toggle()
        if isScrolling {
            // 启动定时器，每0.01秒更新一次位置
            scrollTimer = Timer.publish(every: 0.01, on: .main, in: .common)
                .autoconnect()
                .sink { _ in
                    // 计算单次滚动增量：速度 × 时间间隔
                    let increment = scrollSpeed * 0.01
                    // 限制滚动范围，避免超出数据边界
                    let maxPosition = duration - chartScale
                    chartPosition = min(chartPosition + increment, maxPosition)
                    
                    // 到达边界后自动停止
                    if chartPosition >= maxPosition {
                        isScrolling = false
                        scrollTimer?.cancel()
                    }
                }
        } else {
            // 停止定时器
            scrollTimer?.cancel()
        }
    }
}

#Preview {
    ContentView()
}

关键细节说明 #

1. 双向绑定的chartScrollPosition：直接修改chartPosition的值就能驱动图表滚动，这是实现程序化滚动的核心
2. 平滑滚动控制：用0.01秒间隔的定时器实现高精度更新，滚动增量由速度参数和定时器间隔共同计算，保证滚动流畅度
3. 边界防护：添加最大滚动位置判断，避免滚动到数据以外的空白区域，可根据需求调整边界逻辑
4. 内存安全：启停定时器时及时取消订阅，避免内存泄漏

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