SwiftUI NavigationItem 动态数据发送不正确的参数

Question

我有一个我认为很简单的任务，但它看起来不是这样。作为我的代码的一部分，我只是显示了一些圆圈，当用户单击一个圆圈时，它将根据按下的圆圈导航到一个新视图。

如果我在 NavigationLink 中对视图进行硬编码，它可以正常工作，但我想使用动态数组。在下面的代码中，无论按下哪个圆圈，它都会始终显示数组中最后一项的id；即它将最后定义的 dot.destinationId 传递给 Game 视图

struct Dot: Identifiable {
    let id = UUID()
    let x: CGFloat
    let y: CGFloat
    let color: Color
    let radius: CGFloat
    let destinationId: Int
}

struct ContentView: View {

var dots = [
    Dot(x:10.0,y:10.0, color: Color.green, radius: 12, destinationId: 1),
    Dot(x:110.0,y:10.0, color: Color.green, radius: 12, destinationId: 2),
    Dot(x:110.0,y:110.0, color: Color.blue, radius: 12, destinationId: 3),
    Dot(x:210.0,y:110.0, color: Color.blue, radius: 12, destinationId: 4),
    Dot(x:310.0,y:110.0, color: Color.red, radius: 14, destinationId: 5),
    Dot(x:210.0,y:210.0, color: Color.blue, radius: 12, destinationId: 6)]

var lineWidth: CGFloat = 1

var body: some View {
    NavigationView {
        ZStack 
            Group {
                ForEach(dots){ dot in
                    NavigationLink(destination: Game(id: dot.destinationId))
                    {
                        Circle()
                            .fill(dot.color)
                            .frame(width: dot.radius, height: dot.radius)
                            .position(x:dot.x, y: dot.y )
                    }
                }
            }
            .frame(width: .infinity, height: .infinity, alignment:  .center  )
            
        }

        .navigationBarTitle("")
        .navigationBarTitleDisplayMode(.inline)
    }
}


struct Game: View {
    var id: Int
    var body: some View {
    
        Text("\(id)")
    }
}

我尝试发送实际视图，因为我想显示不同的视图并使用了 AnyView，但发生了同样的情况它总是导致导航到最后定义的视图。

我真的不知道我做错了什么，任何指针将不胜感激

Answer 1

虽然您似乎在单击不同的点，但实际上您有一个具有重叠视图的 ZStack，并且您总是在单击最顶部的视图。当您点击时，您可以看到 ID 为 6 的点始终是实际被按下的点（请注意点击时它的不透明度会发生变化）。

要解决此问题，请将frame 和position 修饰符移出 NavigationLink，以便它们影响链接和其中包含的圆圈，而不仅仅是内部视图。

另外，我修改了您的最后一个 frame，因为有关于无效帧大小的警告（请注意在指定 .infinite 时 width/maxWidth 和 height/maxHeight 之间的区别）。

struct ContentView: View {
    
    var dots = [
        Dot(x:10.0,y:10.0, color: Color.green, radius: 12, destinationId: 1),
        Dot(x:110.0,y:10.0, color: Color.green, radius: 12, destinationId: 2),
        Dot(x:110.0,y:110.0, color: Color.blue, radius: 12, destinationId: 3),
        Dot(x:210.0,y:110.0, color: Color.blue, radius: 12, destinationId: 4),
        Dot(x:310.0,y:110.0, color: Color.red, radius: 14, destinationId: 5),
        Dot(x:210.0,y:210.0, color: Color.blue, radius: 12, destinationId: 6)]
    
    var lineWidth: CGFloat = 1
    
    var body: some View {
        NavigationView {
            ZStack {
                Group {
                    ForEach(dots){ dot in
                        NavigationLink(destination: Game(id: dot.destinationId))
                        {
                            Circle()
                                .fill(dot.color)
                        }
                        .frame(width: dot.radius, height: dot.radius) //<-- Here
                        .position(x:dot.x, y: dot.y ) //<-- Here
                    }
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment:  .center  )
            }
            .navigationBarTitle("")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}