Swift Charts中启用动画时如何将RuleMark置于BarMark后方

问题分析 #

核心问题是为选中项添加动画后，设置zIndex(-1)的RuleMark会短暂显示在BarMark上方，这是动画过程中Mark的层级渲染优先级临时错乱导致的。

最优解决方案：用chartBackground承载RuleMark #

直接将RuleMark放在Chart的背景层中，背景层默认处于所有Mark后方，无论是否启用动画，都能稳定保持层级关系，彻底避免原方案的层级异常问题。

修改后的完整代码：

import SwiftUI
import Charts

struct datStruct: Identifiable {
    let id = UUID()
    let label: String
    let value: Int
}

struct ContentView: View {
    
    let dat = [
        datStruct(label: "A", value: 1),
        datStruct(label: "B", value: 2),
        datStruct(label: "C", value: 3)
    ]
    @State var rawSelection: String?
    
    var selection: datStruct? {
        guard let rawSelection else {return nil}
        return dat.first(where: { $0.label == rawSelection })
    }
    
    var body: some View {
        Chart {
            ForEach(dat) { dat in
                BarMark(x: .value("label", dat.label), y: .value("count", dat.value))
            }
        }
        .chartXSelection(value: $rawSelection.animation())
        .chartBackground { proxy in
            if let selection {
                guard let xPosition = proxy.position(forX: .value("label", selection.label)) else { return }
                RuleMark(x: .value("label", selection.label))
                    .foregroundStyle(.red)
                    .position(startY: 0, endY: proxy.plotAreaFrame.maxY)
            }
        }
    }
}

#Preview {
    ContentView()
}

方案说明 #

• chartBackground是Chart的背景容器，内部内容始终渲染在所有Mark后方，从根源上解决层级冲突。
• 通过proxy.position(forX:)获取选中项的X轴位置，配合position(startY:endY:)确保RuleMark覆盖整个图表高度，和原方案视觉效果一致。
• 动画过程中RuleMark始终处于背景层，不会出现层级翻转的异常。

替代方案：给BarMark设置固定zIndex #

如果不想使用背景层，也可以给所有BarMark设置正zIndex，确保它们始终在RuleMark上方：

BarMark(x: .value("label", dat.label), y: .value("count", dat.value))
    .zIndex(1)

同时保留RuleMark的zIndex(-1)，但这种方案稳定性略逊于背景层方案，极端动画场景仍可能出现异常。

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