SwiftUI实现Tab页面切换（原生实现）

在1.0时还需要借助第三方UIkit库实现，现在已经不用了
TabView，不仅可以用作地步导航栏切换页面，同时也可以实现顶部tab页面切换
使用官方的方式可以实现图标与文字的tabbar，顶部tabbar就要自己配合实现了

      TabView(selection: $selectTab){
                        
                       OrderChildView(order:orderData,type:"")
                        .tag("全部")
                    
                    OrderChildView(order:orderData,type:"common")
                        .tag("普通扫码")
                    
                    OrderChildView(order:orderData,type:"coupon")
                        .tag("优惠券")
                    
                    OrderChildView(order:orderData,type:"easily")
                        .tag("顺手购")
                    
                    OrderChildView(order:orderData,type:"integral")
                        .tag("积分兑换")
                        
                    }
                    .tabViewStyle(.page(indexDisplayMode: .never))

.tabViewStyle(.page(indexDisplayMode: .never)) 这一句是关键代码，是我们要实现必须写的

这时，需要使用VStack在tabView上面加上一个横向滚动的tabbar

 private let tabList = ["全部","普通扫码","优惠券","顺手购","积分兑换"]//这里可以自定义，我这边需求是这样的


VStack{
 ScrollViewReader { tabRead in
                            ScrollView(.horizontal,showsIndicators: false){
                               
                                HStack{
                                    ForEach(tabList,id:\.self){ item in
                                        Spacer()
                                        Text(item)
                                        
                                            .font(.system(size:15))
                                            .padding(15)
                                            .foregroundColor(selection == item ? Color.init(red: 1, green: 0.76, blue: 0.16) : .white)
                                        
                                            .onTapGesture {
                                                print(item)
                                                withAnimation (.easeInOut){
                                                    selection = item
                                                }
                                            }
                                            .id(item)//这里必须添加id，为了跟随页面滚动tabbar，当然如果需求不需要，可以不加
                                        
                                        
                                        Spacer()
                                        
                                    }
                                    
                                }
                                
                                
                            }
                            .onChange(of: selection) { newValue in
                                tabRead.scrollTo(newValue as String?)
                            }
                        }

 TabView(selection: $selection){
                    
                    OrderChildView(order:orderData,type:"")
                        .tag("全部")
                    
                    OrderChildView(order:orderData,type:"common")
                        .tag("普通扫码")
                    
                    OrderChildView(order:orderData,type:"coupon")
                        .tag("优惠券")
                    
                    OrderChildView(order:orderData,type:"easily")
                        .tag("顺手购")
                    
                    OrderChildView(order:orderData,type:"integral")
                        .tag("积分兑换")
                    
                    
                    
                }
                .tabViewStyle(.page(indexDisplayMode: .never))
}

ScrollViewReader 配合ScrollView可实现，让视图滚动到你想要的位置，关键代码 tabRead.scrollTo(newValue as String?)

这样就可以轻松实现我们需要的样子了

IMG_0042.PNG