SwiftUI中Button无法跳转至HomeView问题求解

问题说明 #

需要实现点击「Accéder à l'actualité」按钮从启动界面（StartView）跳转到首页（HomeView），但将NavigationLink嵌套在Button的action闭包中无法完成跳转，错误代码片段如下：

错误代码片段 #

Button("Accéder à l'actualité"){
    NavigationLink(destination: HomeView(), label: {
        EmptyView()
    })
}
.buttonStyle(.bordered)
.tint(Color.blue)
.foregroundColor(Color.black)

解决方案 #

在SwiftUI中，NavigationLink本身是可交互控件，无需嵌套在Button的action闭包内。以下两种方式可实现需求：

方式一：将Button作为NavigationLink的标签 #

直接用NavigationLink包裹自定义样式的按钮，既保留按钮外观，又实现跳转逻辑：

修改后的StartView完整代码：

import SwiftUI

struct StartView: View {
    var body: some View {
        // 必须将页面包裹在NavigationStack（iOS16+）或NavigationView（iOS15及以下）中
        NavigationStack {
            VStack {
                Image(systemName: "newspaper")
                    .padding(.bottom, 2.0)
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("NEWS APP")
                    .font(.title)
                    .fontWeight(.ultraLight)
                    .foregroundColor(Color.black)
                    .multilineTextAlignment(.center)
                
                // 用NavigationLink包裹按钮样式
                NavigationLink(destination: HomeView()) {
                    Text("Accéder à l'actualité")
                        .buttonStyle(.bordered)
                        .tint(Color.blue)
                        .foregroundColor(Color.black)
                }
            }
            .padding()
        }
    }
}

struct StartView_Previews: PreviewProvider {
    static var previews: some View {
        StartView()
    }
}

方式二：用状态变量控制跳转 #

适合需要先执行额外逻辑（如数据请求、状态更新）再跳转的场景，利用@State变量触发NavigationLink：

修改后的StartView完整代码：

import SwiftUI

struct StartView: View {
    @State private var willMoveToNextScreen = false
    
    var body: some View {
        NavigationStack {
            VStack {
                Image(systemName: "newspaper")
                    .padding(.bottom, 2.0)
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("NEWS APP")
                    .font(.title)
                    .fontWeight(.ultraLight)
                    .foregroundColor(Color.black)
                    .multilineTextAlignment(.center)
                
                Button("Accéder à l'actualité"){
                    // 可在此添加跳转前的逻辑
                    willMoveToNextScreen = true
                }
                .buttonStyle(.bordered)
                .tint(Color.blue)
                .foregroundColor(Color.black)
                
                // 隐藏的NavigationLink，由状态变量控制触发
                NavigationLink(
                    destination: HomeView(),
                    isActive: $willMoveToNextScreen,
                    label: { EmptyView() }
                )
                .hidden()
            }
            .padding()
        }
    }
}

struct StartView_Previews: PreviewProvider {
    static var previews: some View {
        StartView()
    }
}

额外注意事项 #

1. 必须存在导航容器：所有使用NavigationLink的页面，必须被NavigationStack（iOS16+）或NavigationView（iOS15及以下）包裹，否则跳转逻辑不会生效。
2. 避免导航容器嵌套：HomeView中当前使用了NavigationView，如果StartView已用NavigationStack，建议将HomeView的NavigationView替换为NavigationStack或直接移除外层导航容器，防止嵌套导致界面异常。

优化后的HomeView外层导航容器示例：

struct HomeView: View {
    var body: some View {
        NavigationStack {
            List(AllNews.list, id: \.id){ allNews in
                ArticleItemView(allNews: allNews)
                    .listRowSeparator(.hidden)
                    .overlay(
                        NavigationLink(
                            destination: AllNewsDescriptionView(allNews: allNews), 
                            label: { EmptyView() }
                        ).opacity(0)
                    )
            }
            .listStyle(PlainListStyle())
            .navigationTitle("Articles")
        }
    }
}

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