SwiftUI macOS：表单单元格关联弹出框关闭后滚动位置重置至顶部

问题描述 #

在macOS上使用SwiftUI开发应用时，采用带.grouped样式的Form作为用户项编辑器，表单每行内的按钮点击后弹出Popover修改该行图标，功能正常，但关闭Popover时，Form的滚动位置总会重置至顶部。替换为List后该异常消失，但因macOS的List无类似InsetGrouped的样式，必须保留Form的.grouped样式，需确认此问题是SwiftUI Bug还是代码问题。

问题分析 #

这是SwiftUI在macOS平台上Form组件的已知设计缺陷（或Bug），代码本身不存在逻辑错误。

核心原因在于：当Form内部的@ObservedObject（如Item类）状态发生变化时（比如关闭Popover时修改了item.image），Form会触发全局重渲染，进而重置滚动位置。而List组件对局部状态更新的布局处理更精准，不会出现此类滚动重置问题。

解决方案 #

以下是几种保留Form样式同时解决滚动问题的可行方案：

方案1：重构为值类型（推荐） #

将Item从ObservableObject类改为Identifiable结构体，利用SwiftUI对值类型的精准重渲染特性，减少全局重绘范围：

// 修改Item为结构体
struct Item: Identifiable {
    let id = UUID()
    var title: String
    var image: ImageItem
}

// ContentView中使用@State管理数组
struct ContentView: View {
    @State private var name: String = ""
    @State private var comment: String = ""
    @State private var items: [Item] = []
    
    // ... 原有枚举和方法代码不变 ...
    
    var body: some View {
        Form {
            // ... 原有Section代码 ...
            Section {
                // 使用绑定式ForEach传递Item
                ForEach($items) { $item in
                    ItemView(item: $item)
                }
            } header: { /* ... 原有header代码 ... */ }
        }
        .formStyle(.grouped)
    }
}

// ItemView改为接收@Binding
struct ItemView: View {
    @Binding var item: Item
    @State private var popoverIsPresented = false
    
    var body: some View {
        HStack {
            Button {
                popoverIsPresented.toggle()
            } label: {
                Image(systemName: item.image.rawValue)
            }
            .buttonStyle(.plain)
            .popover(isPresented: $popoverIsPresented) {
                ImageItemPicker(selectedItem: $item.image, isPresented: $popoverIsPresented)
            }
            
            Text(item.title)
        }
    }
}

方案2：用ScrollViewReader手动恢复滚动位置 #

通过记录当前滚动的Item ID，在Popover关闭后手动将滚动位置恢复：

struct ContentView: View {
    @State private var name: String = ""
    @State private var comment: String = ""
    @State private var items: [Item] = []
    @State private var lastVisibleItemID: UUID? // 记录最后显示的Item ID
    
    // ... 原有枚举和方法代码不变 ...
    
    var body: some View {
        ScrollViewReader { proxy in
            Form {
                // ... 原有Section代码 ...
                Section {
                    ForEach(items) { item in
                        ItemView(item: item)
                            .id(item.id)
                            .onAppear {
                                lastVisibleItemID = item.id // 记录当前显示的Item
                            }
                    }
                } header: { /* ... 原有header代码 ... */ }
            }
            .formStyle(.grouped)
            // 监听Item状态变化，恢复滚动位置
            .onReceive(items.publisher) { _ in
                if let id = lastVisibleItemID {
                    proxy.scrollTo(id, anchor: .top)
                }
            }
        }
    }
}

结论 #

此问题属于SwiftUI在macOS平台上Form组件的设计缺陷，代码逻辑无错误。推荐优先使用方案1（值类型重构），它更符合SwiftUI的设计理念，能从根源上避免滚动重置问题；若无法重构数据结构，方案2的手动恢复方式也能有效解决问题。

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