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!
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: