SwiftUI中如何实现子视图整体预渲染后再执行淡入过渡？

问题背景 #

现有一个SwiftUI界面，点击按钮可切换叠加的FrontView。该视图由全屏黑色背景叠加一个100pt×100pt的黑色方块组成，代码如下：

struct ContentView: View {
    @State private var frontViewIsOpen = false
    
    var body: some View {
        ZStack {
            Color.white
                .zIndex(0)
            if frontViewIsOpen {
                FrontView()
                    .transition(.opacity)
                    .zIndex(1)
            }
            VStack {
                Spacer()
                Button("Toggle") {
                    frontViewIsOpen.toggle()
                }
            }
            .padding(.bottom, 50)
            .zIndex(2)
        }
        .animation(.linear(duration: 1), value: frontViewIsOpen)
        .ignoresSafeArea()
    }
}

struct FrontView: View {
    var body: some View {
        Color.black
            .overlay {
                Color.black.frame(width: 100, height: 100)
            }
    }
}

当前问题：使用.transition(.opacity)时，SwiftUI会同时对父视图和子视图执行淡入动画，导致叠加区域的透明度叠加（比如动画到0.5秒时，叠加区域透明度为0.75），而UIKit中淡入是整体过渡，不会出现这种子视图单独高亮的情况。尝试过.transaction { $0.animation = nil }和子视图设置.transition(.identity)，均未解决。

解决方案 #

方法1：用opacity修饰符替代过渡动画 #

直接控制整个FrontView的透明度属性，而非使用视图插入/移除的过渡动画。这种方式下，SwiftUI会将整个视图（包括所有子视图）视为一个整体应用透明度，避免叠加问题：

struct ContentView: View {
    @State private var frontViewIsOpen = false
    
    var body: some View {
        ZStack {
            Color.white
                .zIndex(0)
            // 始终渲染FrontView，通过opacity控制显隐和动画
            FrontView()
                .opacity(frontViewIsOpen ? 1 : 0)
                .zIndex(1)
            VStack {
                Spacer()
                Button("Toggle") {
                    withAnimation(.linear(duration: 1)) {
                        frontViewIsOpen.toggle()
                    }
                }
            }
            .padding(.bottom, 50)
            .zIndex(2)
        }
        .ignoresSafeArea()
    }
}

方法2：将视图包装为UIKit容器 #

通过UIViewRepresentable将FrontView包装到UIKit的UIHostingController中，复用UIKit的整体过渡逻辑，避免SwiftUI的子视图动画叠加：

// 通用UIKit包装器
struct UIKitHostedView<Content: View>: UIViewRepresentable {
    let content: Content
    
    func makeUIView(context: Context) -> UIHostingController<Content> {
        UIHostingController(rootView: content)
    }
    
    func updateUIView(_ uiView: UIHostingController<Content>, context: Context) {}
}

// 修改ContentView中的FrontView调用
struct ContentView: View {
    @State private var frontViewIsOpen = false
    
    var body: some View {
        ZStack {
            Color.white
                .zIndex(0)
            if frontViewIsOpen {
                UIKitHostedView(content: FrontView())
                    .transition(.opacity)
                    .zIndex(1)
            }
            VStack {
                Spacer()
                Button("Toggle") {
                    frontViewIsOpen.toggle()
                }
            }
            .padding(.bottom, 50)
            .zIndex(2)
        }
        .animation(.linear(duration: 1), value: frontViewIsOpen)
        .ignoresSafeArea()
    }
}

方法3：先渲染为图片再执行过渡 #

提前将FrontView完整渲染为UIImage，再对图片执行淡入过渡，确保动画对象是单一元素，无叠加问题：

struct ContentView: View {
    @State private var frontViewIsOpen = false
    @State private var cachedFrontImage: UIImage?
    
    var body: some View {
        ZStack {
            Color.white
                .zIndex(0)
            if let image = cachedFrontImage, frontViewIsOpen {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFill()
                    .transition(.opacity)
                    .zIndex(1)
            }
            VStack {
                Spacer()
                Button("Toggle") {
                    if !frontViewIsOpen {
                        // 提前渲染FrontView为图片
                        let renderer = ImageRenderer(content: FrontView())
                        cachedFrontImage = renderer.uiImage
                    }
                    withAnimation(.linear(duration: 1)) {
                        frontViewIsOpen.toggle()
                    }
                }
            }
            .padding(.bottom, 50)
            .zIndex(2)
        }
        .ignoresSafeArea()
    }
}

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