SwiftUI中如何让多个按钮分别独立触发Popover弹窗

将.popover(item:)修饰符挂载在外层VStack上时，SwiftUI默认会把弹窗锚点绑定到容器内第一个可交互子视图。点击下方按钮修改selected值时，系统无法匹配到正确的锚点位置，因此只有上方按钮能正常触发弹窗。

方案1：独立状态绑定（逻辑最清晰，全版本兼容，推荐） #

为每个按钮单独配置弹窗显隐状态，将.popover修饰符直接挂载到对应按钮上，各弹窗完全独立互不干扰：

struct PopoverTest: View {
    @State private var showFirstPopover = false
    @State private var showSecondPopover = false
    
    var body: some View {
        VStack (spacing: 88) {
            // 第一个按钮
            Button {
                showFirstPopover = true
            } label: {
                Image(systemName: "stopwatch")
            }
            .popover(isPresented: $showFirstPopover) {
                Text("Popover1").font(.largeTitle)
            }

            // 第二个按钮
            Button {
                showSecondPopover = true
            } label: {
                Image(systemName: "globe")
            }
            .popover(isPresented: $showSecondPopover) {
                Text("Popover2").font(.largeTitle)
            }
        }
        .buttonStyle(.plain)
    }
}

如果需要统一管理弹窗数据源，也可以保留原有Identifiable模型，只需将popover修饰符下移到按钮层级，过滤对应展示内容即可：

struct MySelection: Identifiable {
    let id = UUID()
    var text = ""
}

struct PopoverTest: View {
    @State var selected: MySelection?
    
    var body: some View {
        VStack (spacing: 88) {
            Button {
                selected = MySelection(text: "Popover1")
            } label: {
                Image(systemName: "stopwatch")
            }
            .popover(item: $selected) { selection in
                if selection.text == "Popover1" {
                    Text(selection.text).font(.largeTitle)
                }
            }

            Button {
                selected = MySelection(text: "Popover2")
            } label: {
                Image(systemName: "globe")
            }
            .popover(item: $selected) { selection in
                if selection.text == "Popover2" {
                    Text(selection.text).font(.largeTitle)
                }
            }
        }
        .buttonStyle(.plain)
    }
}

方案2：显式指定锚点（适合不想调整修饰符层级的场景） #

保留外层VStack上的popover修饰符，给每个按钮设置唯一ID，触发弹窗时同步记录锚点ID，让系统定位到正确的弹出位置（仅支持iOS 16+ / macOS 13+）：

struct MySelection: Identifiable {
    let id = UUID()
    var text = ""
    var anchor: AnyHashable
}

struct PopoverTest: View {
    @State var selected: MySelection?
    private let firstButtonID = "stopwatchBtn"
    private let secondButtonID = "globeBtn"
    
    var body: some View {
        VStack (spacing: 88) {
            Button {
                selected = MySelection(text: "Popover1", anchor: firstButtonID)
            } label: {
                Image(systemName: "stopwatch")
            }
            .id(firstButtonID)

            Button {
                selected = MySelection(text: "Popover2", anchor: secondButtonID)
            } label: {
                Image(systemName: "globe")
            }
            .id(secondButtonID)
        }
        .buttonStyle(.plain)
        .popover(item: $selected, anchor: .top) { selection in
            Text(selection.text).font(.largeTitle)
                .presentationCompactAdaptation(.popover)
        }
    }
}

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