代码之家 › 专栏 › 技术社区 › Duck

不管怎样,波波弗都没出现

popover swiftui

Duck · 技术社区 · 8 月前

我有这个代码:

import SwiftUI

struct ContentView: View {
  @State var show = false
  
  var tools = [Tool("document.on.document"), Tool("document.on.clipboard")]
  
  var body: some View {
    HStack{
      HStack {
        ForEach(tools,  id:\.id) { tool in
          Button(action: {
            print("toggle")
            show.toggle()
          }, label: {
            Image(systemName:tool.name)
              .imageScale(.large)
              .foregroundStyle(.black.gradient)
              .font(.system(size: 30))
          })
          .contentShape(Rectangle())
          .popover(isPresented: $show, arrowEdge: .top) {
            Color.red
              .frame(width:400, height:400)
              .onAppear{
                print("popover show")
              }
          }
        }

        
      }

      .padding()
    }
    .background(
      RoundedRectangle(cornerSize: CGSize(width: 50,height: 50))
        .fill(.red.opacity(0.5).gradient))
    
    .padding()
    
    
  }
}

#Preview {
  ContentView()
}

struct Tool: Identifiable, Equatable {
  let id = UUID()
  let name:String
  
  init(_ name: String) {
    self.name = name
  }
}

波波头没有出现。我什么都做了。

为什么?

1 回复 | 直到 8 月前

Sweeper 8 月前

您正在使用单个 show 国家控制所有的popover!多个弹出窗口不能同时显示,因此会显示注释。

从技术上讲,改变类型是可能的 显示 到 [Bool] 并通过 $show[0] , $show[1] 等等 isPresented ,但找到索引会很不方便 tool 诸如此类的事情。

如果父视图不需要确切地知道显示了哪些弹出窗口,您应该将按钮提取到一个单独的视图中,并将 显示 国家在那里。

struct ToolButton: View {
    // move the @State here
    @State private var show = false
    let tool: Tool

    // pass anything else you need here...
    
    var body: some View {
        Button(action: {
            print("toggle")
            show.toggle()
        }, label: {
            Image(systemName: tool.name)
                .imageScale(.large)
                .foregroundStyle(.black.gradient)
                .font(.system(size: 30))
        })
        .contentShape(Rectangle())
        .popover(isPresented: $show, arrowEdge: .top) {
            Color.red
                .frame(width:400, height:400)
                .presentationCompactAdaptation(.popover) // if you also want a popover on iPhones
                .onAppear{
                    print("popover show")
                }
        }
    }
}

自从 @State 是在 ToolButton ,将有尽可能多的州 工具按钮 ,这意味着一个状态来控制每个popover。

ForEach(tools) { tool in
    ToolButton(tool: tool)
}