How to disable the overlay color for images inside Button and NavigationLink

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-disable-the-overlay-color-for-images-inside-button-and-navigationlink]

 

How to disable the overlay color for images inside Button and NavigationLink

 

기본적으로, NavigationLink 또는 Button 내부에 그린 이미지는 예상한데로 동작하지 않습니다: 전체 이미지는 불투명한 파란색으로 덮혀있거나 뷰에 있는 강조 색상으로 표시될 것입니다.

 

이를 고칠수 있는 2가지 방법이 있습니다; 원하는 동작을 선택합니다.

 

첫번째, 다음과 같이 PlainButtonStyle()과 함께 buttonStyle()modifier을 사용할 수 있습니다.

NavigationView {
    NavigationLink(destination: Text("Detail view here")) {
        Image("YourImage")
    }
    .buttonStyle(PlainButtonStyle())
}

 

또는 일반 버튼의 경우에는 다음과 같이 합니다.

Button(action: {
    // your action here
}) {
    Image("YourImage")
}
.buttonStyle(PlainButtonStyle())

 

해당 modifier를 사용해서, 원래 이미지를 예상했던데로 보여줄 것입니다.

 

대안으로, 또한 약간 다른 결과를 얻으려면, renderingMode() 모드 modifier을 사용할 수 있습니다.

NavigationView {
    NavigationLink(destination: Text("Detail view here")) {
        Image("YourImage")
            .renderingMode(.original)
    }
}

 

차이점은 미묘하지만 중요합니다: List 내부에 Button을 사용하는 경우에, .buttonStyle(PlainButtonStyle())를 사용하는 것은 버튼의 컨텐츠 주위에 있는 공간만 탭할 수 있다는 의미이며, 반면에 renderingMode(.original)을 사용하는 경우에 모든 셀이 탭 가능한 상태가 유지됩니다.