使用 SwiftUI 转到新视图

Question

我有一个使用 SwiftUI 的按钮的基本视图，我试图在点击按钮时呈现一个新的屏幕/视图。我该怎么做呢？我是否想为此视图创建一个委托，告诉应用程序的 SceneDelegate 呈现一个新的视图控制器？

import SwiftUI

struct ContentView : View {
    var body: some View {
        VStack {
            Text("Hello World")
            Button(action: {
                //go to another view
            }) {
                Text("Do Something")
                    .font(.largeTitle)
                    .fontWeight(.ultraLight)
            }
        }
    }
}

Answer 1

这并不是这里的最佳答案 - 如果您不想要导航栏，它是一种替代方法。请参阅下面的Jake's answer，了解使用NavigationView 和NavigationLink 执行此操作的常规方法。希望这仍然有用或为您指明正确的方向。

如果您只是想让NavigationLink 与Binding 一起使用，您可以使用与isActive 绑定参数相同的NavigationLink init。

^{不管怎样，回到答案上来……}

---

我为此做了一个视图修饰符。这也意味着没有导航栏。你可以这样称呼它：

.navigate(to: MainPageView(), when: $willMoveToNextScreen)

这可以附在任何东西上，所以我通常将它附在身体的末端，例如：

@State private var willMoveToNextScreen = false

var body: some View {
    VStack {
        /* ... */
    }
    .navigate(to: MainPageView(), when: $willMoveToNextScreen)
}

代码（记得import SwiftUI）：

extension View {
    /// Navigate to a new view.
    /// - Parameters:
    ///   - view: View to navigate to.
    ///   - binding: Only navigates when this condition is `true`.
    func navigate<NewView: View>(to view: NewView, when binding: Binding<Bool>) -> some View {
        NavigationView {
            ZStack {
                self
                    .navigationBarTitle("")
                    .navigationBarHidden(true)

                NavigationLink(
                    destination: view
                        .navigationBarTitle("")
                        .navigationBarHidden(true),
                    isActive: binding
                ) {
                    EmptyView()
                }
            }
        }
        .navigationViewStyle(.stack)
    }
}

Answer 2

关键是使用 NavigationView 和 NavigationLink：

import SwiftUI

struct ContentView : View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello World")
                NavigationLink(destination: DetailView()) {
                    Text("Do Something")
                }
            }
        }
    }
}

Answer 3

这是在不使用 NavigationView 的情况下呈现视图的另一种方法。这就像 UIKit 的UIModalPresentationStyle.currentContext。

struct PresenterButtonView: View {
var body: some View {
    PresentationButton(Text("Tap to present"),
                       destination: Text("Hello world"))
}}

Answer 4

如果不想想要显示 navigationView，您可以将其隐藏在目的地。

struct ContentViewA : View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello World")
                NavigationLink(destination: ContentViewB()) {
                    Text("Go To Next Step")
                }
            }
        }
    }
}



struct ContentViewB : View {
        var body: some View {
            NavigationView {
                VStack {
                    Text("Hello World B")

                }.navigationBarTitle("")
                .navigationBarHidden(true)
            }
        }
    }

或者如果您想根据条件隐藏它，您可以使用@State 来更改可见性。

Answer 5

现在我们可以使用 NavigationLink

---

文件 A：

struct ContentView: View {
var body: some View {
    NavigationView {
        VStack {
            Text("Hello World")
            NavigationLink(destination: secondView()) {
                Text("Hit Me!")
                    .fontWeight(.semibold)
                    .font(.title)
                    .padding()
                    .foregroundColor(.white)
                    .background(LinearGradient(gradient: Gradient(colors: [Color(.white),Color(.blue)]), startPoint: .leading, endPoint: .trailing))
                    .cornerRadius(40)
        }
      }
    }
  }
}

文件 B：

struct secondView: View {
var body: some View {
    VStack {
    VStack(alignment: .leading) {
        Text("Turtle Rock")
            .font(.title)
        HStack(alignment: .top) {
            Text("Joshua Tree National Park")
                .font(.subheadline)
            Spacer()
            Text("California")
                .font(.subheadline)
        }
    }
    .padding()
        Spacer()

    }
  }
}                                                                                                  

Answer 6

我认为这是最简单明了的方法。 在 UI 工具之后使用 fullScreenCover。

Button(action: {
         //code
         }){
           Text("Send")
         }.fullScreenCover(isPresented: self.$model.goToOtherView, content: {
                    OtherView()
                })

Answer 7

OP 已在此处多次回答，但我只是想通过显示视图 A 以及视图 B 也将使用的数据来演示 SwiftUI 的酷方面，您可以通过创建 @State 来传递数据视图 A 并在视图 B 中使用 @Binding 声明声明相同的变量

struct ViewA : View {
    @State var myItems: [Items]
    var body: some View {
        NavigationView {
            VStack {
                NavigationButton(destination: ViewB(items: $myItems)) {
                    Text("Go To ViewB")
                }
            }
        }
    }
}

struct ViewB : View {
    @Binding var myItems: [Items]
    var body: some View {
        NavigationView {
            List{
                ForEach(myItems.identified(by: \.self)) {
                    Text($0.itemName)
                }
            }.navigationBarTitle(Text("My Items"))
        }
    }
}

Answer 8

我认为 Jake 的回答是 NextView 的基本方式。

如果您真的需要按下按钮，我认为下面的方式是一种简单、正式和动态的尝试方式。根据Paul Hudson's Video，从 10'00" 到 12'00"。

（应该转到 12'00" 到 15'00"，如果您想通过点击不同的按钮转到不同的视图。） （应该转到 15'00" 到 16'00"，如果您想转到第二个视图并自动返回。）还有更多

这是代码示例。

import SwiftUI

struct ContentView: View {

    @State var areYouGoingToSecondView: Bool // Step 2

    var body: some View {
        NavigationView{ // Step 1

            VStack {

                // Step 3
                NavigationLink(destination: YourSecondView(), isActive: $areYouGoingToSecondView) { EmptyView() }


                Text("Hello World")

                Button(action: {
                    self.areYouGoingToSecondView = true // Step 4

                }) {
                    Text("Do Something (Go To Second View)")
                    .font(.largeTitle)
                    .fontWeight(.ultraLight)
                }
            }
        }
    }
}

Answer 9

您不能再使用 NavigationButton。相反，您应该使用 NavigationLink。

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: DetailView()) {
                Text("Push new screen")
            }
        }
    }
}

Answer 10

我们可以在 Navigation 中使用 Text 并使其像 Button http://g.recordit.co/CkIkjvikfu.gif

struct HomeContent: View {
    var body: some View {
        NavigationView{
            VStack {
                NavigationLink(
                destination: LoginContentView()) {
                    
                        
                           
                    Text("Login")
                        .font(.title)
                        .foregroundColor(Color.white)
                        .multilineTextAlignment(.center)
                        .frame(width: 300.0, height: 50.0)
                        .background(Color(UIColor.appLightBlue))
                   
                }
                
            }
        }
    }
}

Answer 11

要以编程方式导航到链接而不显示视觉元素，请使用隐藏的NavigationLink 覆盖您的一个视图。

在此示例中，UI 将在某些代码将 shouldNavigate 设置为 true 时进行导航：

struct ProgramaticSample {
    @State var shouldNavigate = false
    
    var body: some View {
        Text("Hello navigation")
            .overlay(NavigationLink(
                destination: DestinationScreen(),
                isActive: $shouldNavigate) {}
                .hidden())
    }
}

Answer 12

必须创建一个像 LandmarkDetail() 这样的 DetailView 并调用以 LandmarkDetail() 为目的地的 NavigationButton。现在详细视图已打开。

用于将值传递给详细屏幕的方法。通过发送如下代码。

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                NavigationButton(destination: LandmarkDetail()) {
                    LandmarkRow(landmark: landmark)
                }
            }
            .navigationBarTitle(Text("Landmarks"))
        }
    }
}