[SwiftUI] TabView 사용해보기

오늘은 TabView!에 대해 알아보자!👩🏻‍🍳

---

TabView

TabView는 여러 화면 사이를 탭 버튼을 통해 전환할 수 있는 인터페이스를 제공하는 컴포넌트이다. 각 탭은 고유한 화면과 연결되고, 사용자는 탭 버튼을 클릭해서 해당 화면으로 이동이 가능하다.

 

TabView Apple 공식 문서

TabView | Apple Developer Documentation

 

TabView의 구성

• Content : 각 탭에 연결된 화면을 나타낸다. TabView의 클로저 내부에 정의한다.
• Tab : 화면 하단에 위치하는 탭 버튼이다. 각 탭은 Text와 Image로 표시되며, .tag(_:) 수정자를 사용하여 각 탭에 고유한 식별자를 부여한다.

 

예시 코드

참고로 저기 묶여있는 Text 대신 새로운 View를 생성한 후 그 뷰로 바꿔 넣으면 화면 전환이 되는 걸 볼 수 있다.

struct ContentView: View {
    @State private var selectedTab = 0
    
    var body: some View {
        TabView(selection: $selectedTab) {
            Text("Home")
                .tabItem {
                    Image(systemName: "house")
                    Text("Home")
                }
                .tag(0)
            
            Text("Settings")
                .tabItem {
                    Image(systemName: "gear")
                    Text("Settings")
                }
                .tag(1)
        }
    }
}

 

---

오늘의 코드 레시피👩🏻‍🍳 완료!🩷