[SwiftUI] NavigationLink 파란색 오버레이 변경 방법

[머릿말]

NavigationLink를 적용한 각 항목은 하이퍼링크가 달렸을 때처럼 파란색 오버레이가 적용된다. 하지만 난 각 항목이 원래의 색상대로 표시되도록 하고 싶었다...

---

1. foregroundStyle(_:) 사용

첫 번째로는 각 항목에 대해 foregroundStyle(_:) 수정자를 적용하는 방법이 있다. 아래 예제에서 1번의 색을 초록색으로 변경해보았다.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 20) {
                NavigationLink(value: "1") {
                    Image(systemName: "1.circle")
                        .resizable()
                        .frame(width: 100, height: 100)
                }
                .foregroundStyle(.green) // ❗️초록색 적용❗️
                
                NavigationLink(value: 2) {
                    Image(systemName: "2.circle")
                        .resizable()
                        .frame(width: 100, height: 100)
                }
                
                NavigationLink(value: 3) {
                    Image(systemName: "3.circle")
                        .resizable()
                        .frame(width: 100, height: 100)
                }
            }
            .navigationDestination(for: Int.self) { number in
                Text("\(number)번 View")
                    .font(.largeTitle)
                    .fontWeight(.black)
            }
        }
    }
    
}

 

2. buttonStyle(PlainButtonStyle()) 사용

두 번째로는 역시 각 항목에 대해 buttonStyle(PlainButtonStyle()) 수정자를 적용하는 방법이다. 이렇게 되면 기본적으로 적용된 파란색 오버레이가 해제되고 기본 색상인 검은색으로 돌아오게 된다.

...
		NavigationLink(value: 2) {
                    Image(systemName: "2.circle")
                        .resizable()
                        .frame(width: 100, height: 100)
                }
                .buttonStyle(PlainButtonStyle()) // ❗️PlainButtonStyle 적용❗️
...

 

 

---

항상 이런 사소한 문제가 생길 때마다 도움을 주는 StackOverFlow 감사합니다... 영어 공부 열심히 하겠습니다...

 

끝!

 

참고: https://stackoverflow.com/questions/57177989/how-to-turn-off-navigationlink-overlay-color-in-swiftui

How to turn off NavigationLink overlay color in SwiftUI?