SwiftUI中List多按钮绑定Popover无法正常显示问题求助

问题现象 #

• 点击List分组内的按钮时，Popover无法弹出
• 为多个分组按钮启用Popover功能时失效，但仅设置单个按钮时功能正常

原代码示例 #

struct ContentView: View {

var items = ["Note 1", "Note 2", "Note 3"]

@State private var showPopover = false

var body: some View {
    List {
        Section {
            ForEach(items, id: \.self) { item in
                VStack {
                    Text(item)
                        .padding()
                    Button(action: {
                        showPopover.toggle()
                    }, label: {
                        Text("Notes")
                    })
                    .popover(isPresented: $showPopover) {
                        Text(item)
                            .padding()
                            .foregroundStyle(Color.red)
                            .font(.body)
                            .lineLimit(nil)
                            .presentationCompactAdaptation(.popover)
                    }
                }
                .frame(maxWidth: .infinity)
                }
            }
        }
    }
}

问题原因 #

所有按钮共用同一个showPopover状态变量，当通过ForEach循环创建多个按钮时，每个按钮的Popover都绑定到同一状态。SwiftUI的视图渲染机制会因多视图共享状态产生冲突，再加上List的视图复用特性，最终导致Popover无法正常触发。

解决方案 #

给每个列表项单独维护Popover的展示状态，以下提供两种可行方案：

方案1：使用字典管理多状态 #

通过字典存储每个列表项的Popover展示状态，确保每个按钮对应独立的状态变量：

struct ContentView: View {
    var items = ["Note 1", "Note 2", "Note 3"]
    @State private var popoverStates: [String: Bool] = [:]
    
    var body: some View {
        List {
            Section {
                ForEach(items, id: \.self) { item in
                    VStack {
                        Text(item)
                            .padding()
                        Button(action: {
                            // 切换当前项状态，同时关闭其他项的Popover
                            items.forEach { popoverStates[$0] = false }
                            popoverStates[item] = !(popoverStates[item] ?? false)
                        }, label: {
                            Text("Notes")
                        })
                        .popover(isPresented: Binding(
                            get: { popoverStates[item] ?? false },
                            set: { popoverStates[item] = $0 }
                        )) {
                            Text(item)
                                .padding()
                                .foregroundStyle(Color.red)
                                .font(.body)
                                .lineLimit(nil)
                                .presentationCompactAdaptation(.popover)
                        }
                    }
                    .frame(maxWidth: .infinity)
                }
            }
        }
    }
}

方案2：抽离为独立子视图 #

将列表项封装成独立子视图，让子视图自行管理Popover状态，符合SwiftUI的视图封装原则：

struct ContentView: View {
    var items = ["Note 1", "Note 2", "Note 3"]
    
    var body: some View {
        List {
            Section {
                ForEach(items, id: \.self) { item in
                    NoteItemView(item: item)
                }
            }
        }
    }
}

struct NoteItemView: View {
    let item: String
    @State private var showPopover = false
    
    var body: some View {
        VStack {
            Text(item)
                .padding()
            Button(action: {
                showPopover.toggle()
            }, label: {
                Text("Notes")
            })
            .popover(isPresented: $showPopover) {
                Text(item)
                    .padding()
                    .foregroundStyle(Color.red)
                    .font(.body)
                    .lineLimit(nil)
                    .presentationCompactAdaptation(.popover)
            }
        }
        .frame(maxWidth: .infinity)
    }
}

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