SwiftUI：固定SectionHeader中的分段选择器未正确更新ScrollView内容高度

我在ScrollView里设置了带分段选择器的固定SectionHeader，用来切换两个长度不同的列表（一个长列表，一个短列表）。当SectionHeader不固定时功能正常，但设置固定后出现问题：滚动长列表后切换到短列表，固定的Header会失去锚定位置。我试过用GeometryReader代理切换时手动滚到顶部，没用。

我猜测问题根源是ScrollView的内容高度没有正确更新，从滚动指示器长度没同步更新也能看出来。

想请教：

• 这个需求能实现吗？
• 分段选择器是不是没法在多Section列表里正常工作？
• 有没有办法正确更新ScrollView内容高度，让固定Header保持锚定？

复现代码 #

struct ContentView: View {
    @State private var tab = 0

    var body: some View {
        VStack(spacing: 0) {
            let cols = [GridItem(.flexible())]
            
            ScrollView {
                LazyVGrid(columns: cols, pinnedViews: [.sectionHeaders]) {
                    
                    Section {
                        ForEach(1...2, id: \.self) { count in
                            Text("Section 1 Item \(count)")
                                .frame(maxWidth: .infinity, alignment: .leading)
                              .padding().border(Color.blue)
                        }
                    } header: {
                        Text("Section 1")
                            .frame(maxWidth: .infinity, minHeight: 50, alignment: .center)
                            .background(Color.blue)
                    }

                    Section {
                        if tab == 0 {
                            ForEach(10...20, id: \.self) { count in
                                Text("Section 2 Tab 0 Item \(count)")
                                  .frame(maxWidth: .infinity, alignment: .leading)
                                  .padding().border(Color.purple)
                            }
                        }
                        
                        if tab == 1 {
                            ForEach(3...5, id: \.self) { count in
                                Text("Section 2 Tab 1 Item \(count)")
                                    .frame(maxWidth: .infinity, alignment: .leading)
                                  .padding().border(Color.purple)
                            }
                        }

                    } header: {
                        Picker("", selection: $tab) {
                            Text("Long").tag(0)
                            Text("Short").tag(1)
                        }
                        .pickerStyle(.segmented).padding().background(Color.purple)
                    }
                }

                LazyVGrid(columns: cols) {
                        Section {
                            ForEach(30...50, id: \.self) { count in
                                Text("Section 3 Item \(count)")
                                    .frame(maxWidth: .infinity, alignment: .leading)
                                    .padding().border(Color.green)
                            }
                        } header: {
                            Text("Section 3")
                                .frame(maxWidth: .infinity, minHeight: 50, alignment: .center)
                                .background(Color.green)
                            
                        }
                }
            }
        }
        .font(.caption)
    }
}

#Preview {
    ContentView()
}

解决方法 #

这个问题是SwiftUI中LazyVGrid动态更新内容时，固定视图的布局计算bug导致的。以下是几种可行的解决思路：

方法1：统一Section容器（最优方案） #

把所有Section放在同一个LazyVGrid里，不要拆分多个LazyVGrid。拆分后ScrollView无法正确计算整体内容高度，是锚定失效的核心原因。修改后的代码：

struct ContentView: View {
    @State private var tab = 0

    var body: some View {
        VStack(spacing: 0) {
            let cols = [GridItem(.flexible())]
            
            ScrollView {
                LazyVGrid(columns: cols, pinnedViews: [.sectionHeaders]) {
                    // Section 1
                    Section {
                        ForEach(1...2, id: \.self) { count in
                            Text("Section 1 Item \(count)")
                                .frame(maxWidth: .infinity, alignment: .leading)
                                .padding().border(Color.blue)
                        }
                    } header: {
                        Text("Section 1")
                            .frame(maxWidth: .infinity, minHeight: 50, alignment: .center)
                            .background(Color.blue)
                    }

                    // Section 2（带切换的列表）
                    Section {
                        Group {
                            if tab == 0 {
                                ForEach(10...20, id: \.self) { count in
                                    Text("Section 2 Tab 0 Item \(count)")
                                        .frame(maxWidth: .infinity, alignment: .leading)
                                        .padding().border(Color.purple)
                                }
                            } else {
                                ForEach(3...5, id: \.self) { count in
                                    Text("Section 2 Tab 1 Item \(count)")
                                        .frame(maxWidth: .infinity, alignment: .leading)
                                        .padding().border(Color.purple)
                                }
                            }
                        }
                    } header: {
                        Picker("", selection: $tab) {
                            Text("Long").tag(0)
                            Text("Short").tag(1)
                        }
                        .pickerStyle(.segmented).padding().background(Color.purple)
                    }

                    // Section 3 移到同一个LazyVGrid里
                    Section {
                        ForEach(30...50, id: \.self) { count in
                            Text("Section 3 Item \(count)")
                                .frame(maxWidth: .infinity, alignment: .leading)
                                .padding().border(Color.green)
                        }
                    } header: {
                        Text("Section 3")
                            .frame(maxWidth: .infinity, minHeight: 50, alignment: .center)
                            .background(Color.green)
                    }
                }
            }
        }
        .font(.caption)
    }
}

方法2：切换时强制刷新ScrollView布局 #

如果必须保留多个LazyVGrid，可以给ScrollView加动态id，切换tab时更新id强制重建布局：

ScrollView {
    // 原内容不变
}
.id(tab) // 切换tab时重建ScrollView

这种方法简单直接，但会重置滚动位置到顶部，适合对滚动位置要求不高的场景。

方法3：用List替代ScrollView+LazyVGrid #

如果布局允许，List的固定Header逻辑更稳定，直接替换即可：

struct ContentView: View {
    @State private var tab = 0

    var body: some View {
        List {
            Section {
                ForEach(1...2, id: \.self) { count in
                    Text("Section 1 Item \(count)")
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding().border(Color.blue)
                }
            } header: {
                Text("Section 1")
                    .frame(maxWidth: .infinity, minHeight: 50, alignment: .center)
                    .background(Color.blue)
            }

            Section {
                if tab == 0 {
                    ForEach(10...20, id: \.self) { count in
                        Text("Section 2 Tab 0 Item \(count)")
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .padding().border(Color.purple)
                    }
                } else {
                    ForEach(3...5, id: \.self) { count in
                        Text("Section 2 Tab 1 Item \(count)")
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .padding().border(Color.purple)
                    }
                }
            } header: {
                Picker("", selection: $tab) {
                    Text("Long").tag(0)
                    Text("Short").tag(1)
                }
                .pickerStyle(.segmented).padding().background(Color.purple)
            }

            Section {
                ForEach(30...50, id: \.self) { count in
                    Text("Section 3 Item \(count)")
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding().border(Color.green)
                }
            } header: {
                Text("Section 3")
                    .frame(maxWidth: .infinity, minHeight: 50, alignment: .center)
                    .background(Color.green)
            }
        }
        .font(.caption)
        .listStyle(.insetGrouped) // 根据需求调整样式
    }
}

总结 #

• 需求完全可以实现，分段选择器本身能在多Section列表正常工作，问题出在LazyVGrid的布局计算bug。
• 最优方案是把所有Section放在同一个LazyVGrid里，让ScrollView正确计算整体内容高度，避免锚定失效。
• 如果必须拆分容器，用id强制重建或换用List都是可行的替代方案。

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