Question

考虑这个非常简单的视图：只需几个指向其他页面的链接。如果您在iPhone上运行此程序，一切将按预期工作。但是，在横向模式下的iPad上运行此命令，您会发现大多数情况下链接根本不起作用。在模拟和真实设备中损坏，这令人惊讶。

将VStack更改为List时，一切突然变得正常。

struct ContentView: View {
  var body: some View {
    NavigationView {
      VStack {
        NavigationLink(destination: Text("Link 1")) {
          Text("Link 1")
            .padding(.vertical)
        }

        NavigationLink(destination: Text("Link 2")) {
          Text("Link 2")
            .padding(.vertical)
        }

        NavigationLink(destination: Text("Link 3")) {
          Text("Link 3")
            .padding(.vertical)
        }

        NavigationLink(destination: Text("Link 4")) {
          Text("Link 4")
            .padding(.vertical)
        }
        NavigationLink(destination: Text("Link 5")) {
          Text("Link 5")
            .padding(.vertical)
        }
      }

      Text("Hello iPad")
    }
  }
}

还有其他人遇到这个问题吗？为什么会发生，解决方法是什么？除了明显的“使用列表”：p外，我还使用VStack和HStack的网格来显示多列的链接，这些链接可根据设备大小进行配置。因此，如果不是100％必需的话，更改为List将不是可取的。

Answer 1

我建议您先阅读文档，然后再尝试找到“解决方法”

 // Creates an instance that presents `destination` when `selection` is set
 // to `tag`.
    public init<V>(destination: Destination, tag: V, selection: Binding<V?>, @ViewBuilder label: () -> Label) where V : Hashable

用法示例

struct ContentView: View {
    @State var selection: Int? = 0
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: Text("Link 0"), tag: 0, selection: $selection) {
                    Text("link 0")
                }
                NavigationLink(destination: Text("Link 1"), tag: 1, selection: $selection) {
                    Text("link 1")
                }
                NavigationLink(destination: Text("Link 2"), tag: 2, selection: $selection) {
                    Text("link 2")
                }

            }

            Text("Hello iPad user, swipe from left to continue ...")
        }
    }
}

Answer 2

找到了解决方法：

struct ContentView: View {
  @State var showLink1 = false
  // .. and the other 4

  var body: some View {
    NavigationView {
      ZStack {
        List {
          NavigationLink(destination: Text("Link 1"), isActive: $showLink1) {
            EmptyView()
          }
          // .. and the other 4
        }
        .opacity(0)

        VStack {
          Button(action: { self.showLink1 = true  }) {
            Text("Link 1")
              .padding(.vertical)
          }
          // .. and the other 4
        }
      }

      Text("Hello iPad")
    }
  }
}

哦，SwiftUI ...

iPad上VStack内的NavigationLink损坏

2 个答案: