SwiftUI中NavigationLink在ScrollView中显示异常问题求助

问题根源分析 #

你遇到的视图变形、跳转后目标视图显示为小框架、ScrollView无法正常显示等问题，核心原因是每个LongFrameView都嵌套了NavigationView。SwiftUI中NavigationView是全局根层级组件，只需在应用最外层设置一次，重复嵌套会导致导航栈混乱，触发布局冲突；同时重复设置.frame修饰符也会加剧约束矛盾。

具体修复步骤 #

1. 重构LongFrameView，移除内部NavigationView

NavigationLink只需处于NavigationView的层级范围内即可，无需每个可跳转视图单独包裹NavigationView。同时优化frame设置，避免重复约束：

import SwiftUI

struct LongFrameView: View {
    var body: some View {
        NavigationLink {
            PlayerView()
        } label: {
            ZStack {
                // 移除Rectangle的frame，让它自动填充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))
                    .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，统一控制视图大小
            .frame(width: 310, height: 62)
        }
    }
}

struct LongFrameView_Previews: PreviewProvider {
    static var previews: some View {
        // 预览时需包裹NavigationView才能展示正确效果
        NavigationView {
            LongFrameView()
        }
    }
}

2. 调整LongFrameScrollView的GridItem高度

原代码中GridItem高度设为60，但LongFrameView高度为62，会导致视图轻微裁剪，修改为匹配高度：

import SwiftUI

struct LongFrameScrollView: View {
    // 将GridItem高度改为62，与LongFrameView高度匹配
    let rows = Array(repeating: GridItem(.fixed(62), spacing: 10, alignment: .leading), count: 2)
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHGrid(rows: rows, spacing: 10) {
                LongFrameView()
                LongFrameView()
                LongFrameView()
                LongFrameView()
            }
        }
        .padding([.horizontal, .bottom], 10)
    }
}

struct LongFrameScrollView_Previews: PreviewProvider {
    static var previews: some View {
        // 预览时包裹NavigationView
        NavigationView {
            LongFrameScrollView()
        }
    }
}

3. 在根视图添加唯一的NavigationView

确保应用主页面（如ContentView）作为导航根，仅在这里添加一次NavigationView：

struct ContentView: View {
    var body: some View {
        NavigationView {
            LongFrameScrollView()
            // 可在此添加导航栏标题等配置
            .navigationTitle("Your Title")
        }
    }
}

效果验证 #

• 移除重复NavigationView后，跳转目标视图会正常占据全屏，不再显示为小框架
• 统一frame设置后，LongFrameView布局稳定，LongFrameScrollView可正常滚动显示
• 预览时记得给视图包裹NavigationView，否则无法看到正确的导航交互效果

内容的提问来源于stack exchange，提问作者user19727360