How do I make my text navigate me to a subpage?

Question

I have the text "Groups" and I want to use NavigationLink to connect it to my GroupsPage subpage and take the user there when they click the Groups text.

Edit: This is how it looks with the added VStack

preview picture

This is my whole file(edit):

import SwiftUI

struct LaunchPage: View {
    var body: some View {
        NavigationStack{
            GeometryReader {geo in
                VStack{
                    ScrollView{
                    ZStack {
                        Color.clear
                            .background(.ultraThinMaterial)
                        NavigationLink("Groups", destination: GroupsPage())
                            .font(.largeTitle.weight(.bold))
                            .frame(maxWidth:.infinity, alignment: .leading)
                            .padding(.leading, 20)
                            .foregroundColor(.black)
                            .frame(height: 70)
                            .frame(maxHeight: .infinity, alignment: .top)
                        
                    }
                    
                    VStack {
                            Spacer()
                            Image("carpooly-high-resolution-logo")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: geo.size.width * 2.0, height: geo.size.width * 1.5)
                                .offset(y:-88)
                                .offset(x:-200)
                                .padding(.top, 100)
                    }
                    }.border(.red)
                }
            }
            .navigationBarHidden(true)
        }
    }

}

struct GroupsPage: View{
    var body: some View {
        Text("Groups")
            .font(.largeTitle)
            .fontWeight(.bold)
            .foregroundColor(Color.green)
            .multilineTextAlignment(.center)
            .padding(/*@START_MENU_TOKEN@*/.all, 2.0)
            .frame(width: 200.0, height: 50.0)
            .navigationBarTitle("Group Page")
    }
}

struct CalendarPage: View{
    var body: some View {
        Text("Calendar")
            .font(.largeTitle)
            .fontWeight(.bold)
            .foregroundColor(Color.green)
            .multilineTextAlignment(.center)
            .padding(/*@START_MENU_TOKEN@*/.all, 2.0)
            .frame(width: 200.0, height: 50.0)
            .navigationBarTitle("Calender Page")
    }
}

struct LaunchPage_Previews: PreviewProvider {
    static var previews: some View{
        LaunchPage()
    }
}

I have tried various types of navigation links and have also tried making the text a button. The text remained just text and did not navigate me to the GroupsPage subpage where I currently am displaying filler text. Thank you in advance!

Answer 1

To ... make my text navigate me to a subpage

Here is my working test code using NavigationLink(...) that shows how to display the text "Groups" and navigate to the GroupPage when clicked/tapped.

On MacOS 14.2, using Xcode 15.1, tested on real ios17 devices (not Previews) and MacCatalyst. It could be different on older systems.

struct ContentView: View {
    
    var body: some View {
        NavigationStack {  // <--- here
            GeometryReader { geo in
                ZStack {
                    Color.clear
                        .background(.ultraThinMaterial)
                    NavigationLink("Groups", destination: GroupPage()) // <--- here
                        .font(.largeTitle.weight(.bold))
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding(.leading, 20)
                        .foregroundColor(.black)
                        .frame(height: 70)
                        .frame(maxHeight: .infinity, alignment: .top)
                }
            }
        }
    }
}

Or, using your previous question code (with minor changes to the size of the star):

struct ContentView: View {
    
    var body: some View {
        NavigationStack {
            GeometryReader { geo in
                ZStack {
                    Color.green.edgesIgnoringSafeArea(.all)
                    ScrollView {
                        VStack {
                            Spacer()
                            Image(systemName: "star")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: geo.size.width * 0.9, height: geo.size.height * 0.8)
                                .offset(y: 25)
                                .padding(.horizontal, 20)
                            
                            Spacer()
                            
                            HStack {
                                Spacer()
                                NavigationLink("Groups", destination: GroupPage())
                                    .font(.largeTitle.weight(.bold))
                                    .frame(maxWidth: .infinity, alignment: .leading)
                                    .padding(.leading, 20)
                                    .foregroundColor(.red)  // <--- for testing
                                    .frame(height: 70)
                                    .frame(maxHeight: .infinity, alignment: .top)
                                .padding(.trailing, 20)
                            }
                        }
                    }
                    .frame(width: geo.size.width)
                }
            }
            .navigationBarHidden(false)
        }
        
    }
}

struct GroupPage: View {
    
    var body: some View {
        Text("GroupPage") // <--- for testing
            .font(.largeTitle)
            .fontWeight(.bold)
            .foregroundColor(Color.green)
            .multilineTextAlignment(.center)
            .padding(.all, 2.0)
            .frame(width: 333.0, height: 50.0)
            .navigationBarTitle("Group Page")
    }
}

EDIT-1

Your problem is that the ScrollView overlaps/covers the NavigationLink. You can see this if you add a .border(.red) to it, as shown in the example code.

You can add a VStack as shown to make the NavigationLink work, or other avenue to suit your purpose.

struct ContentView: View {
    var body: some View {
        LaunchPage()
    }
}

struct LaunchPage: View {
    
    var body: some View {
        NavigationStack {
            GeometryReader { geo in
                VStack {  // <-- here
                    ZStack {
                        Color.clear
                          .background(.ultraThinMaterial)
                        
                        NavigationLink("Groups", destination: GroupsPage())
                            .font(.largeTitle.weight(.bold))
                            .frame(maxWidth:.infinity, alignment: .leading)
                            .padding(.leading, 20)
                            .foregroundColor(.black)
                            .frame(height: 70)
                            .frame(maxHeight: .infinity, alignment: .top)
                    }
                    ScrollView {
                        VStack {
                            Spacer()
                            Image("carpooly-high-resolution-logo")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: geo.size.width * 2.0, height: geo.size.width * 1.5)
                                .offset(y:85)
                                .offset(x:-200)
                        }
                    }.border(.red) // <-- for testing
                }
            }
            .navigationBarHidden(true)
        }
    }
}