iOS16下如何通过按钮跳转至SwiftUI的Home视图？

在iOS16中，你可以通过NavigationStack结合状态变量实现按钮触发的视图跳转，完全不需要依赖列表。以下是修改后的完整代码：

import SwiftUI
import CoreData

struct ContentView: View {
    // 用于控制跳转的状态变量
    @State private var shouldNavigateToHome = false
    
    var body: some View {
        // 用NavigationStack包裹整个页面内容
        NavigationStack {
            VStack (alignment: .leading) {
                Text("Welcome To").font(.system(size: 45)).fontWeight(.heavy).foregroundColor(.primary)
                Text("Pumping Fitness").font(.system(size: 45)).fontWeight(.heavy).gradientForeground(colors: [.red, .yellow])
                Spacer()
                
                VStack (alignment: .leading, spacing: 24) {
                    HStack (alignment: .center, spacing: 20)
                    {
                        Image(systemName: "dumbbell.fill").resizable().frame(width: 40, height: 30).gradientForeground(colors: [.red, .orange])
                        
                        VStack (alignment: .leading, spacing: 4) {
                            Text("Track your workouts").bold().font(.system(size: 22)).padding(.top, 10.0)
                            Text("Easily track your progress during you are working out").font(.subheadline).padding(.bottom, 10.0)
                        }
                    }
                    
                    HStack (alignment: .center, spacing: 20)
                    {
                        Image(systemName: "timer").resizable().frame(width: 40, height: 40).gradientForeground(colors: [.red, .orange])
                        
                        VStack (alignment: .leading, spacing: 4) {
                            Text("Auto rest timer").bold().font(.system(size: 22))
                            Text("Start your rest time with one single tap").font(.subheadline).padding(.bottom, 10.0)
                        }
                    }
                    
                    HStack (alignment: .center, spacing: 20)
                    {
                        Image(systemName: "figure.run").resizable().frame(width: 40, height: 50).gradientForeground(colors: [.red, .orange])
                        
                        VStack (alignment: .leading, spacing: 4) {
                            Text("Add your own exercises").bold().font(.system(size: 22))
                            Text("Create your own type of exercises at a glance").font(.subheadline)
                        }
                    }
                }
                
                Spacer()
                Spacer()
                
                HStack(alignment: .center) {
                    Button(action: {
                        // 点击按钮触发跳转状态
                        shouldNavigateToHome = true
                    } ) {
                        Text("Start Pumping").fontWeight(.black).foregroundColor(.white)
                    }
                    .padding()
                    .frame(width: 280, height: 60)
                    .background(LinearGradient(gradient: Gradient(colors: [Color.red, Color.yellow]), startPoint: .leading, endPoint: .trailing))
                    .cornerRadius(17)
                }.padding(.leading)
            }
            .padding(.all, 40)
            // 绑定跳转目标：状态为true时导航到HomeView
            .navigationDestination(isPresented: $shouldNavigateToHome) {
                HomeView()
            }
            // 隐藏顶部导航栏（按需选择）
            .navigationBarHidden(true)
        }
    }
}

// 示例Home视图，可替换为你的自定义实现
struct HomeView: View {
    var body: some View {
        ZStack {
            Color.green.ignoresSafeArea()
            Text("Home View").font(.largeTitle).fontWeight(.bold).foregroundColor(.white)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView().environment(\.managedObjectContext, PersistenceController.preview.container.viewContext)
    }
}

extension View {
    public func gradientForeground(colors: [Color]) -> some View {
        self.overlay(LinearGradient(gradient: .init(colors: colors), startPoint: .topLeading, endPoint: .topTrailing))
            .mask(self)
    }
}

关键修改说明： #

• @State private var shouldNavigateToHome = false：SwiftUI通过监听这个状态变量的变化，自动触发视图跳转逻辑。
• NavigationStack：iOS16及以上推荐的导航容器，替代旧版的NavigationView。
• 按钮action中设置shouldNavigateToHome = true：直接触发跳转状态。
• .navigationDestination(isPresented: $shouldNavigateToHome)：绑定跳转目标视图，状态变量为true时自动完成导航。
• .navigationBarHidden(true)：如果不需要显示顶部导航栏，添加该修饰符即可隐藏。

这种方式完全不需要依赖列表，仅通过按钮点击触发状态变化实现跳转，符合你的需求。

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