SwiftUI中给NavigationStack标题加内边距出现异常问题求助

问题重现 #

你当前的代码结构如下：

NavigationStack {
    List {
        ForEach(allProjects) { project in
            Section {
                NavigationLink(destination: ProjectView()) {
                    ProjectRow(project: project)
                }
            }
        }
    }
}

尝试给List添加.padding(.top, 8)或把List放入带padding的VStack后，虽然顶部间距增加，但导航栏整体变为白色，布局异常。

问题原因 #

SwiftUI的List在NavigationStack中默认和导航栏存在布局集成——List的顶部会紧贴导航栏下方，并且共享背景视觉效果。直接给List添加.top padding会将List整体向下偏移，导致导航栏下方原本被List填充的区域暴露出来，显示的是视图的默认背景色（白色），看起来就像导航栏变白了。

解决方案 #

方案1：使用contentInsets调整List内容内边距（iOS 15+） #

这是最稳妥的方式，它只会调整List内部内容的位置，不会改变List本身的布局范围，不会破坏和导航栏的视觉衔接：

NavigationStack {
    List {
        ForEach(allProjects) { project in
            Section {
                NavigationLink(destination: ProjectView()) {
                    ProjectRow(project: project)
                }
            }
        }
    }
    .contentInsets(EdgeInsets(top: 8, leading: 0, bottom: 0, trailing: 0))
}

方案2：给Section设置顶部内边距（iOS 16+） #

如果你希望的是每个Section和导航栏/上一个Section之间的间距，可以使用sectionHeaderTopPadding：

NavigationStack {
    List {
        ForEach(allProjects) { project in
            Section {
                NavigationLink(destination: ProjectView()) {
                    ProjectRow(project: project)
                }
            }
            .sectionHeaderTopPadding(8)
        }
    }
}

方案3：隐藏List背景后手动添加间距（兼容旧版本） #

如果需要兼容iOS 15以下版本，可以隐藏List的默认背景，再通过VStack添加padding，同时手动设置背景色保持视觉统一：

NavigationStack {
    VStack(spacing: 0) {
        Spacer().frame(height: 8)
        List {
            ForEach(allProjects) { project in
                Section {
                    NavigationLink(destination: ProjectView()) {
                        ProjectRow(project: project)
                    }
                }
            }
        }
        .scrollContentBackground(.hidden)
    }
    .background(Color(.systemGroupedBackground)) // 和List默认背景匹配
}

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