Search code examples
swiftswiftuiswiftui-navigationlinkswiftui-navigationview

NavigationView doesn't show up correctly in ScrollView

I have encountered this problem during UI building. Previously, I've been asking here about NavigationView and why NavigationLink wasn't working. I fixed this problem with NavigationView at the top of my ScrollView. Now FrameView works just fine: opens and closes it in preview, which means I'm doing it right.

enter image description here

enter image description here

Here's the catch: When I add this LongFrameScrollView to my main view HomeView, it appears in some sort of frame and doesn't open link in full screen.

enter image description here

What am I doing wrong? How to fix that? Providing the code:

// Long frame view

import SwiftUI

struct LongFrameView: View {
    
    var body: some View {
            NavigationLink {
                PlayerView()
            } label: {
                ZStack {
                    Rectangle()
                        .fill(LinearGradient(gradient: Gradient(colors: [Color(red: 0.268, green: 0.376, blue: 0.587), Color(red: 0.139, green: 0.267, blue: 0.517)]),
                                             startPoint: .leading,
                                             endPoint: .trailing))
                        .frame(width: 310, height: 62)
                        .cornerRadius(8)
                    
                    HStack {
                        Image("mountains")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: 70, height: 62)
                            .cornerRadius(8, corners: [.topLeft, .bottomLeft])
                        
                        
                        VStack(alignment: .leading) {
                            
                            Text("Sense of anxiety")
                                .font(.custom("Manrope-Bold", size: 14))
                                .foregroundColor(.white)
                            Text("11 MIN")
                                .font(.custom("Manrope-Medium", size: 12))
                                .foregroundColor(.white)
                            
                        }
                        
                        Spacer()
                        
                    }
                }
                .frame(width: 310, height: 62)
            }
    }
}


// Scroll View with LongFrame. Works fine in the preview
struct LongFrameScrollView: View {
        
    let rows = Array(repeating: GridItem(.fixed(70), spacing: 10, alignment: .leading), count: 2)
    
    var body: some View {
        NavigationView {
            ScrollView(.horizontal, showsIndicators: false) {
                LazyHGrid(rows: rows, spacing: 10) {
                    
                    // PLACEHOLDER UNTIL SERVER IS READY
                    
                    LongFrameView()
                    
                    LongFrameView()
                    
                    LongFrameView()
                    
                    LongFrameView()
                    
                }
            }
            .padding([.horizontal, .bottom], 10)

        }
    }
}


    var body: some View {
        
ScrollView(.vertical, showsIndicators: false) {
                
                VStack(alignment: .center) {
                    ///
                    
              // Long frame. There is more view, but we'll just ignore them
                    LongFrameScrollView()
                        .padding(.bottom)

                    ///

                }
                .padding(.top, 10)
                
            }
            .background(
                Image("background2")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
        )
        }
}
Solution

  • The reason why it wasn't working correctly is because it was in TabView. So, in order to work, our TabView must be in NavigationView and we must delete from all child views NavigationView.