[SwiftUI] NavigationStack 에서 back 버튼 색상 변경하는 방법

[머릿말]

NavigationStack을 사용하여 화면 전환을 구현할 때 상단에 기본적으로 back 버튼이 존재한다. 실제 존재하는 다른 앱들을 살펴보면 이 부분(상단바) 전체를 커스터마이징하여 사용하는 것 같다. 나는 일단 back 버튼의 색상만 기본 색상인 파란색에서 흰색으로 바꿔보았다.

---

1. tint(_:) 사용

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        NavigationStack {
            List {
                Section("학과") {
                    NavigationLink("컴퓨터공학과", value: "컴퓨터공학과")
                    NavigationLink("간호학과", value: "간호학과")
                    NavigationLink("내거친생각과", value: "내거친생각과")
                    NavigationLink("불안한눈빛과", value: "불안한눈빛과")
                }
            }
            .navigationDestination(for: String.self) { major in
                Text(major)
                    .font(.largeTitle)
                    .fontWeight(.black)
            }
        }
        .tint(.green) // ❗️NavigationStack의 수정자로 tint 사용❗️
    }
    
}

위와 같은 간단한 예제를 만들어보았다. 위 예제처럼 NavigationStack에 tint 수정자를 적용하면 각 NavigationLink로 이동했을 때의 back 버튼 색상을 바꿀 수 있다.

green으로 설정했기 때문에 초록색이 적용된 것을 확인할 수 있다

 

---

대부분의 앱은 이 상단바 부분을 직접 만들어서 사용하는 것 같다. 핸드폰에 깔려있는 여러 앱을 실행해봤는데 대부분 상단바에 검색 버튼, 알림 버튼, 설정 버튼 등 다양한 요소가 추가되어 있었다.

 

이와 동일하게 나중에 나도 직접 커스터마이징한 상단바를 제작해봐야겠다...

 

끝!