SwiftUI - How to get currently displayed item index in a carousel?

I'm trying to recreate the same view as the Carrot Weather Layout modifier, that is a carousel on top of a button that, when pressed, would open the detail view of the item currently displayed.

What would be your approach to achieving that? I've tried using onTapesture and onDragGesture to store the value attached to the item but that doesn't seem to be working.

Thanks for the help!

enter image description here

1 answer

  • answered 2022-04-01 02:29 Zak

    One way might be to use the selection property of a TabView, and tag each of the views inside the TabView with a .tag(index) where index is an int. You can then use a State variable bound to the selection property to know which view was selected.

    import SwiftUI
    
    struct SwiftUIView: View {
        
        @State var tabSelected = 0
        @State var weatherText = "is..."
        
        var body: some View {
            
            VStack {
                
                Spacer()
                
                Text("Weather: \(weatherText)")
                    .font(.largeTitle)
                    .bold()
                
                Spacer()
                
                TabView (selection: $tabSelected) {
    
                      // Add each of the carousel views, e.g.images
                      // First view in carousel
                    Image(systemName:"sun.max")
                        .resizable()
                        .scaledToFit()
                      .tag(1)
    
                    // Second view in carousel
                    Image(systemName:"cloud.rain")
                        .resizable()
                        .scaledToFit()
                      .tag(2)
                }
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic))
                .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
                
                Spacer()
                
                Button("GET WEATHER..") {
                    if(tabSelected == 1)
                    {
                        weatherText = "It's sunny"
                    }
                    else if(tabSelected == 2)
                    {
                        weatherText = "It's raining"
                    }
                }
                
                Spacer()
            }
           
        }
    }
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum