页面更改时 TabView 指示器不移动

Question

当我从一页滚动到另一页时，水平指示条没有移动，移动它的适当方式是什么（如果可能的话使用动画）？

切换到分析区域后，下方的绿色区域不会向右移动。

完整代码如下：

enum PortfolioTabBarOptions: Hashable, CaseIterable {
    case balance, analytics
    
    var menuString: String { String(describing: self) }
}


struct CustomPagerTabView: View {
    
    @Binding var selectedTab: PortfolioTabBarOptions
    
    @State var tabOffset: CGFloat = 0
    
    var body: some View {
        VStack {
            HStack(alignment: .center) {
                HStack(spacing: 100) {
                    ForEach(Array(PortfolioTabBarOptions.allCases.enumerated()), id: \.element) { index, element in
                        // Current Tab
                        if(selectedTab.menuString == element.menuString) {
                            Text(element.menuString.capitalizeFirstLetter())
                                .font(.system(size: 15.0))
                                .bold()
                                .onTapGesture() {
                                    selectedTab = element.self
                                }
                                .onAppear {
                                    self.tabOffset = CGFloat(index)
                                }
                        }
                        // Innactive Tabs
                        else {
                            Text(element.menuString.capitalizeFirstLetter())
                                .foregroundColor(.gray)
                                .font(.system(size: 15.0))
                                .bold()
                                .onTapGesture() {
                                    selectedTab = element.self
                                }
                        }
                    }
                }
                .padding(.horizontal)
            }
            
            // Indicator...
            Capsule()
                .fill(.gray)
            // Width of the indicator bar
                .frame(width: PortfolioTabBarOptions.allCases.count == 0 ? 0 : (getScreenBounds().width / CGFloat(PortfolioTabBarOptions.allCases.count)), height: 1.2)
                .padding(.top,10)
                .frame(maxWidth: .infinity,alignment: .leading)
                .offset(x: tabOffset)
        }
        .padding(.top)
    }
}

Answer 1

下面的绿色区域确实向右移动了，但只移动了 1 个像素。尝试类似此示例代码的操作，选择最适合您目的的值 (200)：

.onAppear {
    self.tabOffset = CGFloat(index*200)  // <-- here
}

页面更改时 TabView 指示器不移动

TabView Indicator doesn't move when page changes

swift

swiftui