[SUI] Paginador

#swift #ios #swiftui

Existe otro patrón de navegación que consiste en presentar algunas vistas en un paginador que permite al usuario arrastrar el contenido hacia la izquierda o derecha.

Para ello, cada página se envuelve en un Tab, y estas a su vez deben estar envueltas en un TabView. Este TabView se debe modificar con tabViewStyle(_:) aplicando el estilo page o page(indexDisplayMode:). PageTabViewStyle.IndexDisplayMode puede tomar los valores automatic, always o never.

En caso de que se requiera poner un fondo a los índices, se puede usar el modificador indexViewStyle(_:) que puede recibir los valores page o page(backgroundDisplayMode:).

enum TabFeature {
  case home, remove, trips, account
}

struct ContentView: View {

  @State private var selectedTab = TabFeature.home
  @State private var newTrips = 2

  var body: some View {
    VStack{
      Spacer()

      HStack {
        Spacer()
        TabView(selection: $selectedTab) {
          Tab(value: TabFeature.home) {
            Text("Home content")
              .background(Color.blue.opacity(0.7))
          }
          Tab(value: TabFeature.remove) {
            Text("Remove content")
              .background(Color.red.opacity(0.7))
          }
          Tab("Trips", systemImage: "airplane", value: TabFeature.trips) {
            Text("Trips content")
              .background(Color.blue.opacity(0.7))
              .onAppear {
                newTrips = 0
              }
          }.badge(newTrips)
          Tab(value: TabFeature.account) {
            Text("Accounts content")
              .background(Color.red.opacity(0.7))
          }
        }
        .frame(width: 300, height: 200)
        .background(Color.gray)
        .tabViewStyle(.page)
        .indexViewStyle(.page(backgroundDisplayMode: .always))

        Spacer()
      }
      .background(Color.red.opacity(0.7))

      Spacer()
    }
    .background(Color.yellow.opacity(0.7))
  }
}