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

Question

我可以使用NavigationButton（推送）或PresentationButton（呈现）导航到下一个屏幕，但我想在点击按钮时进行推送。

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

有没有办法做到这一点？

- Keshav

---

SwiftUI中，你只能使用两个选项来导航：使用NavigateButton（push）或者使用PresentationButton进行呈现。 - Anbu.Karthik

那么，使用NavigateButton时是否有隐藏箭头的方法？我只想显示“查看更多”文本，点击后应该推到下一个屏幕。 - Keshav

Answer 1

你可以使用NavigationLink

注意: 请在真实设备上尝试，模拟器有时会出现问题。

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()
            }
        }
    }
}

- Rohit Makwana

Answer 2

如您所见，要显示新视图，请添加带有isActive: $pushView的NavigationLink，并使用<.hidden()>隐藏导航箭头。

接下来，添加tapGesture的Text("See More")使文本响应点击。当您点击"See More"文本时，变量pushView将更改（false => true）。

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")
    }
}

查看内容图片

新建视图图片

- qwqqw wuu

---

你能否解释一下你所做的事情，而不只是发布你的代码？ - csabinho

正如您所看到的，要显示新视图，请使用“NavigationLink”和“isActive：$pushView”。但是使用<.hidden（）>不会显示导航“箭头”。然后添加Text（“查看更多”），并使用tapGesture单击类似按钮。当您单击“查看更多”文本时，变量“pushView”将更改（false => true）。 - qwqqw wuu

Answer 3

为了点击按钮并导航到下一个屏幕，您可以像下面这样使用NavigationLink。

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

- Dhara Patel

Answer 4

你可以使用NavigationLink来实现这个功能：

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
                    }
                }
            }
        }
    }
}

- Jaylon