100 days of swiftui: 45

Navigationbar 스타일 설정하기

Navigationbar의 배경, 제목 스타일, 보여줌 여부 등을 다양하게 설정할 수 있다. 예로 .navigationTitle은 dark 모드에서 white, light 모드에서 black으로 나타나기 때문에, 색을 조정하려면 .navigationBarTitleDisplayMode에서 모드를 설정해야 한다.

struct ContentView: View {
    var body: some View {  
        NavigationStack {
            List(1..<100) { i in
                NavigationLink("\(i)") {
                    Text("\(i) view")
                }
            }
            .navigationTitle("Navigation Title")
            .navigationBarTitleDisplayMode(.inline)
            .toolbarBackground(.indigo, for: .navigationBar)
            .toolbarColorScheme(.dark)
        }
    }
}

또 보여줌 여부를 아래와 같이 설정할 수 있다. 대신 toolbar가 사라지면서 현재 시간과 배터리 상태 등을 보여주는 statusbar와 겹쳐서 보인다.

            .toolbar(.hidden, for: .navigationBar)

깃헙 링크

toolbar의 요소 위치 설정하기

bottomBar, topBarLeading 등 위치로 설정하기

NavigationStack {
            Text("This is Text")
                .toolbar {
                    ToolbarItem(placement: .topBarLeading) {
                        Button("Left Top Button") {}
                    }
                }
        }

동작의 의미에 따라 설정하기

        NavigationStack {
            Text("This is Text")
                .toolbar {
                    ToolbarItem(placement: .confirmationAction) {
                        Button("Confirmation Button") {}
                    }
                }
        }

한 개 이상의 요소를 나타내기

        NavigationStack {
            Text("This is Text")
                .toolbar {
                    ToolbarItem(placement: .confirmationAction) {
                        Button("Confirm Button") {}
                    }
                    ToolbarItem(placement: .confirmationAction) {
                        Button("Confirm Button") {}
                    }
                }
        }

        NavigationStack {
            Text("This is Text")
                .toolbar {
                    ToolbarItemGroup(placement: .confirmationAction) {
                        Button("Confirm Button") {}
                        Button("Confirm Button") {}
                    }
                }
        }

깃헙 링크

💡 사용자가 입력 중인 내용을 저장하거나 삭제만 할 수 있도록 뒤로 가기를 navigationBarBackButtonHidden()를 통해 막아둘 수 있다.

수정 가능한 navigation title 만들기

navigation title을 사용자가 임으로 수정할 수도 있다. State인 String 변수를 만들어 .navigationTitle에 적용하고, .navigationBarTitleDisplayMode를 .inline으로 설정하면 된다.

struct ContentView: View {
    @State private var navigationTitle = "Temporary title"
    var body: some View {
        NavigationStack {
            Text("This is Text")
                .navigationTitle($navigationTitle)
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

깃헙 링크

💡 toolbar가 다른 요소로 가득 찼을 때도 가능한가 시험해보려다가 버튼들이 화면 너비보다 넓으면 picker 형태로 나타나는 것을 확인했다.