iOS16中SwiftUI可滚动图表：如何编程定位到指定区域？

问题背景 #

我们可以借助SwiftUI Charts框架创建超出可视范围的图表，将其放入ScrollView实现横向滚动，示例代码如下：

var body : some View {
    GeometryReader { proxy in
        ScrollView(.horizontal, showsIndicators: false) {
            Chart {
                ForEach(data) { entry in
                    // ...
                }
            }
            .frame(width: proxy.size.width * 2)
        }
    }
}

想实现通过编程方式滚动到图表的特定区域，尝试过用ScrollViewReader给X轴标签设置ID并调用scrollTo函数，但未成功，相关代码如下：

Chart {
    /// ...
}
.chartXAxis {
    AxisMarks(values: .stride(by: .day)) { value in
        if let date : Date = value.as(Date.self) {
            Text(date, style: .date)
                .font(.footnote)
        }
    }
}

解决方案 #

要实现编程式滚动，核心是让ScrollViewReader能捕获到可定位的视图元素——轴标签属于图表内部子视图，无法被直接识别，正确做法是给图表中的数据条目设置ID，配合ScrollViewReader完成滚动。

具体实现代码 #

struct ChartData: Identifiable {
    let id: Date
    let value: Double
}

struct ScrollableChartView: View {
    let data: [ChartData]
    // 目标滚动位置对应的日期
    let targetDate: Date
    
    var body: some View {
        GeometryReader { proxy in
            ScrollViewReader { scrollProxy in
                ScrollView(.horizontal, showsIndicators: false) {
                    Chart {
                        ForEach(data) { entry in
                            LineMark(
                                x: .value("日期", entry.id),
                                y: .value("数值", entry.value)
                            )
                            // 给每个数据条目绑定ID
                            .id(entry.id)
                        }
                    }
                    .frame(width: proxy.size.width * 2)
                }
                // 视图加载完成后滚动到目标位置
                .onAppear {
                    scrollProxy.scrollTo(targetDate, anchor: .center)
                }
            }
        }
    }
}

注意事项 #

• 若要滚动到X轴某个刻度，需确保该刻度对应的条目存在于数据源数组中
• anchor参数可控制滚动后的对齐方式，可选.leading、.center、.trailing
• 柱状图、面积图等其他图表类型，只需给对应的Mark添加.id()修饰符即可

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