How do I use NavigationLink for MacOS app? - swift

Question

I am new to Swift for a macOS app and I don't understand how to make NavigationLink work to go to a new view. For example, I made a Sign In view and want to make a button that leads to a Sign Up view. Would I use NavigationLink so that the app can change to a different view? Is there an alternative to NavigationLinK? I tried to use NavigationLink, but the button was greyed out and I could not click it.
Here is what I tried:
HStack{
Text("Don't have an account yet?")
.foregroundColor(.gray)
}
.padding(.top, 10)
NavigationLink("Create Account", destination:SignUpView())
}
Here is my SignUp view:
struct SignUpView: View {
var screen=NSScreen.main?.visibleFrame
//email and password fields
#State var email=""
#State var password=""
#State var keepLogged=false
#EnvironmentObject var viewModel: AppViewModel
//alert
#State var alert = false
var body: some View {
HStack(spacing:0){
VStack{
Spacer(minLength:0)
Image("logo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width:100, height:100)
Text("The Organized Cook")
.font(.largeTitle)
.fontWeight(.heavy)
.foregroundColor(.black)
.padding(.vertical, 10)
Group{
//Email
TextField("Email", text:$email)
.textFieldStyle(PlainTextFieldStyle())
.padding(.vertical, 10)
.padding(.horizontal)
//Borders
.background(RoundedRectangle(cornerRadius:2).stroke(Color.gray.opacity(0.7), lineWidth:1))
//password
SecureField("Password", text:$password)
.textFieldStyle(PlainTextFieldStyle())
.padding(.vertical,10)
.padding(.horizontal)
//Borders
.background(RoundedRectangle(cornerRadius:2).stroke(Color.gray.opacity(0.7), lineWidth:1))
.padding(.vertical)
//keep login and forget password
HStack{
Toggle("", isOn: $keepLogged)
.labelsHidden()
.toggleStyle(CheckboxToggleStyle())
Text("Stay Logged In")
.foregroundColor(.black)
Spacer(minLength:0)
Button(action: {}, label: {
Text("Forget Password")
.foregroundColor(.black)
.underline(true,color:Color.black)
})
.buttonStyle(PlainButtonStyle())
}
// log in
Button(action: {alert.toggle()
guard !email.isEmpty, !password.isEmpty else{
return
}
viewModel.signUp(email: email, password: password)
}, label: {
HStack{
Spacer()
Text("Sign up")
Spacer()
Image(systemName: "arrow.right")
}
.foregroundColor(.white)
.padding(.vertical, 10)
.padding(.horizontal)
.background(Color("test"))
.cornerRadius(2)
})
.buttonStyle(PlainButtonStyle())
.padding(.top)
//sign up
HStack{
Text("Already have an account?")
.foregroundColor(.gray)
Button(action: {}, label: {
Text("Sign in")
.foregroundColor(.blue)
.underline(true,color:Color.black)
})
.buttonStyle(PlainButtonStyle())
}
.padding(.top, 10)
}
Spacer(minLength:0)
}
//white half of signup
.padding(.horizontal, 50)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.white)
//always light mode
.preferredColorScheme(.light)
.alert(isPresented: $alert, content: {
Alert(title: Text("Message"), message: Text("Logged Successfully"), dismissButton: .destructive(Text("Ok")))
})
VStack{
Spacer()
}
.frame(width: (screen!.width / 1.8) / 2)
.background(Color("test"))
}
.ignoresSafeArea(.all, edges: .all)
.frame(width: screen!.width / 1.8, height: screen!.height - 100)
}
}

Answer 1

A NavigationLink only works inside a NavigationView.
Somewhere in the view hierarchy above the navigation link make sure you have a NavigationView.
An example of this:
NavigationView{
...
HStack{
Text("Don't have an account yet?")
.foregroundColor(.gray)
}
.padding(.top, 10)
NavigationLink("Create Account", destination:SignUpView())
}
...
}