实战需求

SwiftUI TabView组件之实现可滚动的标签栏

本文价值与收获

看完本文后，您将能够作出下面的界面

实现可滚动的标签栏

实现可滚动的标签栏

看完本文您将掌握的技能

创建页面视图：

要创建页面视图，我们将TabView与PageTabViewStyle一起使用。我们将跟踪可见选项卡到变量，以便我们可以将页面操作同步到可滚动选项卡，反之亦然。

struct PageView: View {
    @Binding var selection: Int
    let dataModel: [String]
    var body: some View {
        TabView(selection:$selection) {
            ForEach(0..<dataModel.count) { i in
                VStack {
                    HStack {
                    Text(dataModel[i])
                        .foregroundColor(Color.primary)
                        .padding()
                     Spacer()
                    }
                    Spacer()
                }.tag(i)
            }
        }
        .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height - 170)
        //give padding nav height + scrollable Tab
        .tabViewStyle(PageTabViewStyle.init(indexDisplayMode: .never))

    }
}

使用滚动视图创建HStack：

如果选定的tap不在可见窗口内，我们将需要ScrollViewReader来滚动视图。

ScrollView(.horizontal, showsIndicators: false, content: {
                    ScrollViewReader { scrollReader in
                          ForEach(0..<dataModel.count) { i in
                            Text(dataModel[i])
                                       .id(i)
                                       .onTapGesture {
                               withAnimation{
                                  self.selection = i //change tab with animation
                              }
                            }              
                            Spacer().frame(width: 20)
                        }
                  }
                            .padding(.top).onChange(of: selection, perform: { value in
                                withAnimation{
                                    scrollReader.scrollTo(value, anchor: .center)
                                }
                            })
                    }
                })
                

实战代码