SwiftUI自定义头部展开/收起功能偶现空白屏问题求助

1. LazyVStack 布局计算偏差：当使用 pinnedViews: [.sectionHeaders] 的 LazyVStack 处理大段动态内容的展开/收起时，SwiftUI 的布局系统在内容高度剧烈变化（如第四段200-350行内容收起）时，无法及时同步更新 ScrollView 的内容尺寸，导致空白区域出现。滚动操作会强制触发布局重计算，因此空白会消失。
2. Binding 状态更新不规范：直接操作 isExpanded.wrappedValue 切换状态，可能导致状态更新与视图渲染不同步，进一步加剧布局计算异常。
3. Section 组件的非预期行为：Section 原本为 List 设计，在 LazyVStack 中使用时会引入额外内部布局约束，干扰动态内容的尺寸计算。

方案一：规范状态更新 + 强制布局刷新 #

通过修正状态更新方式，并在展开/收起时强制重置 ScrollView 的布局上下文，解决尺寸计算异常问题：

struct ContentView: View {
    
    @State var isSection1Expanded = true
    @State var isSection2Expanded = true
    @State var isSection3Expanded = true
    @State var isSection4Expanded = true
    @State private var scrollViewId = UUID() // 用于强制刷新ScrollView布局
    
    var body: some View {
        NavigationView {
            VStack(spacing: 0) {
                Text("Some text heading (line 1)")
                Text("More header text (line 2)")
                Text("And a little more (line 3)")
                Divider()
                
                ScrollView {
                    LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
                        createSection(1...10, section: 1, isExpanded: $isSection1Expanded)
                        createSection(60...65, section: 2, isExpanded: $isSection2Expanded)
                        createSection(70...100, section: 3, isExpanded: $isSection3Expanded)
                        createSection(200...350, section: 4, isExpanded: $isSection4Expanded)
                    }
                }
                .id(scrollViewId) // 通过id变化强制重建ScrollView
                .border(.brown)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .navigationTitle("Expand & Collapse")
        }
    }
    
    @ViewBuilder
    private func createSection(_ range: ClosedRange<Int>, section: Int, isExpanded: Binding<Bool>) -> some View {
        // 用VStack替代Section，避免非List环境下的布局冲突
        VStack(spacing: 0) {
            sectionHeader(title: "Section \(section)", isExpanded: isExpanded, sectionId: section)
            if isExpanded.wrappedValue {
                ForEach(range, id: \.self) { index in
                    Text("S\(section) - Index: \(index)")
                        .frame(height: Double.random(in: 50...120))
                }
            }
        }
        .background(.blue)
        .border(.pink)
    }
    
    @ViewBuilder
    private func sectionHeader(title: String, isExpanded: Binding<Bool>, sectionId: Int) -> some View {
        Button {
            withAnimation {
                isExpanded.toggle() // 规范使用Binding的toggle方法
                scrollViewId = UUID() // 重置ScrollView id触发布局刷新
            }
        } label: {
            HStack(spacing: 4) {
                Rectangle()
                    .frame(width: 30, height: 30)
                Text(title)
                    .font(.title)
                Spacer()
                Text(isExpanded.wrappedValue ? "HIDE" : "SHOW")
                    .font(.caption)
                    .fontWeight(.semibold)
                    .padding(.trailing)
            }
        }
        .background(.yellow)
        .border(.red)
    }
}

方案二：使用 ScrollViewReader 强制同步布局 #

如果方案一的强制重建影响体验，可通过 ScrollViewReader 在展开/收起后滚动到当前section头部，触发布局重计算：

struct ContentView: View {
    
    @State var isSection1Expanded = true
    @State var isSection2Expanded = true
    @State var isSection3Expanded = true
    @State var isSection4Expanded = true
    private var scrollProxy: ScrollViewProxy?
    
    var body: some View {
        NavigationView {
            VStack(spacing: 0) {
                Text("Some text heading (line 1)")
                Text("More header text (line 2)")
                Text("And a little more (line 3)")
                Divider()
                
                ScrollViewReader { proxy in
                    ScrollView {
                        LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
                            createSection(1...10, section: 1, isExpanded: $isSection1Expanded)
                            createSection(60...65, section: 2, isExpanded: $isSection2Expanded)
                            createSection(70...100, section: 3, isExpanded: $isSection3Expanded)
                            createSection(200...350, section: 4, isExpanded: $isSection4Expanded)
                        }
                    }
                    .border(.brown)
                    .onAppear {
                        scrollProxy = proxy
                    }
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .navigationTitle("Expand & Collapse")
        }
    }
    
    @ViewBuilder
    private func createSection(_ range: ClosedRange<Int>, section: Int, isExpanded: Binding<Bool>) -> some View {
        VStack(spacing: 0) {
            sectionHeader(title: "Section \(section)", isExpanded: isExpanded, sectionId: section)
                .id("section-\(section)") // 给头部添加唯一标识
            if isExpanded.wrappedValue {
                ForEach(range, id: \.self) { index in
                    Text("S\(section) - Index: \(index)")
                        .frame(height: Double.random(in: 50...120))
                }
            }
        }
        .background(.blue)
        .border(.pink)
    }
    
    @ViewBuilder
    private func sectionHeader(title: String, isExpanded: Binding<Bool>, sectionId: Int) -> some View {
        Button {
            withAnimation {
                isExpanded.toggle()
                // 滚动到当前section头部，强制布局更新
                scrollProxy?.scrollTo("section-\(sectionId)", anchor: .top)
            }
        } label: {
            HStack(spacing: 4) {
                Rectangle()
                    .frame(width: 30, height: 30)
                Text(title)
                    .font(.title)
                Spacer()
                Text(isExpanded.wrappedValue ? "HIDE" : "SHOW")
                    .font(.caption)
                    .fontWeight(.semibold)
                    .padding(.trailing)
            }
        }
        .background(.yellow)
        .border(.red)
    }
}

• 避免在动态内容中使用随机高度（测试用例除外），固定或可预测的高度能降低布局计算的复杂度。
• 如果不需要懒加载，可将 LazyVStack 替换为普通 VStack，但需注意长列表的性能问题（iOS 15+ 对 VStack 的滚动性能有优化，但超大量数据仍需懒加载）。

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