SwiftUI：从外部视图切换Tab时如何让BottomCurve效果响应？

问题分析 #

点击Home视图中的"See profile"按钮切换到Profile视图时，Tab切换成功，但自定义TabBar的BottomCurve曲线效果没有跟随更新。核心原因是控制曲线位置的currentXValue变量仅在点击TabBar内部按钮时才会被更新，通过外部修改currentTab时，没有同步触发currentXValue的更新，导致曲线无法响应式变化。

解决方案 #

通过监听currentTab的变化，同步更新currentXValue的位置，具体步骤如下：

• 在CustomTabBar中添加字典存储每个Tab对应的全局中点坐标
• 在每个Tab按钮加载时，记录其位置信息
• 监听currentTab的变化，无论切换操作来自TabBar内部还是外部，都将currentXValue更新为对应Tab的中点位置并添加动画

修改后的关键代码 #

更新CustomTabBar结构体 #

struct CustomTabBar: View {
    @Binding var currentTab: Tab
    var animation: Namespace.ID
    // 存储每个Tab对应的全局中点位置
    @State private var tabPositions: [Tab: CGFloat] = [:]
    @State var currentXValue: CGFloat = 0
    
    var body: some View {
        HStack(spacing: 0){
            ForEach(Tab.allCases,id: \.rawValue){tab in
                TabButton(tab: tab)
                    .overlay {
                        Text(tab.rawValue)
                            .font(.system(size: 14, weight: .semibold))
                            .foregroundColor(.yellow)
                            .fixedSize(horizontal: true, vertical: false)
                            .offset(y: currentTab == tab ? 15 : 100)
                    }
            }
        }
        .padding(.top)
        .padding(.bottom,getSafeArea().bottom == 0 ? 15 : 10)
        .background{
            Color(.gray)
                .shadow(color: .black.opacity(0.08), radius: 5, x: 0, y: -5)
                .clipShape(BottomCurve(currentXValue: currentXValue))
                .ignoresSafeArea(.container, edges: .bottom)
        }
        // 监听currentTab变化，同步更新曲线位置
        .onChange(of: currentTab) { newTab in
            if let position = tabPositions[newTab] {
                withAnimation(.easeInOut) {
                    currentXValue = position
                }
            }
        }
    }
    
    @ViewBuilder
    func TabButton(tab: Tab)->some View{
        GeometryReader{proxy in
            Button {
                withAnimation(.easeInOut){
                    currentTab = tab
                    currentXValue = proxy.frame(in: .global).midX
                }
            } label: {
                Image(systemName: "person.fill")
                    .resizable()
                    .renderingMode(.template)
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 25, height: 25)
                    .frame(maxWidth: .infinity)
                    .foregroundColor(currentTab == tab ? .white : .blue.opacity(0.8))
                    .padding(currentTab == tab ? 15 : 0)
                    .background(
                        ZStack{
                            if currentTab == tab{
                                Circle()
                                    .fill(.green)
                                    .shadow(color: .black.opacity(0.1), radius: 8, x: 5, y: 5)
                                    .matchedGeometryEffect(id: "TAB", in: animation)
                            }
                        }
                    )
                    .contentShape(Rectangle())
                    .offset(y: currentTab == tab ? -50 : 0)
            }
            .onAppear {
                // 记录当前Tab的全局中点位置
                let midX = proxy.frame(in: .global).midX
                tabPositions[tab] = midX
                // 设置初始曲线位置
                if tab == Tab.allCases.first && currentXValue == 0{
                    currentXValue = midX
                }
            }
        }
        .frame(height: 30)
    }
}

效果验证 #

修改完成后，无论是点击TabBar内部按钮，还是通过Home视图中的"See profile"按钮切换Tab，BottomCurve曲线都会跟随currentTab的变化平滑动画到对应位置，实现完全的响应式效果。

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