[SwiftUI] 상세 페이지로 이동하기, 다른 페이지로 전환하기

 

custom button을 통해 다른 앱 화면으로 이동하는 기능을 개발합니다.

 

 

 

 

 

1. 예제 코드

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        PracticeView()
    }
}

// 기본 뷰
struct PracticeView: View {
    
    @State private var tag:Int? = nil
    
    var body: some View {
        NavigationStack {
            ZStack {
                NavigationLink(destination: DetailPage(), tag: 1, selection: self.$tag) {
                    ButtonDesign()
                }
                Button(action: {
                    self.tag = 1
                }) {
                    EmptyView()
                }
            }
        }
    }
}

// 상세 화면 넘어가는 버튼 뷰
struct ButtonDesign: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 20)
                .foregroundColor(Color.yellow)
                .frame(width: 360, height: 200)
            Text("나를 눌러줘!")
                .foregroundColor(.red)
        }
    }
}

// 상세 화면 뷰
struct DetailPage: View {
    var body: some View {
        VStack {
            Text("상세 정보")
            Spacer()
            Text("이것은 상세 화면의 내용입니다")
            Spacer()
            
        }
    }
}

 

 

 

 

 

2. 정보가 상세 뷰로 넘어가 활용하는 예제 코드

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        PracticeView()
    }
}

// 기본 뷰
struct PracticeView: View {
    
    @State private var tag:Int? = nil
    
    @State private var myFullName: String = "진호"
    
    var body: some View {
        NavigationStack {
            VStack {
                ZStack {
                    NavigationLink(destination: DetailPage(myName: myFullName), tag: 1, selection: self.$tag) {
                        ButtonDesign()
                    }
                    Button(action: {
                        self.tag = 1
                    }) {
                        EmptyView()
                    }
                }
            }
        }
    }
}

// 상세 화면 넘어가는 버튼 뷰
struct ButtonDesign: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 20)
                .foregroundColor(Color.yellow)
                .frame(width: 360, height: 200)
            Text("나를 눌러줘!")
                .foregroundColor(.red)
        }
    }
}

// 상세 화면 뷰
struct DetailPage: View {
    
    @State private var myRealFullName: String
    
    init(myName: String) {
        myRealFullName = myName
    }
    
    var body: some View {
        VStack {
            Text("상세 정보")
            Spacer()
            Text("내 이름은 \(myRealFullName)입니다.")
            Spacer()
            
        }
    }
}

PracticeProj_detailViewButton.zip

0.05MB

 

 

 

 

 

3. 이것저것 함께 응용한 샘플 코드 : 기본 뷰 구현

 

// vim /View/ContentView.swift

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            TabView {
                ScrollViewReader { scrollView in
                    ScrollView {
                        MainMyWallet()
                    }
                }
                .tabItem {
                    Image(systemName: "house")
                    Text("메인")
                }
                ScrollViewReader { scrollView in
                    Text("test2")
                }
                .tabItem {
                    Image(systemName: "suitcase")
                    Text("워크")
                }
                .badge(2)
                ScrollViewReader { scrollView in
                    Text("test3")
                }
                .tabItem {
                    Image(systemName: "building.2")
                    Text("클래스")
                }
                .badge(9999999)
                ScrollViewReader { scrollView in
                    Text("test4")
                }
                .tabItem {
                    Image(systemName: "m.square")
                    Text("머니")
                }
                .badge(1111111111)
                ScrollViewReader { scrollView in
                    Text("test5")
                }
                .tabItem {
                    Image(systemName: "bolt")
                    Text("DB")
                }
                .badge(5)
            }
        }
    }
}

 

// vim /View/ContentView.swift

// 내 지갑 정보 카드 뷰

struct MainMyWallet: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 20)
                .foregroundColor(.blue100)
                .frame(width: 355, height: 206)
            VStack{
                HStack{
                    Text("내 지갑")
                        .padding(.trailing, 240)
                        .font(.custom(pretendard_bold, size: 20))
                }
                Text("250 꿈")
                    .font(.custom(pretendard_bold, size: 25))
                    .bold()
                    .padding()
                    .multilineTextAlignment(.leading)
                Spacer().frame(height:50)
            }
        }
    }
}

 

 

 

 

 

 

4. 이것저것 함께 응용한 샘플 코드 : 해당 카드 클릭시 다른 페이지로 이동하는 struct 추가 및 main에서 먼저 참조하는 struct를 해당 신규 struct로 변경

 

아래와 같이 별도의 struct를 만들어서, 페이지를 이동시키는 기능의 struct를 만들어줍니다.

 

// vim /View/ContentView.swift

// 내 지갑 정보 카드 뷰 파일은 달라지는 내용이 없습니다.

struct MainTopView: View {
    @State var tag:Int? = nil
    var body: some View {
        ZStack{
            NavigationLink(destination: MyProfileInfo(), tag: 1, selection: self.$tag ) {
                EmptyView()
            }
            Button( action : {
                self.tag = 1
                
            }) {
                MainMyWallet()
            }
        }
//        MainMyWallet()
    }
}

 

그리고, 가장 처음에 세팅했던 샘플에서 "MainMyWallet()"을 불러오는 것이 아니라, 방금 만든 struct인 MainTopView()를 불러옵니다.

 

// vim /View/ContentView.swift

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            TabView {
                ScrollViewReader { scrollView in
                    ScrollView {
                        // 이 부분만 변경됩니다.
                        MainTopView()
                    }
                }
                .tabItem {
                    Image(systemName: "house")
                    Text("메인")
                }
                ScrollViewReader { scrollView in
                    Text("test2")
                }
                .tabItem {
                    Image(systemName: "suitcase")
                    Text("워크")
                }
                .badge(2)
                ScrollViewReader { scrollView in
                    Text("test3")
                }
                .tabItem {
                    Image(systemName: "building.2")
                    Text("클래스")
                }
                .badge(9999999)
                ScrollViewReader { scrollView in
                    Text("test4")
                }
                .tabItem {
                    Image(systemName: "m.square")
                    Text("머니")
                }
                .badge(1111111111)
                ScrollViewReader { scrollView in
                    Text("test5")
                }
                .tabItem {
                    Image(systemName: "bolt")
                    Text("DB")
                }
                .badge(5)
            }
        }
    }
}

 

 

뒤로 가기 버튼도 자동으로 구현된, 새로운 페이지로 이동하는 기능을 개발했습니다.