SwiftUI Chart拖拽选择矩形透明度随数据点数量变化修复

你的问题确实是因为每个数据点都重复绘制了同一个绿色矩形，数据点越多，重叠的矩形层数越多，最终视觉上的透明度就会偏离你设置的0.05。

只需要将RectangleMark从ForEach循环中移出来，让它在Chart中只绘制一次即可：

import Charts
import SwiftUI

struct ContentView: View {
    @State private var dragStart: Int? = nil
    @State private var dragRange: ClosedRange<Int>? = nil
    @State private var numbers = (0 ..< 100) // 可测试更多数据点
        .map { _ in Double.random(in: 0 ... 10) }

    var body: some View {
        Chart {
            // 把矩形标记移到ForEach外面，仅绘制一次
            if let dragRange {
                RectangleMark(
                    xStart: .value("x", dragRange.lowerBound),
                    xEnd: .value("x", dragRange.upperBound),
                    yStart: .value("y", 1),
                    yEnd: .value("y", 9)
                )
                .foregroundStyle(.green.opacity(0.05))
            }
            
            ForEach(Array(zip(numbers, numbers.indices)), id: \.0) { number, index in
                LineMark(
                    x: .value("Index", index),
                    y: .value("Value", number)
                )
            }
        }
        .chartXSelection(range: $dragRange)
        .chartOverlay { chart in
            GeometryReader { geometry in
                Rectangle()
                    .fill(Color.clear)
                    .contentShape(Rectangle())
                    .gesture(
                        DragGesture()
                            .onChanged { value in
                                guard let plotFrame = chart.plotFrame else {
                                    return
                                }

                                let currentX = value.location.x - geometry[plotFrame].origin.x
                                guard currentX >= 0, currentX < chart.plotSize.width else {
                                    return
                                }

                                guard let index = chart.value(atX: currentX, as: Int.self) else {
                                    return
                                }

                                if dragStart == nil {
                                    dragRange = nil
                                    dragStart = index
                                }

                                guard let startIndex = dragStart else {
                                    return
                                }

                                if startIndex <= index {
                                    dragRange = startIndex ... index
                                } else {
                                    dragRange = index ... startIndex
                                }
                            }
                            .onEnded { _ in
                                dragStart = nil
                            }
                    )
            }
        }
    }
}

关键修改说明 #

• 将RectangleMark从ForEach循环内部移到Chart的根层级，这样当dragRange存在时，只会绘制一个覆盖选中范围的矩形，不会随数据点数量重复绘制。
• 原有拖拽逻辑完全保留，确保矩形的位置和范围计算准确。

这样无论数据点数量多少，绿色矩形的透明度都会稳定保持在你设置的0.05，不会出现重叠导致的视觉变化。

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