NavigationView{
VStack (spacing: -3){
UserImage()
Spacer()
VStack(spacing:50){
Version()
VStack( spacing:25){
VStack(alignment: .leading, spacing:10){
TextField("Username", text:$username)
.font(Font.custom("Quicksand-SemiBold",size: 16))
Line()
}
.padding([.leading, .trailing])
VStack(alignment: .leading, spacing:10){
SecureField("Password", text:$password)
.font(Font.custom("Quicksand-SemiBold",size: 16))
Line()
}
.padding([.leading, .trailing])
// NavigationLink(destination: HomeScreen(), tag: 1, selection: $selection) {
Button(action: {print("Button Tapped")}){
SigninButtonContent()
}
// }
HStack(spacing: 5){
Text("If you are new to AT Broadband")
.font(.subheadline)
.fontWeight(.regular)
.frame(width: 225)
Button(action: /*#START_MENU_TOKEN#*/{}/*#END_MENU_TOKEN#*/, label: {
TapHere()
})
}
Spacer()
}
.padding(.horizontal, 50)
}
//Suzhiyam Card
VStack{
HStack{
CardView()
Spacer()
}
.padding(.bottom)
}
}
.navigationBarHidden(true)
}
}
}
struct SigninButtonContent: View {
let login = HomeScreen()
var body: some View {
HStack{
NavigationLink(destination: HomeScreen()) {
Text("SIGN IN")
.font(.headline)
.foregroundColor(Color.white)
.padding()
.frame(width: 100.0, height: 40.0)
.background(/*#START_MENU_TOKEN#*//*#PLACEHOLDER=View#*/Color(red: 0.931, green: 0.213, blue: 0.228)/*#END_MENU_TOKEN#*/)
.cornerRadius(35.0)
.shadow(radius: 2,x:0,y: 3 )
}
}
}
}
This was my login screen code i have some doubts in NavigationView for screens.
I have custom back button to use, so i used
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
Still no use back button was still there.This is my login screen, After clicking Sign In button it Navigated to Home Screen
struct HomeScreen: View {
var body: some View {
NavigationView{
ScrollView{
ZStack{
lightGreyColor
.edgesIgnoringSafeArea(.all)
VStack{
ZStack{
VStack(spacing: -90){
Image("OnePlus-6")
.resizable()
.aspectRatio(CGSize(width: 19, height: 9), contentMode: /*#START_MENU_TOKEN#*/.fill/*#END_MENU_TOKEN#*/)
.frame(width: 340, height: 190)
.edgesIgnoringSafeArea(.top)
.overlay(RectangleTest())
VStack{
PlanCard()
}
}
}
VStack{
CustomerContact()
}
VStack(spacing:15){
VStack{
HStack{
InfoCard()
}
}
VStack{
HStack{
ScreenCard()
}
}
VStack{
HStack{
InfoCard2()
}
}
}
}
}
}
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
Spacer()
}
}
}
This is my Home Screen Code
HomeScreen Image
And this was the problem, if i use navigation in HomeScreen this default back arrow appears, when NavigationView is not in HomeScreen then it looks good in live preview, but i need to Navigate buttons in Home screen so i need to use NavigationView in Home screen. What else i can do to connect other Screens.
And i am a beginner, I need help to finish this project
Related
I want to display a pop-up in my view, where I will be able to display a menu where I can choose how I fell, then it will show what I have chosen and close itself. If I am adding it to the view and it's presenting It shows wrong and Tab Bar does not disappear. Can someone provide a better way to show a pop-up over Tab Bar? The logic is something like this: button pressed -> shows pop-up -> choose status -> shows another pop-up -> disappears.
Code's provided below:
// Smile face that used in question
struct SmileFace: View {
var text: String
var image: String
#Binding var current: String
var body: some View {
Button {
withAnimation {
current = text
}
} label: {
VStack {
Image(image)
.resizable()
.scaledToFill()
.frame(width: 46, height: 46)
Text(text)
.foregroundColor(.white)
}
}
}
}
// Check in answer view
import SwiftUI
struct CheckInAskView: View {
let didClose: () -> Void
var didChose: Bool = false
#State var current: String
var emotions = [
"GREAT" : "good",
"GOOD" : "happy",
"OK" : "moderate",
"BAD" : "sad",
"TERRIBLE" : "verysad"
]
var body: some View {
VStack {
ZStack(alignment: .topLeading) {
Rectangle()
.fill(Color("navigation"))
.cornerRadius(15)
.frame(height: 601)
HStack(alignment: .top) {
ZStack(alignment: .top) {
Circle()
.fill(Color(red: 0.682, green: 0.384, blue: 0.486).opacity(0.10))
.frame(width: 173)
.offset(x: -173/2, y: -90/2)
.clipped()
}
Spacer()
Button {
didClose()
} label: {
ZStack {
Circle()
.fill(Color(red: 0.933, green: 0.933, blue: 0.933).opacity(0.30))
.frame(width: 24)
.clipped()
Image(systemName: "xmark")
.font(.system(size: 15))
.foregroundColor(Color(red: 0.762, green: 0.762, blue: 0.762))
}
.padding(10)
}
}
VStack(alignment: .center) {
Spacer()
Text("How do you feel now?")
.foregroundColor(.white)
.font(.custom("Manrope-Bold", size: 16))
HStack(spacing: 35) {
SmileFace(text: "GOOD", image: "good", current: $current)
}
.padding(.horizontal)
DoubleTextView(topText: "Recommendation for you", buttomText: "We have selected courses based on your goals and \nexperience", topTextSize: 16, buttomTextSize: 14)
BigFrameScrollViewHorizontal()
Spacer()
}
}
.frame(height: 601)
}
.frame(height: 601)
.transition(.move(edge: .bottom))
}
}
// View with all views
struct CheckInView: View {
#StateObject var sheetManager: SheetManager
var body: some View {
VStack {
HStack {
Text("How do you fell now?")
.foregroundColor(.white)
.font(.custom("Manrope-Bold", size: 16))
Spacer()
Button {
} label: {
ZStack {
HStack {
Text("Pass check in")
.padding([.top, .leading, .bottom])
.foregroundColor(.white)
.font(.custom("Manrope-Medium", size: 12))
Image(systemName: "chevron.right")
.foregroundColor(.white)
.font(.system(size: 15))
.padding(.trailing)
}
}
.background(Rectangle()
.fill(Color("active"))
.cornerRadius(100)
.frame(height: 26))
}
}
VStack {
Divider()
.background(Color("inactive"))
.padding(.vertical)
Divider()
.background(Color("inactive"))
.padding(.vertical)
Divider()
.background(Color("inactive"))
.padding(.vertical)
Divider()
.background(Color("inactive"))
.padding(.vertical)
Divider()
.background(Color("inactive"))
.padding(.vertical)
Divider()
.background(Color("inactive"))
.padding(.vertical)
}
HStack {
Button {
} label: {
ZStack {
Circle()
.fill(Color("navigation"))
.frame(width: 26)
Image(systemName: "chevron.left")
.foregroundColor(.white)
.font(.system(size: 14))
}
}
Button {
} label: {
ZStack {
Circle()
.fill(Color("navigation"))
.frame(width: 26)
Image(systemName: "chevron.right")
.foregroundColor(Color("inactive"))
.font(.system(size: 14))
}
}
}
.padding(.top)
}
.padding(.horizontal, 15.0)
}
}
struct CheckInView_Previews: PreviewProvider {
static var previews: some View {
CheckInView(sheetManager: SheetManager())
.background(.yellow)
}
}
If I have all of this, how can I create a pop-up over Tab View? Maybe a link to a similar problem?
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)
}
}
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())
}
...
}
I am trying to VStack an Image and a Text inside a NavigationLink.
This is my code:
NavigationLink(destination: ContentView()){
Circle()
.fill(Color.green)
.frame(width: 50, height:50)
.overlay(Image(systemName: "arrow.up"))
Text("Send")
.foregroundColor(Color.white)
}
VStack {
if item.title == "Send"{
NavigationLink(destination: ContentView()) {
VStack {
Circle()
.fill(Color.green)
.frame(width: 50, height:50)
.overlay(Image(systemName: "arrow.up"))
Text("Send")
.foregroundColor(Color.black)
}
}
}}
If I try to VStack inside the NavigationLink then nothing would compile. If I try to VStack everything, then the image and the text would still show next to each other.
I am trying to achieve the right example:
This should work
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(destination: Text("new View")) {
ZStack {
Circle()
.fill(Color.green.opacity(0.7))
.frame(width: 70, height: 70)
VStack {
Image(systemName: "square.and.arrow.up")
.renderingMode(.template)
.foregroundColor(.white)
Text("send")
.foregroundColor(.white)
}
}
}
}
}
}
I wasn't able to replicate your issue. The following compiles and displayed as desired.
VStack {
NavigationLink(destination: ContentView()) {
VStack {
Circle()
.fill(Color.green)
.frame(width: 50, height:50)
.overlay(Image(systemName: "arrow.up"))
Text("Send")
.foregroundColor(Color.white)
}
}
}
I am trying to create a hamburger menu that when you click the "hamburger" (three horizontal lines) button, the menu will slide out. I am following the tutorial found here, but the only thing that isn't working is the lines for the Hamburger image is not showing up on my application. Everything else works, but for some reason this is the one thing that is not working.
Here is my code for the ContentView, where it hosts the problem code
struct ContentView: View {
#State var showMenu = false
var body: some View {
let drag = DragGesture()
.onEnded {
if $0.translation.width < -100 {
withAnimation {
self.showMenu = false
}
}
}
return NavigationView {
GeometryReader { geometry in
ZStack(alignment: .leading) {
MainView(showMenu: self.$showMenu)
.frame(width: geometry.size.width, height: geometry.size.height)
.offset(x: self.showMenu ? geometry.size.width/2 : 0)
.disabled(self.showMenu ? true : false)
if self.showMenu {
MenuView()
.frame(width: geometry.size.width/2)
.transition(.move(edge: .leading))
}
}
.gesture(drag)
}
.navigationBarTitle("Side Menu", displayMode: .inline) // this works
//somewhere below here is the problem
.navigationBarItems(leading: (
Button(action: {
withAnimation {
self.showMenu.toggle()
}
}) {
Image(systemName: "three_horizontal_lines")
.imageScale(.large)
}
))
}
}
}
Here is the MainView:
struct MainView: View{
#Binding var showMenu: Bool
var body: some View{
Button(action: {
withAnimation{
self.showMenu = true
}
}){
Text("Show Menu")
}
}
}
Lastly, this is the MenuView:
struct MenuView: View{
var body: some View{
VStack(alignment: .leading){
HStack{
Image(systemName: "person")
.foregroundColor(.gray)
.imageScale(.large)
Text("Profile")
.foregroundColor(.gray)
.font(.headline)
}
.padding(.top, 100)
HStack{
Image(systemName: "envelope")
.foregroundColor(.gray)
.imageScale(.large)
Text("Messages")
.foregroundColor(.gray)
.font(.headline)
}
.padding(.top, 30)
HStack{
Image(systemName: "gear")
.foregroundColor(.gray)
.imageScale(.large)
Text("Settings")
.foregroundColor(.gray)
.font(.headline)
}
.padding(.top, 30)
Spacer()
}
.padding()
.frame(maxWidth: .infinity, alignment: .leading)
.background(Color(red: 32/255, green: 32/255, blue: 32/255))
.edgesIgnoringSafeArea(/*#START_MENU_TOKEN#*/.all/*#END_MENU_TOKEN#*/)
}
}
I have checked for any misspellings and even copied and pasted the code from the original tutorial, but it seems nothing allows me to see the burger image like is shown on the tutorial. Any thoughts on what else I could try?
Im currently working on a project for iOS using SwiftUI. I have 3 pages (MainMenu, CalendarList, and DateDetails.)
On the 2nd page (CalenderList) there is an empty space between the top of the screen and the actual NavigationBarTitle.
on the third page, you can see the back button (to the MainMenu) and there is two empty spaces at the top.
I've seen people use .navigationBarHidden to fix this, but i haven't been able to implement it in a way that fixes the problem.
Am i using NavigationView() incorrectly? or is there a special trick?
Here is the code for the MainMenu:
import SwiftUI
struct MainMenu: View {
var body: some View {
NavigationView {
VStack {
Text("Calendar")
.font(.largeTitle)
.fontWeight(.heavy)
.foregroundColor(Color(red: 0.055, green: 0.173, blue: 0.322))
.padding(.top, 55.0)
Text("Main Menu")
.font(.headline)
.foregroundColor(Color(red: 0.635, green: 0.635, blue: 0.635, opacity: 1.0))
/*Image("Logo")
.resizable()
.frame(width: 150.0, height: 150.0)*/
Spacer()
HStack {
NavigationLink(destination: CalendarList()) {
Image(systemName: "calendar")
.resizable()
.frame(width: 75.0, height: 75.0)
.padding()
}
NavigationLink(destination: CalendarList()) {
Image(systemName: "gear")
.resizable()
.frame(width: 75.0, height: 75.0)
.padding()
}
}
HStack {
NavigationLink(destination: StudentInfo()) {
Image(systemName: "info.circle")
.resizable()
.frame(width: 75.0, height: 75.0)
.padding()
}
NavigationLink(destination: CalendarList()) {
Image(systemName: "exclamationmark.circle")
.resizable()
.frame(width: 75.0, height: 75.0)
.padding()
}
}
Spacer()
}
}
}
}
Here is the code for CalendarList (page 2):
import SwiftUI
struct CalendarList: View {
var body: some View {
NavigationView {
List(calendarData, id: \.date) { Calendar in
if Calendar.collab {
NavigationLink(destination: DateDetails(calendar: Calendar)) {
CalendarRow(calendar: Calendar)
}
} else {
CalendarRow(calendar: Calendar)
}
}
.navigationBarTitle(Text("Schedule"))
}
}
}
And here is the code for DateDetails (page 3):
import SwiftUI
struct DateDetails: View {
var calendar: Calendar
var body: some View {
NavigationView {
VStack (alignment: .center) {
//Image("Logo")
HStack {
Text(calendar.month.prefix(4) + ".")
.font(.largeTitle)
Text(String(calendar.date).suffix(1))
.font(.largeTitle)
Spacer()
}
HStack {
Text(calendar.schedule)
.font(.title)
Spacer()
}
Spacer()
.frame(height: 30.0)
Text(calendar.info)
.font(.body)
Spacer()
}
.navigationBarTitle(String(calendar.date).prefix(4).suffix(2) + "/" + String(calendar.date).suffix(2))
.padding()
}
}
}
Only use NavigationView at the top level, you don't need to add it in every subscreen, just remove it from CalendarList and DateDetails and it will fix your spacing issue
I think you can delete the NavigationView of DateDetails.
If you want to change the navigationbar, you may want to edit navigationBarItems or change navigationBarHidden to true and customize it.
https://www.hackingwithswift.com/quick-start/swiftui/how-to-add-bar-items-to-a-navigation-view