Krish
Krish

Reputation: 119

Display a new view when i select a tab in the picker

I have a picker with 3 values. How to display some information based on the selection of the picker tab?

@State var tabSelectedValue = 0

var body: some View{
    
    VStack {
        Picker(selection: $tabSelectedValue, label: Text("")) {
            Text("A").tag(0)
            Text("B").tag(1)
            Text("C").tag(2)
            
        }.pickerStyle(SegmentedPickerStyle())
    }
    
}

Upvotes: 2

Views: 1325

Answers (2)

YodagamaHeshan
YodagamaHeshan

Reputation: 6500

@State var tabSelectedValue = 0
    var yourData = ["one", "Two", "Three"]

    var body: some View{
        
        VStack {
            Text("\(yourData[tabSelectedValue])")
            Picker(selection: $tabSelectedValue, label: Text("")) {
                Text("A").tag(0)
                Text("B").tag(1)
                Text("C").tag(2)
                
            }.pickerStyle(SegmentedPickerStyle())
        }
        
    }

Or you may use with TabView together,

struct ContentView: View {
    @State var tabSelectedValue = 0
    
    var body: some View{
        
        VStack {
            Picker(selection: $tabSelectedValue, label: Text("")) {
                Text("A").tag(0)
                Text("B").tag(1)
                Text("C").tag(2)
                
            }.pickerStyle(SegmentedPickerStyle())
            
            TabView(selection: $tabSelectedValue,
                    content:  {
                        Text("A Tab Content").tag(0)
                        Text("B Tab Content").tag(1)
                        Text("C Tab Content").tag(2)
                    })
                .tabViewStyle(PageTabViewStyle())
        }
    }
    
}

enter image description here

Upvotes: 3

Raja Kishan
Raja Kishan

Reputation: 18904

struct PickerDataView: View {
    var data: String
    
    var body: some View {
        Text("Picker Date \(data)")
    }
}

struct ContentView: View {
    @State private var tabSelectedValue = 0
    
    private var pickerData: [String] = ["A", "B", "C"]
    
    var body: some View {
        VStack {
            
            PickerDataView(data: "\(pickerData[tabSelectedValue])")

            Picker(selection: $tabSelectedValue, label: Text("")) {
                ForEach(0 ..< pickerData.count) {
                    Text(pickerData[$0]).tag($0)
                }
                
            }.pickerStyle(SegmentedPickerStyle())
        }
    }
}

Upvotes: -1

Related Questions