SwiftUI带动画offset偏移视图时子视图独立动画错位问题

开发中尝试通过offset结合动画移动cell视图，原本预期"Test"文本会跟随父视图同步移动，但在视图下移过程中，该文本出现位置偏离的情况。初步判断是文本子视图在单独执行动画，但不清楚该现象的产生原因，需要明确动画对子视图的影响机制，以及移动父视图时固定Test文本位置的实现方案。

问题效果演示 #

相关实现代码 #

let SAFEAREA_BOTTOM = UIApplication.shared.connectedScenes
    .compactMap({ $0 as? UIWindowScene })
    .flatMap({ $0.windows })
    .first(where: { $0.isKeyWindow })?
    .safeAreaInsets.bottom ?? 0

struct TestView: View {

    @State var extend: Bool = false
    @State var cellFrame: CGRect = .zero
    @State var offsetY: CGFloat = 0
    
    var body: some View {
        VStack {
            cell
            Spacer()
        }
    }
    
    var cell: some View {
        VStack(spacing: 0) {
            HStack {
                Text("Test")
                Spacer()
            }
            
            VStack {
                Text("Extension1")
                Text("Extension2")
            }
                .frame(height: extend ? nil : 0)
                .clipped()
            
        }.padding()
        .background(Color.green)
        .padding()
        .offset(x: 0, y: offsetY)
        .overlay( GeometryReader { receiveViewFrame($0) })
        .onTapGesture {
            withAnimation(.easeInOut(duration: 1)) {
                if extend {
                    extend = false
                    offsetY = 0
                } else {
                    extend = true
                }
            }
        }
        .onChange(of: cellFrame) { frame in
            print("onChange")
            guard extend else { return }
                withAnimation(.easeInOut(duration: 1)) {
                    offsetY = UIScreen.main.bounds.height - frame.origin.y - frame.height - SAFEAREA_BOTTOM
                }
        }
    }
    
    private func receiveViewFrame(_ g: GeometryProxy) -> some View {
        DispatchQueue.main.async {
            cellFrame = g.frame(in: .global)
        }
        return Color.clear.frame(width: g.size.width, height: g.size.height)
    }
}

出现文本错位的核心原因是两段独立动画的时序和作用范围不匹配：

• 点击触发时，首先启动了控制扩展内容展开的动画：修改extend为true时，内层VStack的高度从0变为实际高度，这个动画作用在VStack本身的布局变化上，会重新计算内部所有子视图（包括顶部的"Test"文本）的布局位置。
• 同时在onChange监听cellFrame变化时又启动了第二个控制offsetY的平移动画，两个动画虽然时长相同，但启动时机存在微小差池：扩展动画先触发布局更新，此时"Test"文本会随着父视图高度增加被布局系统向下调整位置，而offset平移动画晚一帧启动，两个动画没有被SwiftUI合并到同一个事务里执行，就出现了文本单独位移、和绿色背景错位的视觉效果。
• 额外的问题点：在receiveViewFrame里通过异步主线程回调更新cellFrame，会导致每一次布局刷新都触发新的状态更新，进一步打乱动画的执行时序。

不需要手动监听frame再计算offset，把两段动画合并到同一个状态变更事务中即可：

1. 移除单独的cellFrame状态和对应的GeometryReader监听逻辑，避免异步更新打乱动画时序
2. 展开时直接在同一个withAnimation闭包里同时修改extend和offsetY的值，让所有状态变更被合并到同一个动画事务中，保证所有子视图同步参与动画
3. 固定"Test"文本位置可以直接给顶部HStack设置固定高度，确保扩展内容展开时不会把顶部文本挤动位置

调整后的核心代码参考：

struct TestView: View {
    @State var extend: Bool = false
    @State var offsetY: CGFloat = 0
    
    // 可根据实际UI调整高度值，也可在父视图层级用GeometryReader读取尺寸避免更新循环
    private let cellExpandedHeight: CGFloat = 160
    
    var body: some View {
        VStack {
            cell
            Spacer()
        }
    }
    
    var cell: some View {
        VStack(spacing: 0) {
            HStack {
                Text("Test")
                Spacer()
            }
            .frame(height: 40) // 固定顶部文本区域高度，避免被扩展内容挤压位移
            
            VStack {
                Text("Extension1")
                Text("Extension2")
            }
            .frame(height: extend ? nil : 0)
            .clipped()
            
        }
        .padding()
        .background(Color.green)
        .padding()
        .offset(y: offsetY)
        .onTapGesture {
            withAnimation(.easeInOut(duration: 1)) {
                if extend {
                    extend = false
                    offsetY = 0
                } else {
                    extend = true
                    // 同一个动画闭包里同时更新两个状态，保证动画同步
                    offsetY = UIScreen.main.bounds.height - cellExpandedHeight - SAFEAREA_BOTTOM
                }
            }
        }
    }
}

核心原则：SwiftUI中所有需要同步执行的动画状态变更，必须放在同一个withAnimation闭包中触发，不要通过多轮状态回调链式触发动画，否则很容易出现动画不同步、子视图错位的问题。

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