SwiftUI NavigationItem 动态数据发送错误参数

Question

我有一个我认为很简单的任务，但它似乎并非如此。作为我的代码的一部分，我只是显示一些圆圈，当用户点击一个圆圈时，它将导航到一个新视图，具体取决于按下的是哪个圆圈。

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

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 的 之外，以便它们影响 link 和其中包含的圆圈，而不仅仅是内部视图。

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

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)
        }
    }
}

SwiftUI NavigationItem 动态数据发送错误参数

SwiftUI NavigationItem dynamic data sending incorrect parameter

swiftui

swiftui-navigationlink

swiftui-navigationview