Swift中使用NavigationLink跳转页面顶部出现意外空白如何解决

问题原因 #

跳转后顶部出现空白是因为你在起始页和目标页重复嵌套了NavigationView。SwiftUI的导航栈仅需要在整个导航流的根页面声明一次NavigationView即可，所有通过NavigationLink跳转的子页面都属于这个导航栈的管理范围，不需要再次嵌套NavigationView，重复声明就会额外生成一层导航栏占位区域，也就是你看到的顶部空白。

修复方案 #

直接删除目标页中多余的NavigationView即可，修改后的目标页代码如下：

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        List{
            Text("something")
        }
        // 若需要设置导航标题直接调用.navigationTitle修饰符即可，无需外层套NavigationView
        .navigationTitle("列表页")
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        // 预览时如需展示导航样式，可仅在预览代码中套NavigationView，不影响实际运行逻辑
        NavigationView {
            SwiftUIView()
        }
    }
}

可选优化 #

如果你的起始页不需要显示导航栏，可在起始页的VStack上添加修饰符.navigationBarHidden(true)即可隐藏根页面的导航栏。

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