SwiftUI中NavigationLink无法使用及滚动时固定底部菜单栏问题

核心问题定位 #

• 提供的代码存在修饰符层级错误：.navigationTitle、.toolbar 被错误写在 ScrollView 的内容闭包内部，而非直接修饰 NavigationView 的直接子视图。该写法会导致 toolbar 无法绑定到系统导航上下文，NavigationLink 找不到对应的跳转容器，因此无论使用何种写法都无法触发跳转。
• 若跳转目标页外层嵌套了独立的 NavigationView/NavigationStack，会直接中断导航上下文，也会出现点击无响应的问题。
• 若 NavigationLink 的 label 被上层滚动内容、透明蒙层遮挡，也会导致交互失效。

实现方案 #

系统原生的 bottomBar 位置 toolbar 本身就支持滚动时固定，只要正确挂载修饰符即可满足需求，也可根据自定义需要选择手动布局实现固定底部栏。

方案1：使用系统原生 bottomBar toolbar（推荐） #

适配系统交互规范，自动适配安全区，无需额外处理布局：

NavigationView {
    // 仅放置可滚动内容
    ScrollView {
        VStack(spacing: 16) {
            // 页面滚动内容，如列表、文本等
            ForEach(0..<20) { index in
                Text("滚动条目 \(index)")
                    .frame(maxWidth: .infinity)
                    .frame(height: 100)
                    .background(Color.gray.opacity(0.2))
            }
        }
        .padding()
    }
    // 导航类修饰符直接挂载到 ScrollView 上，绑定导航上下文
    .navigationTitle("Home")
    .navigationBarTitleDisplayMode(.inline)
    .toolbar {
        ToolbarItemGroup(placement: .bottomBar) {
            HStack {
                Spacer()
                NavigationLink {
                    // 跳转目标页不要嵌套额外导航容器
                    Home()
                } label: {
                    Image(systemName: "house")
                        .resizable()
                        .frame(width: 25, height: 20)
                        .foregroundColor(.blue)
                        .padding()
                }
                Spacer()
                // 其他 tab 按钮按需补充
                Spacer()
            }
        }
    }
}
// iOS 16+ 可替换为 NavigationStack 获得更好的系统兼容性
// NavigationStack {
//     上述相同内容即可
// }

方案2：手动 ZStack 布局（自由度更高） #

如果需要完全自定义底部栏样式，可通过 ZStack 分层实现固定底部栏，不会随 ScrollView 滚动移动：

NavigationView {
    ZStack(alignment: .bottom) {
        // 顶层滚动区域
        ScrollView {
            VStack(spacing: 16) {
                // 页面滚动内容
            }
        }
        .navigationTitle("Home")
        
        // 底层固定底部栏
        HStack {
            NavigationLink {
                Home()
            } label: {
                Image(systemName: "house")
                    .resizable()
                    .frame(width: 25, height: 20)
                    .foregroundColor(.blue)
                    .padding()
            }
        }
        .frame(maxWidth: .infinity)
        .background(.bar)
        .padding(.bottom, 8)
        .ignoresSafeArea(edges: .bottom)
    }
}

快速验证步骤 #

• 临时将 NavigationLink 的 label 替换为纯色固定大小按钮，排除 label 视图的布局/遮挡问题。
• 检查跳转目标页代码，确保未嵌套独立的导航容器，避免上下文冲突。
• Xcode 14+ 运行 iOS 16 以上系统时，优先使用 NavigationStack 替换旧版 NavigationView，适配新的导航逻辑。

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