BLACK FRIDAY: Save 50% on all our Swift books and bundles! >>

How can I make each button go to a separate page in Swift UI

Forums > SwiftUI

How can I do that? I have built a side menu and want each thing to go to a seperate page(settings to settings... etc) How can I do this?

//HOME PAGE

import SwiftUI

struct Home: View {

    @State private var isShowing: Bool = false
    var body: some View {
        NavigationView{
            ZStack {
                if isShowing {
                    SideView(isShowing: $isShowing)
                }
                HomeView()
                    .cornerRadius(isShowing ? 20:10)
                    .offset(x: isShowing ? 300.0 : 0, y: isShowing ? 44:0)
                    .scaleEffect(isShowing ? 0.8 : 1.0)
                    .navigationBarItems(leading: Button(action: {
                        withAnimation(.spring()) {
                            isShowing.toggle()
                        }
                    }, label: {
                        Image(systemName: "list.bullet")
                            .foregroundColor(Color.primary)
                    }))
                    .navigationTitle("Welcome To Sai Mirras!")
            }

        }
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()

    }
}

struct HomeView: View {
    var body: some View {
        ZStack {
            Color(.white)

            Text("Hi")
                .padding()
        }

    }
}

And this is my header view:

import SwiftUI

struct SideMenuHeaderView: View {

    @Binding var isShowing: Bool

    var body: some View {
        ZStack(alignment: .topTrailing) {

            Button(action: {
                withAnimation(.spring()) {
                    isShowing.toggle()
                }
            }, label: {
                Image(systemName: "xmark")
            })
            .frame(width: 32, height: 32)
            .foregroundColor(Color.white)
            .padding()

            VStack(alignment: .leading){
                Image("1")
                    .resizable()
                    .scaledToFill()
                    .clipped()
                    .frame(width: 64, height: 64)
                    .clipShape(Circle())
                    .padding(.bottom, 16)
                Text("Harrinandhaan SN")
                    .font(.system(size: 24, weight: .semibold))

                Text("Customer Since January 2021")
                    .font(.system(size: 14))
                    .padding(.bottom, 24)

                HStack(spacing: 12){
                    HStack(spacing: 4){
                        Text("Titanium").bold()
                        Text("Member")
                    }
                    HStack(spacing: 4){
                        Text("1,200").bold()
                        Text("Points")

                    }
                    Spacer()
                }
                Spacer()

            } .padding()
        }
    }
}

struct SideMenuHeaderView_Previews: PreviewProvider {
    static var previews: some View {
        SideMenuHeaderView(isShowing: .constant(true))
    }
}

This is my options view:

import SwiftUI

struct SideViewOptionView: View {

    let viewModel: SideMenuViewModel

    var body: some View {
        HStack(spacing: 16){
            Image(systemName: viewModel.imageName)
                .frame(width: 24, height: 24)

            Text(viewModel.title)
            .font(.system(size: 15, weight: .semibold))

            Spacer()
        }
        .padding()
        .foregroundColor(Color.white)
    }
}

struct SideViewOptionView_Previews: PreviewProvider {
    static var previews: some View {
        SideViewOptionView(viewModel: .home)
    }
}

This is my data model:

import Foundation

enum SideMenuViewModel: Int, CaseIterable {
    case home
    case menu
    case cart
    case membership
    case table
    case settings
    case profile

    var title: String {
        switch self {
                case .home: return "Home"
                case .menu: return "Menu"
                case .cart: return "Cart"
                case .membership: return "Membership"
                case .table: return "Book A Table"
                case .settings: return "Settings"
                case .profile: return "Profile"
        }
    }
    var imageName: String{
        switch self {
                case .home: return "house"
                case .menu: return "list.dash"
                case .cart: return "cart.fill"
                case .membership: return "diamond.fill"
                case .table: return "bookmark.fill"
                case .settings: return "gear"
                case .profile: return "person.fill"
        }
    }
}

And this is the menu view:

import SwiftUI

struct SideView: View {

    @Binding var isShowing: Bool

    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [Color.blue, Color.purple]), startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack{
                SideMenuHeaderView(isShowing: $isShowing)
                .foregroundColor(Color.white)
                .frame(height: 240)

                ForEach(SideMenuViewModel.allCases, id: \.self){ option in
                    SideViewOptionView(viewModel: option)

                            }
                Spacer()
        }
        }.navigationBarHidden(true)
}
}

struct SideView_Previews: PreviewProvider {
    static var previews: some View {
        SideView(isShowing: .constant(true))
    }
}

Please help!

   

Lots of code there, but I think yourr answere lies in using NavigationLinks.

NavigationLink(destination: SomeOtherView()) {
    Text("Go To Other View")
        .font(.headline)
        .foregroundColor(.blue)
    Image(systemName: "plus")
        .font(.headline)
        .foregroundColor(.blue)
}

That's the beauty of the NavigationView.

   

Save 50% in my Black Friday sale.

SAVE 50% This Black Friday all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.