SwiftUI NavigationView嵌套容器点击仅局部跳转如何实现全屏跳转

开发者阿泽

2026-10-5

问题根因

你将NavigationView放在了每个IndividualButtonView内部，每个按钮对应一个仅覆盖自身区域的独立导航栈，因此跳转仅会在按钮所在的局部区域生效，不会占满全屏。

修复步骤

1. 修改ListOfButtonsView.swift

将NavigationView移到最外层，作为覆盖整个屏幕的全局导航容器：

struct ListOfButtonsView: View {
    
    let buttonNames = ["Button 1", "Button 2", "Button 3"]
    
    var body: some View {
        NavigationView {
            VStack {
                ForEach(0..<buttonNames.count) { button in
                    IndividualButtonView()
                }
            }
            .navigationBarHidden(true)
        }
    }
}

2. 修改IndividualButtonView.swift

删除内部的NavigationView，复用外层的全局导航容器：

struct IndividualButtonView: View {
        
    var body: some View {
        NavigationLink(destination: CirclesView()) {
            VStack {
                Text("Button")
                    .font(.largeTitle)
                    .padding(32)
            }
            .frame(maxWidth: .infinity)
            .foregroundColor(.white)
            .background(Color.red)
            .cornerRadius(12)
            .padding()
        }
    }
}