SwiftUI中matchedGeometryEffect过渡不流畅问题排查

我有一个国家列表，每行以对应国家的图片作为背景。现在要在同一视图内实现点击国家项展示详情的功能，通过设置selectedCountry状态配合matchedGeometryEffect实现图片过渡效果。国家数据是硬编码的，ID固定且已确保和namespace匹配，但过渡时出现闪烁，达不到预期的平滑效果。

异常效果展示：

现有代码：

struct ContentView: View {
    @Namespace var namespace;
    @Binding var countries: [Country(id: 0, display_name: "USA", image: "image_1"), Country(id: 1, display_name: "Canada", image: "image_2")]
    @State var selectedCountry: Country?;


    var body: some View {
        if (selectedCountry != nil) {
            VStack {
                Text("mainImage-\(self.selectedCountry!.id)")
                Image("\(selectedCountry!.image)-bg")
                    .resizable()
                    .scaledToFit()
                    .edgesIgnoringSafeArea(.all)
                    .overlay(Rectangle().opacity(0.2))
                    .matchedGeometryEffect(id: "main\(self.selectedCountry!.id)", in: namespace)
                    .mask(
                        LinearGradient(gradient: Gradient(colors: [Color.black, Color.black.opacity(0)]), startPoint: .center, endPoint: .bottom)
                    )

                Spacer()
                Text("test close")
                    .onTapGesture {
                        selectedCountry = nil
                    }
            }
        }
        if (selectedCountry ==  nil) {
            GeometryReader { bounds in
                ScrollView {
                    ForEach(Array(filteredCountries.enumerated()), id: \.1.id) { (index,country) in
                        LazyVStack {
                            ZStack(alignment: .bottom) {
                                Text("mainImage-\(country.id)")
                                Image("\(country.image)-bg")
                                    .resizable()
                                    .scaledToFit()
                                    .edgesIgnoringSafeArea(.all)
                                    .overlay(Rectangle().opacity(0.2))
                                    .matchedGeometryEffect(id: "main\(country.id)", in: namespace)
                                    .mask(
                                        LinearGradient(gradient: Gradient(colors: [Color.black, Color.black.opacity(0)]), startPoint: .center, endPoint: .bottom)
                                    )
                            }
                        }
                        .onTapGesture {
                            withAnimation() {
                                self.selectedCountry = country;
                            }
                        }
                    }
                }                
            }
        }
        
    }
}

问题原因及修复方案 #

核心问题点 #

1. 视图分支切换逻辑：用两个独立if分支分别渲染列表和详情视图，SwiftUI切换分支时会销毁旧视图、重建新视图，导致matchedGeometryEffect无法追踪同一元素的状态变化，引发闪烁。
2. 布局容器差异：列表中图片嵌套在LazyVStack+GeometryReader中，详情视图用VStack，容器布局规则不一致干扰动画计算。
3. 可选值强制解包：代码中大量使用!强制解包，虽不直接影响动画，但存在运行时风险。

修改后的代码 #

struct ContentView: View {
    @Namespace var namespace
    @Binding var countries: [Country]
    @State private var selectedCountry: Country?

    var body: some View {
        ZStack {
            // 列表视图：始终存在，选中时隐藏
            ScrollView {
                LazyVStack(spacing: 0) {
                    ForEach(countries, id: \.id) { country in
                        countryRowView(country: country)
                            .onTapGesture {
                                withAnimation(.easeInOut) {
                                    selectedCountry = country
                                }
                            }
                    }
                }
            }
            .opacity(selectedCountry == nil ? 1 : 0)

            // 详情视图：选中时显示
            if let selected = selectedCountry {
                VStack {
                    countryDetailImageView(country: selected)
                        .matchedGeometryEffect(id: "main\(selected.id)", in: namespace)
                    
                    Spacer()
                    Text("关闭")
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.black.opacity(0.7))
                        .cornerRadius(8)
                        .onTapGesture {
                            withAnimation(.easeInOut) {
                                selectedCountry = nil
                            }
                        }
                }
                .edgesIgnoringSafeArea(.top)
            }
        }
    }

    // 列表行视图复用
    private func countryRowView(country: Country) -> some View {
        ZStack(alignment: .bottom) {
            Text("mainImage-\(country.id)")
                .foregroundColor(.white)
            Image("\(country.image)-bg")
                .resizable()
                .scaledToFit()
                .overlay(Rectangle().opacity(0.2))
                .matchedGeometryEffect(id: "main\(country.id)", in: namespace)
                .mask(
                    LinearGradient(gradient: Gradient(colors: [.black, .black.opacity(0)]), 
                                   startPoint: .center, endPoint: .bottom)
                )
        }
    }

    // 详情图片视图复用
    private func countryDetailImageView(country: Country) -> some View {
        Image("\(country.image)-bg")
            .resizable()
            .scaledToFit()
            .overlay(Rectangle().opacity(0.2))
            .mask(
                LinearGradient(gradient: Gradient(colors: [.black, .black.opacity(0)]), 
                               startPoint: .center, endPoint: .bottom)
            )
    }
}

// 补充Country结构体定义
struct Country: Identifiable {
    let id: Int
    let display_name: String
    let image: String
}

关键优化说明 #

• 统一容器层级：用ZStack包裹列表和详情视图，通过opacity控制列表显隐，避免视图销毁重建，确保matchedGeometryEffect持续追踪元素。
• 复用视图组件：提取列表行和详情图片为独立方法，保证两者的图片配置完全一致，消除属性差异导致的动画异常。
• 明确动画参数：指定.easeInOut动画曲线，让过渡效果更可控、平滑。
• 移除冗余布局：删除原列表中无实际作用的GeometryReader，减少布局干扰。

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