主页 / user-213806

Martin's questions

Martin Hope
Martin
Asked: 2025-04-23 09:26:36 +0800 CST
  • 5

我有一个简单的 Swift Chart，我试图将 RuleMark 放在 BarMark 后面。

当 RuleMark 位于 BarMark 之前时，条形会出现问题，并会随着选定内容的移动而移动。以下是可重现的示例。

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(){
            
            if let selection {
                RuleMark(x: .value("label", selection.label))
                    .foregroundStyle(.red)
            }
            
            ForEach(dat) {dat in
                BarMark(x: .value("label", dat.label), y: .value("count", dat.value))
            }
        }
        .chartXSelection(value: $rawSelection)
    }
}

#Preview {
    ContentView()
}

当 RuleMark 移动到 BarMark 之后，并应用负的 ZIndex 时，规则会按预期显示在栏的后面。但是，当我为选定内容添加动画时，规则会短暂地显示在栏的上方，然后动画移动到栏的后面。

如何才能始终显示 BarMark 后面的 RuleMark 并应用动画？

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))
            }
            
            if let selection {
                RuleMark(x: .value("label", selection.label))
                    .foregroundStyle(.red)
                    .zIndex(-1)
            }
        }
        .chartXSelection(value: $rawSelection.animation())
    }
}

#Preview {
    ContentView()
}
swiftui