SwiftUI中HStack多按钮绑定Popover出现异常跳转问题排查

问题根因 #

这是iOS 14.x版本中SwiftUI处理同层级多个独立popover绑定的已知bug：系统对弹出层的互斥状态管理时序异常，点击第二个按钮时，系统会先触发前一个isPresented状态置为false关闭弹窗，同时第二个按钮的isPresented置为true，但两个状态变更的动画队列被错误合并，就出现了闪一下再打开的异常表现。

解决方案（兼容iOS 14+，无异常动画） #

推荐使用popover(item:content:)这一系统提供的列表元素弹窗专用API，统一管理弹出状态，避免多状态冲突：

struct ContentView: View {
    // 统一管理当前选中的弹窗元素，为nil时不显示弹窗
    @State private var selectedItem: String?
    var items = ["item1", "item2", "item3"]

    var body: some View {
        HStack {
            ForEach(items, id: \.self) { item in
                Button(action: {
                    selectedItem = item
                }) {
                    Text(item)
                }
                // 每个按钮绑定自己的item，当selectedItem和当前item相等时弹出对应弹窗
                .popover(item: $selectedItem) { select in
                    PopoverView(item: select)
                }
            }
        }
        .padding(300)
    }
}

struct PopoverView: View {
    // 这里不需要@State，直接用普通属性即可
    var item: String
    
    var body: some View {
        print("new PopoverView")
        return Text("View for \(item)")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

方案说明 #

• 用父视图统一的selectedItem状态替代每个子视图独立的isPresented状态，避免多状态冲突
• 系统原生的popover(item:content:)API会自动处理弹窗的互斥逻辑，选中新元素时会平滑关闭前一个弹窗再打开新弹窗，完全符合预期交互
• 额外优化：删除了PopoverView中不需要的@State修饰，item作为入参直接用普通属性接收即可，避免不必要的状态存储

如果一定要保留每个子视图独立管理状态的写法，也可以给每个popover添加唯一的.id()修饰符，强制系统不复用弹窗上下文，修复闪动问题：

// 在原MyGreatItemView的popover后添加id即可
.popover(isPresented: $isPresented) {
    PopoverView(item: item)
}
.id(item) // 用唯一的item作为id

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