Search code examples
iosipadswiftui

How to show a view when tapping on a list item?

I am working with a list in SwiftUI, I am attempting to recreate a system I had with TableView whereby a user can tap a cell and then a new view is presented with data relating to said cell. Now we have lists my code has changed to the following:

                        List {
                            ForEach(clients, id: \.id) { client in
                                VStack(alignment: .center) {
                                    HStack{
                                        Text(client.firstName ?? "Unknown" + " ")
                                            .font(.system(size: 17))
                                            .foregroundColor(Color.init(hex: "47535B"))
                                            .fontWeight(.medium)
                                            .multilineTextAlignment(.leading)
                                            .padding(.leading)
                                        Text(client.lastName ?? "Unknown")
                                            .font(.system(size: 17))
                                            .foregroundColor(Color.init(hex: "47535B"))
                                            .fontWeight(.medium)
                                            .multilineTextAlignment(.leading)
                                        Spacer()
                                    }
                                }
                                .frame(height: 50.0)
                                .background(Color.init(hex: "F6F6F6"))
                                .cornerRadius(7.0)
                            }
                        }
                        .padding(.horizontal, 3.0)
                        .padding(.vertical, 115.0)
                        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)

I realise I can use a NavigationLink and place the entire thing into a NavigationView but this functionality is not what I want, below is an image of my interface. What I am trying to achieve is when the user taps a cell it presents the data in the space on the right where it says "Select a client to view their profile". With the NavigationView setup I can only use the 2 default styles neither of which are suitable for me since I cannot customise where the navigation view gets placed. Is there a way I can register the same tap but have my own custom system for displaying the resulting data where I want in my interface? Perhaps I am wrong about NavigationView or maybe there is a way to have the NavigationView be positioned entirely outside of the view that contains the item list?

enter image description here

Solution

  • If you don't want to or aren't using use a NavigationView, then you likely have both the client list and the client detail in the same view somewhere. I would try adding @State private var selectedClient: Client? = nil to whatever view has both the list and the detail.

    First, pass selectedClient as a binding to the list. Next, whenever one of the list items is tapped (achievable through .onTapGesture() or Button), Update selectedClient.

    In your detail view, accept a bindable Client? parameter. If it's nil, then just show your current Text view. If it's not nil, then build the detail UI.

    Hope this helps!