swiftswiftuitextxcode15hstack

Why is my text not showing up on my simulation screen?


I am working on my launchpage of an app in swiftui using xcode 15.0.1 I have created a navbar element and want to put the text "Groups" at the top and use it as a button to take users to the GroupsPage. This is my file:

import SwiftUI

struct LaunchPage: View {
    var body: some View {
        NavigationView{
            ZStack{
                Color.green.edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
                ScrollView{
                    VStack {
                        Spacer()
                        
                        Image("carpooly-high-resolution-logo")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 700, height: 500)
                            .offset(y:25)
                            .padding(.horizontal, 20)
                        
                        HStack{
                            Spacer()
                            
                            NavigationLink(destination: GroupPage()) {
                                Text("Groups")
                                .font(.system(size: 16, weight:.bold))
                                .foregroundColor(.primary)
                                .frame(maxWidth: .infinity, alignment: .trailing)
                            }
                                .padding(.trailing, 20)
                        }
                    }
                }
            }
            .navigationBarHidden(false)
        }
    }
}

struct GroupPage: 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 LaunchPage_Previews: PreviewProvider {
    static var previews: some View{
        LaunchPage()
    }
}

When I preview the page, the text Groups in the HStack container is not being shown. Thank you for your help!

I have tried changing the colors of the text. I have tried changing the navigation a little bit but any solutions with navigation would be greatly appreciated as well!


Solution

  • It's because your Image's width is too large. It's larger than the screen width. So the HStack, with Groups text inside, which was aligned on the bottom-right, will be out of the screen (since they are both nested in ScrollView). That's why you don't see it. Try to make your Image smaller.

    I will put it inside GeometryReader which means the LaunchPage takes the parent layout as its size.

    NavigationView {
        GeometryReader { geo in // <- wrap inside `GeometryReader`
            ZStack {
                Color.green.edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
                ScrollView {
                    VStack {
                        Spacer()
                        
                        Image(systemName: "star")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
    //                        .frame(width: 700, height: 500)
                            .frame(width: geo.size.width, height: geo.size.width * 1.5)
                            .offset(y:25)
                            .padding(.horizontal, 20)
                        
                        Spacer()
                            .frame(height: 100)
                        
                        HStack {
                            Spacer()
                            
                            NavigationLink(destination: GroupPage()) {
                                Text("Groups")
                                    .font(.system(size: 16, weight:.bold))
                                    .foregroundColor(.primary)
                                    .frame(maxWidth: .infinity, alignment: .trailing)
                            }
                            .padding(.trailing, 20)
                        }
                    }
                }
                .frame(width: geo.size.width)
            }
        }
        .navigationBarHidden(false)
    }
    

    Output here:

    enter image description here