open row from List located on second TabItem from first TabItem

Dmitrii Bakulin

I have got two tabItems in TabView with FirstScreen and PlacesScreen. FirstScreen contains picker with items located in array in the model PlacesViewModel. The same model is used for the list from the second tabItem on PlacesScreen. By choosing a particular item in picker and pressing button, I have to open the second tabItem and open a particular row in the list on PlacesScreen. I have figured out how to open the second tabItem but stuck with opening a particular row.

The first screen code with picker and button:

struct FirstScreen: View {
        
        @EnvironmentObject var placesViewModel: PlacesViewModel
        @State var placeChoice = 0
        @Binding var tabSelection: Int
        
        var body: some View {
            NavigationView {
                Form {
                    VStack {
                        Picker("Places", selection: $placeChoice) {
                            ForEach(0 ..< placesViewModel.places.count) { index in
                                Text(placesViewModel.places[index].name)
                                    .tag(index)
                            }
                        }.pickerStyle(WheelPickerStyle())
                        
                        Button {
                            tabSelection = 1
                        } label: {
                            Text("Show place")
                                .font(.system(size: 20))
                                .padding()
                                .foregroundColor(.white)
                                .background(Color.blue)
                                .cornerRadius(8)
                        }
                    }
                    
                }
                .navigationTitle("First Screen")
            }
            
        }
    }
    
    struct FirstScreen_Previews: PreviewProvider {
        static var previews: some View {
            FirstScreen(tabSelection: .constant(0))
        }
    }

The second screen with a List:

struct PlacesScreen: View {
    var body: some View {
        PlacesList()
    }
}

struct PlacesScreen_Previews: PreviewProvider {
    static var previews: some View {
        PlacesScreen()
    }
}

struct PlacesList: View {
    
    @EnvironmentObject var placesViewModel: PlacesViewModel
    
    var body: some View {
        NavigationView {
            List(placesViewModel.places) { place in
                NavigationLink {
                    PlaceScreen(place: place)
                } label: {
                    HStack {
                        place.image
                            .resizable()
                            .frame(width: 50, height: 50)
                        Text(place.name)
                        
                        Spacer()
                    }
                }
                
            }
            .navigationTitle(placesViewModel.title)
        }
        
    }
}

struct PlacesList_Previews: PreviewProvider {
    static var previews: some View {
        PlacesList()
    }
}

Here is the TabView code:

struct ContentView: View {
    
    @State var tabSelection: Int = 0
    
    var body: some View {
        
        TabView(selection: $tabSelection) {
            FirstScreen(tabSelection: tabSelection)
                .tag(0)
                .tabItem {
                    Label("First Screen", systemImage: "list.bullet.rectangle")
                }
            
            PlacesScreen()
                .tag(1)
                .tabItem {
                    Label("Places", systemImage: "tray.2.fill")
                }
          
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Thank you in advance for your help!

ChrisR

You can use NavigationLink(tag: selection:). Here is a fully functional demo based on your code.

struct ContentView: View {
    
    @State var placeChoice: String?
    @State private var tabSelection: Int = 0
    
    var body: some View {
        TabView(selection: $tabSelection) {
            FirstScreen(placeChoice: $placeChoice, tabSelection: $tabSelection)
                .tabItem {
                    Label("One", systemImage: "mappin.circle.fill")
                }
                .tag(0)

            PlacesList(placeChoice: $placeChoice)
                .tabItem {
                    Label("Two", systemImage: "mappin.circle.fill")
                }
                .tag(1)
        }
    }
}


let places = ["Paris", "Rome", "Berlin", "London", "Madrid", "Oslo"]


struct FirstScreen: View {
    
    @Binding var placeChoice: String?
    @Binding var tabSelection: Int
    
    @State private var pickerChoice: String = "Rome"
    
    var body: some View {
        NavigationView {
            Form {
                VStack {
                    Picker("Places", selection: $pickerChoice) {
                        ForEach(places, id: \.self) { place in
                            Text(place)
                                .tag(place)
                        }
                    }
//                    .pickerStyle(.segmented)
                    .pickerStyle(WheelPickerStyle())
                    
                    Button {
                        placeChoice = pickerChoice
                        tabSelection = 1
                        print("*******", placeChoice)
                    } label: {
                        Text("Show place")
                            .font(.system(size: 20))
                            .padding()
                            .foregroundColor(.white)
                            .background(Color.blue)
                            .cornerRadius(8)
                    }
                }
                
            }
            .navigationTitle("First Screen")
        }
        
    }
}


struct PlacesList: View {

    @Binding var placeChoice: String?

    var body: some View {
        NavigationView {
            List {
                ForEach(places, id: \.self) { place in
                    NavigationLink(tag: place, selection: $placeChoice) {
                        //PlaceScreen(place: place)
                        Text("Detail screen \(place)")
                    } label: {
                        HStack {
                            //place.image
                            Image("image")
                                .resizable()
                                .frame(width: 50, height: 50)
                            Text(place)

                            Spacer()
                        }
                    }
                }
            }
            .navigationTitle("Places")
        }

    }
}

And this is the version using the new iOS16 NavigationStack:

struct ContentView: View {

    // iOS16 Navigation Path
    @State private var navPath: [String] = []
    @State private var tabSelection: Int = 0
    
    var body: some View {
        TabView(selection: $tabSelection) {
            FirstScreen(navPath: $navPath, tabSelection: $tabSelection)
                .tabItem {
                    Label("One", systemImage: "mappin.circle.fill")
                }
                .tag(0)

            PlacesList(navPath: $navPath)
                .tabItem {
                    Label("Two", systemImage: "mappin.circle.fill")
                }
                .tag(1)
        }
    }
}


let places = ["Paris", "Rome", "Berlin", "London", "Madrid", "Oslo"]


struct FirstScreen: View {
    
    @Binding var navPath: [String]
    @Binding var tabSelection: Int
    
    @State private var pickerChoice: String = "Rome"
    
    var body: some View {
        NavigationStack {
            Form {
                VStack {
                    Picker("Places", selection: $pickerChoice) {
                        ForEach(places, id: \.self) { place in
                            Text(place)
                                .tag(place)
                        }
                    }
                    .pickerStyle(WheelPickerStyle())
                    
                    Button {
                        navPath = [pickerChoice]
                        tabSelection = 1
                        print("*******", navPath)
                    } label: {
                        Text("Show place")
                            .font(.system(size: 20))
                            .padding()
                            .foregroundColor(.white)
                            .background(Color.blue)
                            .cornerRadius(8)
                    }
                }
                
            }
            .navigationTitle("First Screen")
        }
        
    }
}


struct PlacesList: View {

    @Binding var navPath: [String]
    
    var body: some View {
        NavigationStack(path: $navPath) {
            List {
                ForEach(places, id: \.self) { place in
                    NavigationLink(value: place) {
                        HStack {
                            //place.image
                            Image("image")
                                .resizable()
                                .frame(width: 50, height: 50)
                            Text(place)

                            Spacer()
                        }
                    }
                }
            }
            .navigationTitle("Places")
            .navigationDestination(for: String.self) { place in
                Text("Detail screen \(place)")
            }
        }

    }
}

ADDED: Version with model as EnvironmentObject

class ViewModel: ObservableObject {
    @Published var navPath: [String] = []
    @Published var tabSelection: Int = 0
    
    @Published var places = ["Paris", "Rome", "Berlin", "London", "Madrid", "Oslo"]
}


struct ContentView: View {

    @StateObject var vm = ViewModel()
        
    var body: some View {
        TabView(selection: $vm.tabSelection) {
            FirstScreen()
                .tabItem {
                    Label("Selection", systemImage: "mappin.circle.fill")
                }
                .tag(0)

            PlacesList()
                .tabItem {
                    Label("Places", systemImage: "tray.2.fill")
                }
                .tag(1)
        }
        .environmentObject(vm)
    }
}


struct FirstScreen: View {
    
    @EnvironmentObject var vm: ViewModel
    
    @State private var pickerChoice: String = "Rome"
    
    var body: some View {
        NavigationStack {
            Form {
                VStack {
                    Picker("Places", selection: $pickerChoice) {
                        ForEach(vm.places, id: \.self) { place in
                            Text(place)
                                .tag(place)
                        }
                    }
                    .pickerStyle(WheelPickerStyle())
                    
                    Button {
                        vm.navPath = [pickerChoice]
                        vm.tabSelection = 1
                    } label: {
                        Text("Show place")
                            .font(.system(size: 20))
                            .padding()
                            .foregroundColor(.white)
                            .background(Color.blue)
                            .cornerRadius(8)
                    }
                }
                
            }
            .navigationTitle("First Screen")
        }
        
    }
}


struct PlacesList: View {

    @EnvironmentObject var vm: ViewModel

    var body: some View {
        NavigationStack(path: $vm.navPath) {
            List {
                ForEach(vm.places, id: \.self) { place in
                    NavigationLink(value: place) {
                        HStack {
                            //place.image
                            Image("image")
                                .resizable()
                                .frame(width: 50, height: 50)
                            Text(place)

                            Spacer()
                        }
                    }
                }
            }
            .navigationTitle("Places")
            .navigationDestination(for: String.self) { place in
                Text("Detail screen \(place)")
            }
        }

    }
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2022-07-20

Comments

0 comments

Prev: How can I sort keys and values in Map in Javascript

Can only iterate controls from first TabItem of a TabControl

open row from List located on second TabItem from first TabItem

open row from List located on second TabItem from first TabItem

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

pump.io port in URL

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Unable to use switch toggle for dark mode in material-ui

grouping by column variables and appending a new variable based on condition

BigQuery - concatenate ignoring NULL

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

Python Read Directory And Output to CSV

Remove adjacent duplicates in linked list in C

Angular 8. Unknown amount of http.get requests in array to call, must be sequential, what to use

How to keep curl session alive between two php processes?

Limit number of characters in uitextview

JMeter: Why get error when try to save test plan

Always setting the text cursor on Textbox

MTKView Displaying Wide Gamut P3 Colorspace

Vector input in shiny R and then use it

How to implement an authentication method using Spring Boot and JPA?

Laravel getting value from another table using eloquent

org.springframework.web.client.HttpClientErrorException: 401 null

When I click any button in my view page the form is submitted