UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

SOLVED: Can I have multiple navigation destinations in a SwiftUI Navigation Stack?

Forums > SwiftUI

My app (a restauraunt rating system) has a list if items within a navigation stack that has a destination link to edit the information (via sheet) for a particular restauraunt based on the user tapping on the item in the list. Rather basic. The list also has an image that I'd like to have go to another view and, most importantly, send the that image to the new view to allow the user the ability to see the image full screen.

Any resources to solve my problem are greatly appreciated. I'm having trouble finding anyting online that addresses my sepecific challenge.

Thanks.

2      

Not sure if this is exactly the way you want it to be. But, as far as I understood you want your row to open two different sheets depending on what was tapped, either image or text. If this is so, maybe this approach will solve your challenge. Observable object is used so that to have easy access without passing around properties down...

@Observable
class RestaurantModel {
    var restaurants = [Restaurant]()

    // Launches Restaurant Image View
    var isShowingImage = false
    // Launches Retaurant Details View
    var isShowingDetails = false
    // Monitors which restaurant is selected
    var selected: Restaurant?

    init() {
        fetchData()
    }

    // Mock Data
    func fetchData() {
        for item in 1...30 {
            let newRestaurant = Restaurant(name: "Restaurant \(item)", imageName: "\(item).square")
            restaurants.append(newRestaurant)
        }
    }
}

struct ContentView: View {
    // Initializing observable object
    @State private var vm = RestaurantModel()

    var body: some View {
        ZStack {
            NavigationStack {
                List {
                    ForEach(vm.restaurants) { restaurant in
                        RestaurantCellView(restaurant: restaurant)
                    }
                }
                .sheet(isPresented: $vm.isShowingDetails) {
                    RestaurantDetailView()
                }
                .sheet(isPresented: $vm.isShowingImage) {
                    RestaurantImageView()
                }
            }
        }
        // injecting the object into environment to have access in subviews
        .environment(vm)
    }
}

// Model
struct Restaurant: Identifiable, Hashable {
    let id = UUID()
    var name: String
    var imageName: String
}

struct RestaurantCellView: View {
    @Environment(RestaurantModel.self) var vm: RestaurantModel
    let restaurant: Restaurant

    var body: some View {
        HStack(spacing: 20) {
            Image(systemName: restaurant.imageName)
                .resizable()
                .scaledToFit()
                .frame(width: 44, height: 44)
                .onTapGesture {
                    vm.isShowingImage.toggle()
                    vm.selected = restaurant
                }
            // HStack and content shape is necessary to make the row tappable and not only text
            HStack {
                Text(restaurant.name)
                    .font(.title2)
                Spacer()
            }
            .contentShape(Rectangle())
            .onTapGesture {
                vm.selected = restaurant
                vm.isShowingDetails.toggle()
            }
        }
    }
}

struct RestaurantImageView: View {
    @Environment(RestaurantModel.self) var vm: RestaurantModel

    var body: some View {
        Image(systemName: vm.selected?.imageName ?? "photo.fill")
            .resizable()
            .scaledToFit()
            .padding()
    }
}

struct RestaurantDetailView: View {
    @Environment(RestaurantModel.self) var vm: RestaurantModel

    var body: some View {
        Text(vm.selected?.name ?? "No name")
            .font(.largeTitle)
    }
}

3      

Thank you. This will be a great help.

2      

Also modifying slightly previous code, you may change it so something like in pic. As you can see, tapping on image opens image fullscreen, and tapping on body of the cell leads to sheet where you can update info. If necessary I can share the code.

2      

Hacking with Swift is sponsored by Essential Developer

SPONSORED Join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer! Hurry up because it'll be available only until April 28th.

Click to save your free spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.