CODEWITHSUNDEEP
swiftui
simibac
simibac

Reputation: 8620

SwiftUI: Navigate from Sheet to a new View

How can I push a new View on the navigation stack from within a Sheet. I want to display a list of Lessons. When tabbing on one of the lessons, a sheet should open showing details about the lesson. From within the Sheet one should be able to start the lesson in a new fullscreen view.

import SwiftUI

struct ContentView: View {
    var lessons = [Lesson(id:"1"), Lesson(id:"2"), Lesson(id:"3"), Lesson(id:"4"), Lesson(id:"5"), Lesson(id:"6"), Lesson(id:"7"), Lesson(id:"8"), Lesson(id:"9")]

    var body: some View {
        NavigationView(){
            Form{
                List(lessons){ lesson in
                    LessonButton(lesson: lesson)
                }
            }
        }
    }
}

struct LessonButton:View{
    @State var showSheet = false
    var lesson:Lesson

    var body: some View {
        Button(action:{self.showSheet = true}){
            Text(lesson.name)
        }.sheet(isPresented:$showSheet){
            NavigationLink(destination: Text("reached")){
                Text("start")
            }
        }
    }
}


struct Lesson: Identifiable{
    var id:String
    var name: String{
        "Lesson \(self.id)"
    }
}

However the NavigationLink is not working. I guess, this is because the Sheet is not a ChildView of Content View. That's probably why it does not work. But how can it be achieved?

Upvotes: 9

Views: 8534

Answers (2)

Harry Scheuerle
Harry Scheuerle

Reputation: 456

A bit late, but this question came up while solving this. Your sheet acts like its own view controller stack. You can't navigate the parent through the sheet overlay, nor should you. It does seem like you're asking what I was looking for, which is to emulate other apple apps that navigate in sheets. You simply need an additional NavigationView within your sheet. This will give you a navigation stack to push other sheet styled views to the navigation controller within your first sheet.

(SwiftUI beginner, verbiage is likely wrong)

import SwiftUI

struct NavigateFromSheet: View {
    var lessons = [Lesson(id:"1"), Lesson(id:"2"), Lesson(id:"3"), Lesson(id:"4"), Lesson(id:"5"), Lesson(id:"6"), Lesson(id:"7"), Lesson(id:"8"), Lesson(id:"9")]

    var body: some View {
        NavigationView(){
            Form {
                List(lessons){ lesson in
                    LessonButton(lesson: lesson)
                }
            }
        }
    }
}

struct LessonButton:View{
    @State var showSheet = false
    var lesson:Lesson

    var body: some View {
        Button(action:{self.showSheet = true}){
            Text(lesson.name)
        }.sheet(isPresented: $showSheet){
            NavigationView {
                VStack {
                    Text("My First Sheet")
                    NavigationLink(destination: Text("reached")){
                        Text("My Second Sheet")
                    }
                }
            }
            
        }
    }
}


struct Lesson: Identifiable{
    var id:String
    var name: String{
        "Lesson \(self.id)"
    }
}

struct NavigateFromSheet_Previews: PreviewProvider {
    static var previews: some View {
        NavigateFromSheet()
    }
}

Upvotes: 6

Asperi
Asperi

Reputation: 258441

Sheet is modal view mode, you can enter in it and return back from it.

Actually I can't understand why do you need a sheet in described scenario. As you described it is expected:

List -> Details -> Lesson,

so use consequently two navigation links, one in List, one in Details. This is a native Apple design for NavigationView/NavigationLink usage - navigation from view to view.

Upvotes: 1

Related Questions