I have encountered this problem during the Swift programming. I have this long frame that I created, here it is.

The main idea that this frame will be used in a horizontal Scroll View in different view, like this. It will be opening different view on tap.

Here's the catch. If we want to transition to different view, we need NavigationLink. In order to work NavigationLink needs NavigationView. When we add our LongFrame in NavigationView, this happens

If we tap on it, it will display View, but in small frame

And If we, for example, add our LongFrameScrollView somewhere, It won't even show up sometimes

I will provide the code here. My guess that should be connected to .frame, but without this line of code I can't create this frame(.

// FRAME ITSELF
import SwiftUI

struct LongFrameView: View {
    
    var body: some View {
        NavigationView {
            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)
            }
        }
    }
}

struct LongFrameView_Previews: PreviewProvider {
    static var previews: some View {
        LongFrameView()
    }
}

// MARK: - WITH THIS CODE WE CAN DEFINE WHERE CORNER RADIUS WILL BE CHANGED OR NOT. DO NOT MODIFY

extension View {
    func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View {
        clipShape( RoundedCorner(radius: radius, corners: corners) )
    }
}
struct RoundedCorner: Shape {

    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners

    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}

// SCROLL VIEW WITH FRAMES
import SwiftUI

struct LongFrameScrollView: View {
        
    let rows = Array(repeating: GridItem(.fixed(60), spacing: 10, alignment: .leading), count: 2)
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHGrid(rows: rows, spacing: 10) {
                
                // PLACEHOLDER UNTIL API IS READY
                
                LongFrameView()
                
                LongFrameView()

                LongFrameView()

                LongFrameView()

            }
        }
        .padding([.horizontal, .bottom], 10)
        
    }
}

struct LongFrameScrollView_Previews: PreviewProvider {
    static var previews: some View {
        LongFrameScrollView()
    }
}

CodePudding user response：

NavigationView should be added as the first/top view. So embed your ScrollView with NavigationView inside LongFrameScrollView and removed it from LongFrameView. Inside LongFrameView you just need NavigationLink.

 NavigationView {
    ScrollView(.horizontal, showsIndicators: false) {
        LazyHGrid(rows: rows, spacing: 10) {
            
            // PLACEHOLDER UNTIL API IS READY                
            LongFrameView()                
            LongFrameView()
            LongFrameView()
            LongFrameView()
        }
    }
    .padding([.horizontal, .bottom], 10)
}