Question

使用XCode12（测试版4），我试图分离标题区域和ScrollView。我已经尝试了VStack和GeometryReader。但是，当我单击标题区域时，将触发其下面的ScrollView项中的导航链接。

如果我使用列表，则不会观察到这种不良行为。如果我在XCode 11.6中使用ScrollView并为iOS13构建，则也不会观察到这种不良行为。

VStacks中的ScrollViews或iOS14中的GeometryReaders是否有变化？为什么滚动视图会在VStack或GeometryReader中的对象下“滑动”？

struct ContentView: View {
  var body: some View {
   NavigationView{
    //GeometryReader { geo in
     VStack{
      VStack{
       Text("Blah")
      }//.frame(height: geo.size.height*0.20)
      
      VStack {
       ScrollView {
        ForEach(0..<10) { i in
         NavigationLink(destination: Text("\(i)")) {
          cardRow(i: i)
           .frame(maxWidth: .infinity)
           .foregroundColor(Color(UIColor.label))
           .padding()
           .background(RoundedRectangle(cornerRadius: 12))
           .foregroundColor(Color(UIColor.secondarySystemFill))
           .padding()
         }
        }
       }
      }//.frame(height: geo.size.height*0.90)
      
    }
   }.navigationViewStyle(StackNavigationViewStyle())
  }
    
  struct cardRow: View {
   var i: Int
    
   var body: some View {
    HStack {
     VStack {
      Text("88")
     }.hidden()
     .overlay(
      VStack{
       Text("\(i)")
      }
     )
     Divider()
      .background(Color(UIColor.label))
     Spacer()
    }
   }
  }
}

Answer 1

这是可行的解决方案（已通过Xcode 12 / iOS 14测试）

  VStack {
   ScrollView {
    ForEach(0..<10) { i in
     NavigationLink(destination: Text("\(i)")) {
      cardRow(i: i)
       .frame(maxWidth: .infinity)
       .foregroundColor(Color(UIColor.label))
       .padding()
       .background(RoundedRectangle(cornerRadius: 12))
       .foregroundColor(Color(UIColor.secondarySystemFill))
       .padding()
     }
    }
   }.clipped().contentShape(Rectangle())    // << here !!
  }

ScrollView导航链接在VStack和GeometryReader，XCode12，beta 4中仍然有效

1 个答案: