NavigationLink button activates on whole screen in SwiftUI

Question

I tried creating a NavigationLink button using Rectangle(), like this:

NavigationView (content:{

    ZStack{

        NavigationLink(destination: ContentView()
            .navigationBarBackButtonHidden(true)){ 

                Rectangle() 
                    .frame(maxWidth: 300, maxHeight: 183) 
                    .foregroundColor(Color(red: 0.11, green: 0.11, blue: 0.11, opacity: 0.5)) 
                    .position(.init(x: 160, y: 170.0))
                }
        }
    })

It displays correctly but it gets activated even outside of the button.

I tried changing the ZStack to HStack but the button still reacted on whole width of the screen.

Answer 1

By putting .position on the Rectangle but not the NavigationLink, the whole navigation link has to expand, so that its label, the rectangle, can be at (160, 170.0).

You should put frame and position on the NavigationLink, not the rectangle:

// NavigationView is deprecated - I've changed it to a NavigationStack
NavigationStack {
    ZStack{
        NavigationLink {
            SomeView()
                .navigationBarBackButtonHidden(true)
        } label: {
            Rectangle()
                .foregroundColor(Color(red: 0.11, green: 0.11, blue: 0.11, opacity: 0.5))
        }
        .frame(maxWidth: 300, maxHeight: 183)
        .position(x: 160, y: 170.0)
    }
}