SwiftUI如何同时实现容器位移与内部子视图过渡动画

问题原因 #

SwiftUI 中使用 if/switch 控制子视图插入、移除时，子视图默认仅在最终布局位置执行淡入淡出过渡，不会自动继承父视图正在进行的位移动画，因此会出现子视图在位移终点才执行显隐动画的现象。

解决方案 #

保留 if 控制逻辑的前提下，给子视图自定义组合过渡效果，将子视图的插入/移除位移和透明度动画结合，即可实现和父容器同步移动+显隐的效果：

struct ContentView: View {
    @State var showingSubview = false
    // 把偏移量抽为常量，修改时两边同步更新
    private let containerOffset: CGFloat = 150
    
    var body: some View {
        VStack {
            Button("Show Subview") {
                withAnimation(.easeInOut(duration: 2)) {
                    showingSubview.toggle()
                }
            }
            
            if showingSubview {
                Text("Subview")
                    .padding()
                    .background(Color.green)
                    // 自定义组合过渡：和父容器反向的位移+透明度
                    .transition(.offset(x: -containerOffset).combined(with: .opacity))
            }
        }
        .padding()
        .background(Color.yellow)
        .offset(x: showingSubview ? containerOffset : 0, y: 0)
    }
}

如果父容器的偏移是动态值不需要硬编码，也可以通过 .matchedGeometryEffect 实现同步，给父容器和子视图绑定同一个命名空间和ID即可，不会破坏原有的 if 控制逻辑。

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