SwiftUI 如何在点击按钮时推送到下一个屏幕

Question

I can navigate to next screen by using NavigationButton (push) or present with PresentationButton (present) but i want to push when i tap on Buttton()

Button(action: {
// move to next screen
}) {
   Text("See More")
}

is there a way to do it?

Answer 1

You can do using NavigationLink

Note: Please try in real device. in simulator sometimes not work properly.

struct MasterView: View {
    @State var selection: Int? = nil

    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: DetailsView(), tag: 1, selection: $selection) {
                    Button("Press me") {
                        self.selection = 1
                    }
                }
            }
        }
    }
}

struct DetailsView: View {
    @Environment(\.presentationMode) var presentation

    var body: some View {
        Group {
            Button("Go Back") {
                self.presentation.wrappedValue.dismiss()
            }
        }
    }
}

Answer 2

As you can see to display the new view, add the NavigationLink with isActive: $pushView using <.hidden()> to hide the navigation "arrow".

Next add Text("See More") with tapGesture to make the text respond to taps. The variable pushView will change (false => true) when you click "See More" text.

import SwiftUI

struct ContentView: View {

    @State var pushView = false

    var body: some View {
        NavigationView {

            List {
                HStack{
                    Text("test")
                    Spacer()
                    NavigationLink(destination: NewView(), isActive: $pushView) {
                        Text("")
                    }.hidden()
                        .navigationBarTitle(self.pushView ? "New view" : "default view")
                    Text("See More")
                        .padding(.trailing)
                        .foregroundColor(Color.blue)
                        .onTapGesture {
                            self.pushView.toggle()
                    }
                }
            }
        }
    }
}

struct NewView: View {

    var body: some View {
        Text("New View")
    }
}

ContentView picture

NewView picture

Answer 3

You can use NavigationLink to implement this:

struct DetailsView: View {
    var body: some View {
        VStack {
            Text("Hello world")
        }
    }
}

struct ContentView: View {
    @State var selection: Int? = nil
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: DetailsView(), tag: 1, selection: $selection) {
                    Button("Press me") {
                        self.selection = 1
                    }
                }
            }
        }
    }
}

Answer 4

To tap on button and navigate to next screen,You can use NavigationLink like below

NavigationView{
       NavigationLink(destination: SecondView()) {
             Text("Login")
              .padding(.all, 5)
              .frame(minWidth: 0, maxWidth: .infinity,maxHeight: 45, alignment: .center)
              .foregroundColor(Color.white)
       }
 }

Answer 5

You need to use navigationBarBackButtonHidden by setting it true in your destination View like this below :-

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationButton(destination: DetailView()) {
                Text("Click Me")
            }.navigationBarTitle(Text("Header"))             }
    }
}
struct DetailView: View {
    var body: some View {
        Text("Detail View")
        .navigationBarBackButtonHidden(true) //This will hide your back arrow button

    }
}