SwiftUI中Popover始终无法显示的问题排查

问题描述 #

我编写了如下SwiftUI代码：

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
  }
}

点击按钮后Popover始终无法显示，请问这是什么原因？

问题原因 #

• 多个Popover绑定同一个状态变量：你在ForEach循环里给每个按钮的Popover都绑定了同一个show状态。当点击按钮切换show值时，所有Popover都会尝试响应这个状态变化，SwiftUI的布局系统会出现冲突，导致Popover无法正常渲染。
• 锚点计算冲突：嵌套的HStack布局加上共享状态的干扰，进一步导致Popover的锚点位置计算异常，无法正确定位到触发按钮。

解决方案 #

方案1：使用popover(item:)关联单个触发元素（推荐） #

通过可选的Tool对象来控制单个Popover的显示，确保每个弹出视图和对应的按钮一一绑定：

import SwiftUI

struct ContentView: View {
  @State var selectedTool: Tool? // 记录选中的工具，控制Popover显示
  
  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")
            selectedTool = tool // 点击时设置选中的工具
          }, label: {
            Image(systemName: tool.name)
              .imageScale(.large)
              .foregroundStyle(.black.gradient)
              .font(.system(size: 30))
          })
          .contentShape(Rectangle())
          .popover(item: $selectedTool, arrowEdge: .top) { _ in
            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
  }
}

方案2：给每个按钮分配独立状态变量 #

如果需要支持同时显示多个Popover，可以用数组存储每个按钮的显示状态：

import SwiftUI

struct ContentView: View {
  @State var showStates: [Bool] = Array(repeating: false, count: 2) // 每个按钮对应独立状态
  
  var tools = [Tool("document.on.document"), Tool("document.on.clipboard")]
  
  var body: some View {
    HStack{
      HStack {
        ForEach(Array(tools.enumerated()), id: \.element.id) { index, tool in
          Button(action: {
            print("toggle")
            // 可选：关闭其他Popover，只保留当前的
            for i in showStates.indices {
              showStates[i] = i == index ? !showStates[i] : false
            }
          }, label: {
            Image(systemName: tool.name)
              .imageScale(.large)
              .foregroundStyle(.black.gradient)
              .font(.system(size: 30))
          })
          .contentShape(Rectangle())
          .popover(isPresented: $showStates[index], 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
  }
}

额外说明 #

• popover(item:)是SwiftUI官方推荐的循环内弹出视图控制方式，能避免状态冲突，确保弹出视图和触发元素正确关联。
• 若无需同时显示多个Popover，方案1更符合常规交互逻辑；若需要多Popover共存，方案2更适用。

内容的提问来源于stack exchange，提问作者Duck