按下按钮显示新的SwiftUI视图

Question

我希望我的应用中有一个使用SwiftUI的登录表单。 我有两个按钮：登录和注册。 我想能够按下注册按钮，使我创建的新SwiftUI视图出现/替换其他视图。 这是我的按钮代码：

        let signupButton = Color(red: 103.0/255.0, green: 104.0/255.0, blue: 255.0/255.0)

        let text : String

    var body: some View {

        Button(action: {
        }) {
            Text(text)
                .accentColor(.white)
          //      .frame(minWidth: 0, maxWidth: 300)
                .frame(width: 200)
                .padding()
                .background(signupButton)
                .cornerRadius(10)
                .padding()
        }
    }
}

然后是我的登录页面：

    struct LoginPage: View {

    let appVersion = Bundle.main.infoDictionary?["CFBundleShortVersionString"] as? String

    let textFieldBackground = Color(red: 240.0/255.0, green: 240.0/255.0, blue: 240.0/255.0)

    let textFieldBorder = Color(red: 112.0/255.0, green: 112.0/255.0, blue: 112.0/255.0)

    let signupButton = Color(red: 103.0/255.0, green: 104.0/255.0, blue: 255.0/255.0)

    var body: some View {
        NavigationView {
                Text("Don't have an account?")
                    .fontWeight(.light)
                NavigationLink(destination: SignupPage()) {
                    ActionButton(text: "sign up")
                }

                }
            .navigationBarTitle(Text("Signin")
            .foregroundColor(Color.black))
            }

                }
    }

问题是，当我按下按钮时，注册页面没有显示出来。我已经设计好了一个名为SignupPage()的页面，并且引用也正确。我不知道这是否是一个错误，还是我做错了什么。

- user7817604

---

下次您发布代码时，请确保正确格式化。有几个错误，包括在我猜测是您的 ActionButton 视图中缺少一行，还有不平衡的括号。 - kontiki

Answer 1

NavigationLink 已经具备按钮的功能，无需使用 Button。如果您使用了它，您需要为其定义一个动作。以下是修复方法：

struct LoginPage: View {

    let appVersion = Bundle.main.infoDictionary?["CFBundleShortVersionString"] as? String

    let textFieldBackground = Color(red: 240.0/255.0, green: 240.0/255.0, blue: 240.0/255.0)

    let textFieldBorder = Color(red: 112.0/255.0, green: 112.0/255.0, blue: 112.0/255.0)

    let signupButton = Color(red: 103.0/255.0, green: 104.0/255.0, blue: 255.0/255.0)

    var body: some View {
        NavigationView {
            VStack {
                Text("Don't have an account?")
                    .fontWeight(.light)
                NavigationLink(destination: SignupPage()) {
                    ActionButton(text: "sign up")
                }
            }
        }
        .navigationBarTitle(Text("Signin")
        .foregroundColor(Color.black))
    }

}

struct SignupPage: View {
    var body: some View {
        Text("Signup page placeholder")
    }
}

struct ActionButton: View {
    let signupButton = Color(red: 103.0/255.0, green: 104.0/255.0, blue: 255.0/255.0)

    let text : String

    var body: some View {

        Text(text)
            .accentColor(.white)
            //      .frame(minWidth: 0, maxWidth: 300)
            .frame(width: 200)
            .padding()
            .background(signupButton)
            .cornerRadius(10)
            .padding()
    }
}

- kontiki

---

你可以使用一个按钮，但是你需要将一个布尔值绑定到你的 NavigationLink 的 isPresented 属性上，并且当你在按钮上点击后，在它的 action 里将这个变量设置为 true。 - Guilherme Flores

Answer 2

如果您需要在导航到另一个视图之前使用按钮并具有某种行为，则可以使用以下代码：

struct FooView: View {
     @State private var presentView = false

     var body: some View {
         NavigationLink(destination: AnotherView(), isActive: self.$presentView) {
             Button(action: {
                 //do something here
                 self.presentView = true
             }) {
                 Text("Navigate!")
                     .frame(width: 100, height: 200)
             }
         }
     }
}

- Guilherme Flores