SwiftUI | NavigationView은 최상단에 추가해야되어야 하는걸까?

일어나 개발해야지·2023년 12월 20일

Swift

목록 보기
9/21

Intro

Floating Button 선택시
Navigation이 동작하도록 구현
NavigationLink를 작성했고, error 메세지가 없으나
페이지 이동이 되지 않는 상황

                    NavigationLink(destination:
                                    AddScreen()
                    ){
                        Circle()
                            .foregroundColor(Color(hex: "5FC2C0"))
                            .frame(width: 60)
                            .overlay(
                            Image(systemName: "plus")
                                .foregroundColor(.white)
                                .font(.system(size: 30))
                            )
                            .padding(.trailing,10)
                            .shadow(radius: 40) 
                    }

Solution

  • NavigationLink가 동작하려면 NavigationView는가 필요
  • NavigationView를 최상단에 추가함으로 정상동작
{
    
    var body: some View {
        NavigationView {
            VStack(alignment: .leading){
                CustomNavBar(screenTitle: "메인두둥")
                
                Text("집중할일 목록")
     
                ZStack(alignment: .bottomTrailing){
                    VStack {
                        MyList()
                    }
                    
                    NavigationLink(destination:
                       AddScreen()
                    ){
                        Circle()
                    }
                }//Zstack
            }
        } //NavigationView
    }
}

Process 1

NavigationView를 NavigationLink 바로 위에 추가
그랬더니 UI가 Circle만 남기고 날아감

                    NavigationView{
                        NavigationLink(destination:
                                        AddScreen()
                        ){
                            Circle()
                        }
                    }

Question

NavigationView은 최상단에 추가해야되어야 하는걸까?

Answer

View의 계층관계

  • NavigationView는 View의 탐색 스택을 관리하는 역할
  • NavigationView 사용시, View의 계층 구조가 형성되며,
  • NavigationLink를 통해 다른 뷰로 이동이 가능해짐
  • NavigationView의 위치를 최상위 컨테이너로 컴파일러가 인지하기때문에,
    Process1 과 같은 현상 발생

요약

① NavigationLink가 동작하려면 NavigationView는가 필요
② NavigationView를 최상단에 추가함으로 정상동작
③ 최상단이여야하는 이유는 NavigationView의 위치를 최상위 컨테이너로 인지하기 때문이며
④ NavigationView를 기준으로 View의 계층 구조가 형성되기 때문

참고자료
https://ios-development.tistory.com/1092

Next Step

About Navigation Stack

0개의 댓글