使用MatchedGeometryEffect时如何修复Z-Stack视图重排问题？

问题描述 #

我尝试用matchedGeometryEffect实现带类原生动画的自定义分段控件，但遇到动画异常：背景白色矩形向右滑动时，之前选中的标签会被遮到视图后方，出现撕裂式的不流畅动效，怀疑和Z-Stack视图重排有关，求修复。

原代码如下：

import SwiftUI

struct TabSegmentedControlView: View {
    @State private var currentTab = 0
    
    var body: some View {
        VStack {
            TabBarView(currentTab: $currentTab)
        }
    }
}

struct TabBarView: View {
    @Binding var currentTab: Int
    @Namespace var namespace
    
    var tabBarOptions: [String] = ["shield", "house", "hands.clap"]
    
    var body: some View {
        HStack(spacing: 0) {
            ForEach(
                Array(zip(self.tabBarOptions.indices,
                          self.tabBarOptions)),
                id: \.0,
                content: { id, name in
                    TabBarTabView(
                        currentTab: $currentTab,
                        namespace: namespace.self,
                        icon: name,
                        title: name,
                        tab: id
                    )
                }
            )
        }
        .padding(.all, 2)
        .background(.gray.opacity(0.2))
        .cornerRadius(16)
        .padding(.horizontal, 16)
    }
}

struct TabBarTabView: View {
    @Binding var currentTab: Int
    let namespace: Namespace.ID
    
    let icon: String
    let title: String
    let tab: Int
    
    var body: some View {
        Button(action: {
            self.currentTab = tab
        }) {
            ZStack {
                if tab == currentTab {
                    Color.white
                        .frame(height: 60)
                        .frame(maxWidth: .infinity)
                        .cornerRadius(14)
                        .shadow(color: .black.opacity(0.04), radius: 0.5, x: 0, y: 3)
                        .shadow(color: .black.opacity(0.12), radius: 4, x: 0, y: 3)
                        .transition(.offset())
                        .matchedGeometryEffect(
                            id: "slidingRect",
                            in: namespace,
                            properties: .frame
                        )
                }
                VStack(spacing: 4) {
                    Image(systemName: icon)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 24, height: 24)
                    Text(title)
                }
                .padding()
                .frame(maxWidth: .infinity)
                .font(Font.body.weight(.medium))
                .foregroundColor(tab == currentTab ? .black : .gray)
                .transition(.opacity)
                .cornerRadius(14)
                .frame(height: 60)
            }
            .animation(.easeInOut, value: self.currentTab)
        }
    }
}

#Preview {
    TabSegmentedControlView()
}

问题原因 #

每个TabBarTabView内部的ZStack是独立层级，滑动的白色背景仅存在于当前选中的Tab中。切换时，旧Tab的标签内容会因为ZStack的层级关系，跑到滑动背景的上方，导致视觉上的撕裂效果。

修复方案 #

把滑动背景从单个Tab的ZStack中移到整个TabBar的顶层ZStack里，确保背景始终处于所有标签内容的下方，统一管理层级关系。

修改后的完整代码：

import SwiftUI

struct TabSegmentedControlView: View {
    @State private var currentTab = 0
    
    var body: some View {
        VStack {
            TabBarView(currentTab: $currentTab)
        }
    }
}

struct TabBarView: View {
    @Binding var currentTab: Int
    @Namespace var namespace
    
    var tabBarOptions: [String] = ["shield", "house", "hands.clap"]
    
    var body: some View {
        ZStack {
            // 把滑动背景移到TabBar的顶层ZStack，确保在所有标签下方
            Color.white
                .frame(height: 60)
                .frame(maxWidth: .infinity)
                .cornerRadius(14)
                .shadow(color: .black.opacity(0.04), radius: 0.5, x: 0, y: 3)
                .shadow(color: .black.opacity(0.12), radius: 4, x: 0, y: 3)
                .matchedGeometryEffect(
                    id: "slidingRect",
                    in: namespace,
                    properties: .frame
                )
            
            HStack(spacing: 0) {
                ForEach(
                    Array(zip(tabBarOptions.indices, tabBarOptions)),
                    id: \.0
                ) { id, name in
                    TabBarTabView(
                        currentTab: $currentTab,
                        namespace: namespace,
                        icon: name,
                        title: name,
                        tab: id
                    )
                }
            }
        }
        .padding(.all, 2)
        .background(.gray.opacity(0.2))
        .cornerRadius(16)
        .padding(.horizontal, 16)
        .animation(.easeInOut, value: currentTab) // 把动画移到TabBar层级，统一控制
    }
}

struct TabBarTabView: View {
    @Binding var currentTab: Int
    let namespace: Namespace.ID
    
    let icon: String
    let title: String
    let tab: Int
    
    var body: some View {
        Button(action: {
            currentTab = tab
        }) {
            VStack(spacing: 4) {
                Image(systemName: icon)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 24, height: 24)
                Text(title)
            }
            .padding()
            .frame(maxWidth: .infinity)
            .font(Font.body.weight(.medium))
            .foregroundColor(tab == currentTab ? .black : .gray)
            .frame(height: 60)
            .cornerRadius(14)
            // 给每个Tab添加matchedGeometryEffect的占位，让背景能正确匹配位置
            .matchedGeometryEffect(
                id: "tab_\(tab)",
                in: namespace,
                properties: .frame,
                isSource: false
            )
        }
    }
}

#Preview {
    TabSegmentedControlView()
}

关键修改点 #

• 将滑动背景从单个Tab的ZStack中提取到TabBarView的ZStack底层，确保所有标签内容都在背景上方
• 移除TabBarTabView内的背景和局部动画，把动画统一放在TabBarView层级
• 给每个Tab添加matchedGeometryEffect占位（isSource: false），让滑动背景能正确匹配每个Tab的位置

内容的提问来源于stack exchange，提问作者Данил Кокин