[SUI] 사이드바

Source: Dev.to

위 링크에 포함된 전체 텍스트를 제공해 주시면, 해당 내용을 한국어로 번역해 드리겠습니다. (코드 블록이나 URL은 그대로 유지됩니다.)

설명

iPadOS와 macOS에서는 TabView를 tabViewStyle(_:)와 함께 사용하고, 값으로 sidebarAdaptable를 지정하면 탭을 사이드바에 표시할 수 있습니다.

사이드바 안에서는 TabSection을 사용해 탭을 섹션으로 구분할 수 있습니다. 별도로 남은 탭이 있으면 해당 탭은 모든 섹션 위에 표시됩니다.

사이드바에 헤더는 tabViewSidebarHeader(content:)로, 푸터는 tabViewSidebarFooter(content:)로 설정할 수 있습니다. 또한 사이드바 하단에 단일 버튼을 추가하려면 tabViewSidebarBottomBar(content:)를 사용합니다.

TabContent.badge(_:)를 사용하면 배지는 탭 이름 오른쪽에 표시됩니다.

Tab이 선택되면 사이드바가 닫히고 해당 탭이 상단 바에 선택된 상태로 표시됩니다(마치 tabBarOnly를 사용한 것처럼). 선택된 Tab이 TabSection 안에 있었다면 해당 섹션도 함께 선택됩니다.

다른 섹션에 있는 Tab들 사이를 전환할 때, 각 섹션은 마지막으로 선택된 Tab의 상태를 유지합니다.

enum TabFeature {
    case home, remove, trips, account, send
}

struct ContentView: View {

    @State private var selectedTab = TabFeature.home
    @State private var newTrips = 2

    var body: some View {
        TabView(selection: $selectedTab) {
            TabSection("긴 이름을 가진 섹션 1") {
                Tab("탭 1", systemImage: "house", value: TabFeature.home) {
                    Text("탭 1 내용")
                        .background(Color.blue.opacity(0.7))
                }
                Tab("탭 2", systemImage: "trash", value: TabFeature.remove) {
                    Text("탭 2 내용")
                        .background(Color.red.opacity(0.7))
                }
            }
            TabSection("섹션 2") {
                Tab("탭 3", systemImage: "airplane", value: TabFeature.trips) {
                    Text("탭 3 내용")
                        .background(Color.blue.opacity(0.7))
                        .onAppear {
                            newTrips = 0
                        }
                }
                .badge(newTrips)

                Tab("탭 4", systemImage: "person", value: TabFeature.account) {
                    Text("탭 4 내용")
                        .background(Color.red.opacity(0.7))
                }
            }

            Tab("탭 6", systemImage: "message", value: TabFeature.send) {
                Text("탭 5 내용")
                    .background(Color.red.opacity(0.7))
            }
        }
        .tabViewSidebarHeader {
            Label("이것은 헤더입니다", systemImage: "gear")
        }
        .tabViewSidebarBottomBar {
            Button("액션 1") {
                newTrips += 1
            }
            Button("액션 2 보이지 않음") {
                print("Hago algo")
            }
        }
        .tabViewSidebarFooter {
            Label("이것은 푸터입니다", systemImage: "cloud")
        }
        .tabViewStyle(.sidebarAdaptable)
    }
}

이미지

참고 문헌

• Gauchat, J. D. (2024). SwiftUI for Masterminds: How to take advantage of Swift and SwiftUI to create insanely great apps for iPhones, iPads, and Macs (제5판). John D Gauchat.