SwiftUI NavigationView多余间距去除：保留导航栏标题与返回按钮

问题根源 #

你当前的ChestView里嵌套了NavigationView，但这个页面本身是从NavigationStack跳转过来的子页面，已经处于导航层级中。嵌套NavigationView会导致额外的空白区域，还会干扰原有的返回按钮逻辑，这就是你看到多余间距的原因。

简易解决步骤 #

1. 移除嵌套的NavigationView：直接把ChestView里的NavigationView包裹层删掉，保留List作为根视图
2. 保留导航标题：把.navigationTitle("Chest Workouts:")直接修饰在List上（或视图根节点）
3. 消除List默认间距（可选）：添加.listStyle(.plain)移除List自带的顶部内边距，彻底清除空白

修改后的完整代码 #

import SwiftUI

struct ChestView: View {
    var videos: [Video] = VideoList.chest
    
    var body: some View {
        List(videos, id: \.id) { video in
            HStack{
                Image(video.imageName)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 125, height: 70)
                    .cornerRadius(5)
                    .padding(.vertical, 4)
                
                Text(video.title)
                    .font(.title2)
                    .fontWeight(.bold)
                    .lineLimit(2)
                    .minimumScaleFactor(0.8)
                    .fontDesign(.serif)
                    .frame(width: 150, alignment: .leading)
                    .padding(.horizontal)
                
                NavigationLink(destination: ExerciseDetailView(video: video)) {
                    EmptyView()
                }
            }
        }
        .navigationTitle("Chest Workouts:")
        .listStyle(.plain) // 移除List默认顶部间距，按需调整
    }
}

#Preview {
    // 预览时模拟导航栈环境，更贴近实际效果
    NavigationStack {
        ChestView()
    }
}

效果说明 #

修改后，页面会自动继承NavigationStack的导航栏，保留返回按钮和自定义标题，同时之前的多余空白会被彻底清除。预览时用NavigationStack包裹，能更准确地还原实际运行场景。

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