如何在 SwiftUI 中使数组变得可识别？

Question

我是 Swift/SwitUI 的新手，正在尝试学习如何在图表内容上使用叠加层。我在苹果开发人员上找到了一些代码，但它没有显示数组“数据”是如何编码的。 I 代码如下，但编译失败，返回错误“Type '(date: Date,price: Double)' 无法符合 'Identificable'”。

我找到了一些其他数据类型的示例，但我无法使它们发挥作用。一个有点类似的问题的答案建议对字典进行排序，Xcode 建议我使用这个：

Chart(data.sorted(by: <#T##((date: Date, price: Double), (date: Date, price: Double)) throws -> Bool#>))

但我遇到了同样的错误。

    import SwiftUI
    import Charts
    
    struct ContentView: View {
    
      @State private var data: [(date: Date, price: Double)] = [
        (Date(), 100.0),
        (Date().addingTimeInterval(86400), 120.0),
        (Date().addingTimeInterval(2 * 86400), 90.0),
        (Date().addingTimeInterval(3 * 86400), 85.0),
        (Date().addingTimeInterval(4 * 86400), 100.0) ]
        
        var body: some View {
        VStack {
           // starting here: from Apple' Developer ...
           // ERROR HERE: "Type '(date: Date, price: Double)' cannot conform to 'Identifiable'"
           Chart(data) {
             LineMark(
        x: .value("date", $0.date),
        y: .value("price", $0.price)
         )
    }
    .chartOverlay { proxy in
        GeometryReader { geometry in
        Rectangle().fill(.clear).contentShape(Rectangle())
            .gesture(
            DragGesture()
                .onChanged { value in
                let origin = geometry[proxy.plotAreaFrame].origin
                let location = CGPoint(
                    x: value.location.x - origin.x,
                    y: value.location.y - origin.y
                )
                let (date, price) = proxy.value(at: location, as: (Date, Double).self)!
                print("Location: \(date), \(price)")
                }
            )
            }
           }
            }.padding()
        }
    }

Answer 1

尝试使用

struct DataItem: Identifiable

来保存数据的方法 即可显示，如示例代码所示。

注意，您使数组的元素可识别，而不是数组本身。

struct DataItem: Identifiable {  // <-- here
    let id = UUID()
    var date: Date
    var price: Double
}

struct ContentView: View {
    // -- here
    let data = [DataItem(date: Date(), price: 100.0),
                DataItem(date: Date().addingTimeInterval(86400), price: 120.0),
                DataItem(date: Date().addingTimeInterval(2 * 86400), price: 90.0),
                DataItem(date: Date().addingTimeInterval(3 * 86400), price: 85.0),
                DataItem(date: Date().addingTimeInterval(4 * 86400), price: 100.0)]
    
    var body: some View {
        VStack {
            Chart(data) {
                LineMark(
                    x: .value("date", $0.date),
                    y: .value("price", $0.price)
                )
            }
            .chartOverlay { proxy in
                GeometryReader { geometry in
                    Rectangle().fill(.clear).contentShape(Rectangle())
                        .gesture(
                            DragGesture()
                                .onChanged { value in
                                    let origin = geometry[proxy.plotAreaFrame].origin
                                    let location = CGPoint(
                                        x: value.location.x - origin.x,
                                        y: value.location.y - origin.y
                                    )
                                    let (date, price) = proxy.value(at: location, as: (Date, Double).self)!
                                    print("Location: \(date), \(price)")
                                }
                        )
                }
            }
        }.padding()
    }
}