ScrollView滚动导致股票图表脉动点位置偏移或消失问题

1. 缺少明确的视图高度约束 #

LineChartView 使用 GeometryReader 获取布局尺寸，但未为其设置固定高度。在 ScrollView 中，无明确高度的视图会随系统布局策略动态调整尺寸，当视图被滚动出屏幕再回滚时，系统可能为复用的 LineChartView 分配不同高度，导致基于 geometry.size.height 计算的脉动点Y坐标出现偏移，甚至位置异常。

2. SwiftUI视图复用导致布局计算不同步 #

ForEach(0..<25) 生成的 LineChartView 会被SwiftUI自动复用（离屏视图被回收，新入屏视图复用旧实例）。复用过程中，LineChartView 的 body 可能未触发完整的布局重新计算：

• GeometryReader 的 geometry 尺寸可能未及时更新到最新布局状态
• 虽然 dataPoints 是常量，但布局尺寸的延迟更新会直接导致脉动点坐标计算错误

3. 潜在的除零边界问题 #

当 dataPoints 所有值相等时，maxY - minY 会等于0，导致Y坐标计算时出现除零错误，直接引发脉动点位置异常甚至视图崩溃（当前用随机数据暂未触发，但属于隐藏风险）。

• 给LineChartView添加固定高度：
  在 GeometryReader 外层添加明确的高度约束，保证 geometry.size.height 稳定：

  GeometryReader { geometry in
      // 原有路径与脉动点代码
  }
  .frame(height: 200) // 设置固定高度，可根据需求调整
  

• 优化ForEach的复用逻辑：
  为 ForEach 添加唯一标识，避免视图复用时的状态混乱：

  ForEach(0..<25, id: \.self){ _ in
      LineChartView(dataPoints: (0..<100).map { _ in Double.random(in: 0.0...1.0) }, profit: true)
  }
  

• 处理除零边界情况：
  在计算Y坐标时加入判断，避免除零错误：

  if let last = dataPoints.last {
      let rangeY = maxY - minY
      // 所有值相等时默认居中显示
      let normalizedY = rangeY == 0 ? 0.5 : (last - minY) / rangeY
      let x = geometry.size.width
      let y = geometry.size.height - (CGFloat(normalizedY) * geometry.size.height)
      PulsingView(size: 50, green: profit).position(x: x, y: y)
  }
  

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