Swift UI Navigation View not switching the whole screen-CodePudding

I want to create a simple NavigationView. But with code outside of it. Like this:

struct TestView: View {
    var body: some View {
        VStack{
            RoundedRectangle(cornerRadius: 10)
                .frame(width: 100, height: 100)
            NavigationView {
                VStack{
                    
                    NavigationLink {
                        Text("HEllo")
                    } label: {
                        Text("Click me")
                    }
                    .navigationViewStyle(.columns)
                }
                .navigationTitle("A Title")
                

            }
            
        }
       
    }
}

I do that so the navigation Title is below the item outside the NavigationView.

This code gives me this: Image because I am not allowed to insert images yet.

When I click on the NavigationLink though I see this:

The Image

As you see the RoundedRectangle still is viewable at top of the screen. How can I fix that, so that the Rectangle disappears and the Destination is viewable in full screen?

CodePudding user response：

Set navigation view first, You have to put everything inside the navigation view.

NavigationView { // Here
    VStack{
        RoundedRectangle(cornerRadius: 10)
            .frame(width: 100, height: 100)
        VStack{ // Remove from above

CodePudding user response：

The RoundedRectangle is still visible because it is outside of the NavigationView, only the content of the NavigationView will move with the NavigationLink

Something you could do is to use the toolbar of the NavigationView to place items on the top of the screen

struct TestView: View {
    var body: some View {
        NavigationView {
            NavigationLink {
                Text("HEllo")
            } label: {
                Text("Click me")
            }
            .navigationViewStyle(.columns)
            
            .navigationTitle("A Title")
            .toolbar {
                ToolbarItem {
                    RoundedRectangle(cornerRadius: 10)
                        .frame(width: 100, height: 100)
                }
            }
        }
    }
}