列表中的 SwiftUI 多个弹出框答案

【问题标题】：SwiftUI multiple popovers in a List列表中的 SwiftUI 多个弹出框
【发布时间】：2020-03-15 16:38:21
【问题描述】：

我在视图 Line() 中定义了 2 个弹出框和一张表。
在 VStack 中使用此视图，一切正常。
在列表中使用它，当点击相应的文本或按钮时会显示错误的弹出框/表格。
这里出了什么问题？

struct ContentView: View {
  var body: some View {
    VStack {
      Line()
      List {
        Line()
        Line()
        Line()
      }
    }
  }
}

struct Line: View {
  @State private var showPopup1 = false
  @State private var showPopup2 = false
  @State private var showSheet2 = false

  var body: some View {
    VStack {
      Text("popover 1")
      .onTapGesture { self.showPopup1 = true}
      .popover(isPresented: $showPopup1, arrowEdge: .trailing )
      { Popover1(showSheet: self.$showPopup1) }
      .background(Color.red)

      Text("popover 2")
      .onTapGesture { self.showPopup2 = true }
      .popover(isPresented: $showPopup2, arrowEdge: .trailing )
      { Popover2(showSheet: self.$showPopup2) }
      .background(Color.yellow)

      Button("Sheet2"){self.showSheet2 = true}
      .sheet(isPresented: self.$showSheet2, content: { Sheet2()})
    }
  }
}

struct Popover1: View {
  @Binding var showSheet: Bool

  var body: some View {
    VStack {
      Text("Poppver 1 \(self.showSheet ? "T" : "F")")
      Button("Cancel"){ self.showSheet = false }
    }
  }
}

struct Popover2: View {
  @Binding var showSheet: Bool

  var body: some View {
    VStack {
      Text("Poppver 2")
      Button("Cancel"){ self.showSheet = false }
    }
  }
}

struct Sheet2: View {
  @Environment(\.presentationMode) var presentation

  var body: some View {
    VStack {
      Text("Sheet 2")
      Button("Cancel"){ self.presentation.wrappedValue.dismiss() }
    }
  }
}

【问题讨论】：

我可以看看 Popover1 和 Popover2 的代码吗？
@user3441734 Popover1 和 Popover2 代码在帖子中#
是的，我现在看到了...
1) 删除除一行之外的所有 Line() 2) 从模拟器调试菜单中选择“显示动画”。 3) 试试看:-)。原因很快就会清楚。是的，我知道，您不会很高兴，但唯一的解决方案是不要在 List 行中使用任何“额外”手势，直到开发人员无法使用 ListStyle。对不起...
是的，至少这不是简单的解决方案。并且看到，在向下滑动时，您可以看到其他模态出现一段时间。不幸的是，几乎没有机会调试它，因为您无权访问 List 内部。我确实使用 ScrollView ......即使有很多想法要实现。

标签： swiftui popover

【解决方案1】：

只是不要将Button 用于.sheet。 List 检测行中的按钮并激活整行（不确定是否存在错误，按设计进行）。因此，在子元素手势中使用 only 和 for 可以让您的代码正常工作。

使用 Xcode 11.2 / iOS 13.2 测试

  var body: some View {
    VStack {
      Text("popover 1")
        .onTapGesture { self.showPopup1 = true}
      .popover(isPresented: $showPopup1, arrowEdge: .trailing )
      { Popover1(showSheet: self.$showPopup1) }
      .background(Color.red)

      Text("popover 2")
      .onTapGesture { self.showPopup2 = true }
      .popover(isPresented: $showPopup2, arrowEdge: .trailing )
      { Popover2(showSheet: self.$showPopup2) }
      .background(Color.yellow)

      Text("Sheet2")                             // << here !!!
      .onTapGesture {self.showSheet2 = true}     // << here !!!
      .sheet(isPresented: self.$showSheet2, content: { Sheet2()})
    }
  }

【讨论】：

Thnx，但不起作用。在某些情况下，仍然会出现错误的弹出框。如果它可以工作，这不会导致性能问题，如果你有一个列表，例如5000 项？