如何避免LazyVStack在过渡后滚动时出现异常子视图动画

我的ScrollView包含头部视图和带可变数量子视图的LazyVStack。点击按钮隐藏头部，让LazyVStack填满整个ScrollView，过渡完成后滚动时，LazyVStack里的子视图会出现从上到下的异常位移。我清楚这是LazyVStack调整自身框架导致的，但该交互是必须的UX需求。尝试过多种布局方案、给所有相关视图设置固定高度、禁用LazyVStack子视图动画，均未解决问题。

问题复现代码 #

struct ContentView: View {
    @State var isHeaderVisible: Bool = false

    var body: some View {
        VStack {
            Button("Toggle") {
                withAnimation(.easeInOut(duration: 2)) {
                    isHeaderVisible.toggle()
                }
            }
            ScrollViewReader { proxy in
                ScrollView {
                    VStack(spacing: .zero) {
                        if isHeaderVisible {
                            Rectangle()
                                .fill(.red)
                                .frame(height: 300)
                                .transition(.move(edge: .top))
                        }
                        LazyVStack(spacing: 4) {
                            ForEach(0..<100, id: \.self) { i in
                                Rectangle()
                                    .fill(.black)
                                    .frame(height: 100)
                            }
                        }
                    }
                }
            }
        }
        .background(.white)
    }
}

问题表现 #

切换头部隐藏后，滚动LazyVStack时，子视图会突然向下偏移一段距离，随后恢复正常位置，严重影响交互体验。

修复方案（核心思路：避免LazyVStack布局重排） #

问题根源是头部视图被移除时，ScrollView内容的起始位置突变，导致LazyVStack的懒加载缓存位置与实际布局不匹配。以下是两种可行的解决方式：

方案一：视觉偏移替代视图移除（推荐） #

通过offset和opacity控制头部的显示/隐藏，保持LazyVStack的布局位置不变，从根源避免重排问题：

struct ContentView: View {
    @State var isHeaderVisible: Bool = false
    private let headerHeight: CGFloat = 300

    var body: some View {
        VStack {
            Button("Toggle") {
                withAnimation(.easeInOut(duration: 2)) {
                    isHeaderVisible.toggle()
                }
            }
            ScrollView {
                VStack(spacing: .zero) {
                    // 头部视图：用位移+透明度实现过渡，不移除视图
                    Rectangle()
                        .fill(.red)
                        .frame(height: headerHeight)
                        .offset(y: isHeaderVisible ? 0 : -headerHeight)
                        .opacity(isHeaderVisible ? 1 : 0)
                    
                    // LazyVStack：同步偏移，保持布局起始位置不变
                    LazyVStack(spacing: 4) {
                        ForEach(0..<100, id: \.self) { i in
                            Rectangle()
                                .fill(.black)
                                .frame(height: 100)
                        }
                    }
                    .offset(y: isHeaderVisible ? 0 : -headerHeight)
                }
            }
        }
        .background(.white)
    }
}

方案二：动画后修正滚动位置 #

如果必须移除头部视图，可在动画结束后通过ScrollViewReader调整滚动位置，抵消布局变化的影响：

struct ContentView: View {
    @State var isHeaderVisible: Bool = false
    private let headerHeight: CGFloat = 300
    @State private var lastScrollOffset: CGFloat = 0

    var body: some View {
        VStack {
            Button("Toggle") {
                withAnimation(.easeInOut(duration: 2)) {
                    isHeaderVisible.toggle()
                }
                // 动画结束后修正滚动位置
                DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                    if !isHeaderVisible {
                        let targetOffset = max(lastScrollOffset - headerHeight, 0)
                        // 需结合ScrollViewReader的proxy实现精准滚动
                    }
                }
            }
            ScrollViewReader { proxy in
                ScrollView {
                    VStack(spacing: .zero) {
                        if isHeaderVisible {
                            Rectangle()
                                .fill(.red)
                                .frame(height: headerHeight)
                                .transition(.move(edge: .top))
                        }
                        LazyVStack(spacing: 4) {
                            ForEach(0..<100, id: \.self) { i in
                                Rectangle()
                                    .fill(.black)
                                    .frame(height: 100)
                                    .id(i) // 给子视图添加ID，方便定位滚动
                            }
                        }
                    }
                }
                .onChange(of: proxy.scrollOffset) { newValue in
                    lastScrollOffset = newValue.y
                }
            }
        }
        .background(.white)
    }
}

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