CODEWITHSUNDEEP
swiftswiftui
Damiano Miazzi
Damiano Miazzi

Reputation: 2335

Button, how to open a new View in swiftUI embedded in navigation bar

I embedded a button on on the NavigationBar. I'm try to make button to open a new View called DetailView

I try to use NavigationLink but it does't work inside a button.

import SwiftUI

struct ContentView: View {

    @ObservedObject var dm: DataManager

    @State var isAddPresented = false
    var body: some View {
        NavigationView {
            HStack {
                List () {
                    ForEach (dm.storage) { data in
                        StileCella(dm2: data)
                    }
                }
                .navigationBarTitle("Lista Rubrica")
                .navigationBarItems(trailing: Button(action: {
                        self.isAddPresented = true
                   // Load here the DetailView??? How??
                        DetailView()
                    }) {
                        Text("Button")
                    })
            }
        }
    }
}



struct DetailView: View {

    var body: some View {
        VStack(alignment: .center) {
            Text("CIAO").bold()
            Spacer()
            Image(systemName: "star")
                .resizable()
        }
    }
}

Upvotes: 2

Views: 4294

Answers (2)

Tul
Tul

Reputation: 159

If you want to open a new view just like we used to open through storyboard other than sheet, you can update the code in the following way:

import SwiftUI

struct ContentView: View {

    @ObservedObject var dm: DataManager

    @State var isAddPresented = false
    var body: some View {
        NavigationView {
            HStack {
                List () {
                    ForEach (dm.storage) { data in
                        StileCella(dm2: data)
                    }
                }
                .navigationBarTitle("Lista Rubrica")
                .navigationBarItems(leading:
                    NavigationLink(destination: DetailView()) {
                    Text("Button")
                })
            }
        }
    }
}



struct DetailView: View {

    var body: some View {
        VStack(alignment: .center) {
            Text("CIAO").bold()
            Spacer()
            Image(systemName: "star")
                .resizable()
        }
    }
}

Instead of button, simply add NavigationLink inside navigationBarItems. This would do the trick! I wrote the complete for guidance but main change point is, I used 

.navigationBarItems(leading:
      NavigationLink(destination: DetailView()) {
           Text("Button")
      })

instead of:

.navigationBarItems(trailing: Button(action: {
     self.isAddPresented = true
      // Load here the DetailView??? How??
         DetailView()
     }) {
            Text("Button")
     })

Upvotes: 2

LuLuGaGa
LuLuGaGa

Reputation: 14418

You just need to add a sheet modifier to your view, which presents your view depending on the value of isAddPresented, just like this:

struct ContentView: View {

    @State var isAddPresented = false

    var body: some View {
        NavigationView {
            List(dm.storage){ data in
                StileCella(dm2: data)
            }
            .navigationBarTitle("Lista Rubrica")
            .navigationBarItems(trailing: Button("Button") {
                self.isAddPresented = true
            })
        }   .sheet(isPresented: $isAddPresented,
                   onDismiss: { self.isAddPresented = false }) {
                        DetailView()
                    }
    }
}

The important bit is to remember to set isAddPresented back to false in on dismiss to prevent it form presenting again.

Upvotes: 3

Related Questions