列表中的 SwiftUI 多个弹出框

Posted 2023-02-24

【中文标题】列表中的 SwiftUI 多个弹出框

【英文标题】：SwiftUI multiple popovers in a List

【发布时间】：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 ......即使有很多想法要实现。

【参考方案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 项？