SwiftUI自定义分段选择器切换动画异常问题求助

你的问题出在错误使用了两个命名空间和多组几何匹配ID，导致反向切换标签时无法正确触发平滑过渡动画。当前代码给激活状态、非激活状态分别分配了不同的matchedGeometryEffect，这破坏了SwiftUI几何匹配的核心逻辑——几何匹配需要同一个ID在不同状态的视图间共享，才能实现位置与尺寸的平滑过渡。

修复步骤： #

• 移除多余的namespace2，仅保留一个命名空间
• 让激活状态的背景视图使用统一的匹配ID，非激活状态无需添加几何匹配（透明背景不需要参与过渡）
• 调整背景视图的层级，将其放在所有按钮文本的下方，避免遮挡内容

修复后的完整代码： #

struct CustomSegmentedPickerView: View {
    private var titles = ["products", "causes", "info"]
    private var colors = [Color.primaryAccent, Color.primaryAccent, Color.primaryAccent]
    @State private var currentIndex: Int = 0
    @Namespace var namespace

    var body: some View {
        VStack(alignment: .center) {
            // 用ZStack分离背景层与按钮层
            ZStack(alignment: .leading) {
                // 独立的激活背景视图，放在底层
                Rectangle()
                    .frame(width: UIScreen.main.bounds.width / CGFloat(titles.count) - 32, height: 40)
                    .cornerRadius(770)
                    .foregroundColor(colors[currentIndex].opacity(0.3))
                    .matchedGeometryEffect(id: "activeBackground", in: namespace)
                    .padding(.horizontal, 16)

                HStack(spacing: 0) {
                    ForEach(0 ..< titles.count) { index in
                        Button {
                            withAnimation(.default) {
                                currentIndex = index
                            }
                        } label: {
                            Text(titles[index])
                                .foregroundColor(.black)
                                .frame(maxWidth: .infinity, height: 40)
                        }
                    }
                }
            }
            .padding()
        }
    }
}

关键说明： #

• 将激活背景从每个按钮的ZStack中抽离，作为独立视图放在HStack下方，通过currentIndex控制位置，借助matchedGeometryEffect实现平滑移动
• 计算背景宽度时减去左右padding的总宽度，确保与按钮区域完全对齐
• 仅保留一个命名空间和匹配ID，让SwiftUI能正确追踪背景视图的位置变化，无论正向还是反向切换标签，都能触发连贯的过渡动画

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