Go to SwiftUi View File "Home" with button - ios

Question

I'm trying to go to my SwiftUi View File Home by clicking my button in iOS 16:
I already read Apple documentation and searched in Google and YouTube but I didn't got the answer.
Here is my code:
import SwiftUI
import CoreData
struct ContentView: View {
var body: some View {
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 creado para poder alinear el boton al centro.
HStack(alignment: .center) {
Button(action: {} ) {
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)
}
}
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)
}
}
Do you know how can I do it? All the YouTube videos I saw were using a list, and I want to show this "welcome page" then go to my home page.

Answer 1

You need to refactor your code a bit. Use ContentView as your module for navigationStack. Separate ContentView code to WelcomeView and use it as Follows:
struct WelcomeView: View {
#Binding var gotoSomewhere: Bool // I recommend you to read some articles about #Sate and #Binding property wrappers
var body: some View {
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 creado para poder alinear el boton al centro.
HStack(alignment: .center) {
Button(action: {
print("Tap Tap")
gotoSomewhere = 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)
}
}
Then update your contentView with NavigationStack like this:
import SwiftUI
import CoreData
struct ContentView: View {
#State var gotoHomePage: Bool = false // this is important
var body: some View {
NavigationStack {
VStack {
WelcomeView(gotoSomewhere: $gotoHomePage)
NavigationLink(isActive: $gotoHomePage) {
HomeView() // This is your Home View you want to navigate to
.navigationBarBackButtonHidden(true) // if you want a back button then pass false or comment this modifier
} label: {
EmptyView()
}
}
.navigationBarHidden(true)
}
}
}
Hope this helps.

Answer 2

If you're looking to use a navigation stack, then you'd want to wrap your View body inside a NavigationView. If you're targeting iOS 16+ you should use NavigationStack instead (https://developer.apple.com/documentation/swiftui/migrating-to-new-navigation-types). Hacking with Swift also has an article on NavigationStack.
There is some more useful info on NavigationView on the Hacking with Swift blog here, as well as other resources you should be able to find online. There are some examples there you could use in your situations such as:
struct ContentView: View {
#State private var isShowingDetailView = false
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: Text("Second View"), isActive: $isShowingDetailView) { EmptyView() }
Button("Tap to show detail") {
self.isShowingDetailView = true
}
}
.navigationTitle("Navigation")
}
}
}
This question is pretty similar: How to show NavigationLink as a button in SwiftUI