具有包含 NavigationLink 的 VStack 的列表使 VStack 的整个区域可点击，而不仅仅是 SubView答案

【问题标题】：Lists that have a VStack containing a NavigationLink makes the whole area of the VStack tappable instead of only the SubView具有包含 NavigationLink 的 VStack 的列表使 VStack 的整个区域可点击，而不仅仅是 SubView
【发布时间】：2020-09-19 21:42:51
【问题描述】：

当我将 VStack 放入 List 并且 VStack 的其中一个 SubView 是 NavigationLink 时，VStack 的整个区域变为可点击以触发转换，而不仅仅是 SubView。

这是我的问题的一个简化示例：

struct Test: View {
    var body: some View {
        NavigationView {
            List {
                VStack {  // Entire VStack is tappable.
                    Rectangle()
                        .frame(width: 100, height: 200)
                        .foregroundColor(.red)

                    NavigationLink(destination: Destination()) {
                        Rectangle()  // I only want this Rectangle to be tappable.
                            .frame(width: 50, height: 100)
                            .foregroundColor(.red)
                    }
                }
            }
        }
    }
}

struct Destination: View {
    var body: some View {
        Text("Hello")
    }
}

我已经尝试在任何地方使用BorderlessButtonStyle()，因为它以前可以工作，但由于某种原因它现在不能解决我的问题。

为什么会发生这样的行为？

【问题讨论】：

标签： ios xcode swiftui swiftui-list swiftui-navigationlink

【解决方案1】：

试试这个。

  struct ContentView: View {
    @State var isSelected: Bool = false
    var body: some View {
        NavigationView {
            VStack {
                Rectangle()
                    .frame(width: 100, height: 200)
                    .foregroundColor(.red)

                Button(action: {
                    self.isSelected.toggle()
                }) {
                    Rectangle()
                        .frame(width: 100, height: 50)
                        .foregroundColor(.red)
                        .cornerRadius(10)
                }
                NavigationLink(destination: SecondView(), isActive: self.$isSelected) {
                    EmptyView()
                }
            }
            .navigationBarTitle("First Page")
        }
    }
}

struct SecondView: View {
    var body: some View {
        VStack {
            Text("Second Page")
        }
    .navigationBarTitle("Second Page")
    }
}

【讨论】：