Hello! I am trying to make a simple app. The page I am currently working on has a few shapes in an HStack and VStack. I've used ZStack to wrap the entire code to have a different background. When I go to the AppName.swift and place the ContentView() in NavigationView{}, the outcome has too much space on the top, shifted maybe a couple of lines. In the preview, the outcome looks perfectly fine. I really do not want that much space and I do not understand why that is happening. Is there anyway I can adjust the size?
//main page of the UI
struct ContentView: View {
var body: some View {
NavigationView{
ZStack{
GeometryReader{ geometry in
VStack{
Spacer()
ZStack{
RoundedRectangle(cornerRadius: 10, style: .continuous)
.fill(Color.init(red: 0.93, green: 1.0, blue: 0.953))
.frame(width: 350, height: 50)
}
Spacer()
//
HStack(spacing:50){
RoundedRectangle(cornerRadius: 25, style: .continuous)
.fill(Color.init(red: 0.93, green: 1.0, blue: 0.953))
.frame(width: 150, height: 200)
RoundedRectangle(cornerRadius: 25, style: .continuous)
.fill(Color.init(red: 0.93, green: 1.0, blue: 0.953))
.frame(width: 150, height: 200)
}
Spacer()
HStack(spacing:50){
RoundedRectangle(cornerRadius: 25, style: .continuous)
.fill(Color.init(red: 0.93, green: 1.0, blue: 0.953))
.frame(width: 150, height: 200)
RoundedRectangle(cornerRadius: 25, style: .continuous)
.fill(Color.init(red: 0.93, green: 1.0, blue: 0.953))
.frame(width: 150, height: 200)
}
Spacer()
HStack{
TabBarIcon(width: geometry.size.width/5, height: geometry.size.height/28, systemIconName: "cart", tabName: "List")
TabBarIcon(width: geometry.size.width/5, height: geometry.size.height/28, systemIconName: "ticket", tabName: "Rewards")
ZStack{
Circle()
.fill(Color.init(red: 0.93, green: 1.0, blue: 0.953))
.foregroundColor(.white)
.frame(width: geometry.size.width/7, height: geometry.size.width/7)
.shadow(radius: 4)
Image(systemName: "plus.circle.fill")
.resizable()
.aspectRatio(contentMode: /*@START_MENU_TOKEN@*/.fill/*@END_MENU_TOKEN@*/)
.frame(width: geometry.size.width/8, height: geometry.size.width/8)
.foregroundColor(Color("TabBarBackground"))
}
.offset(y: -geometry.size.height/8/2)
TabBarIcon(width: geometry.size.width/5, height: geometry.size.height/28, systemIconName: "leaf", tabName: "SmartRecipe")
TabBarIcon(width: geometry.size.width/5, height: geometry.size.height/28, systemIconName: "rectangle.3.offgrid.bubble.left", tabName: "FoodFeed")
}.frame(width: geometry.size.width, height: geometry.size.height/8).background(Color("TabBarBackground")).shadow(radius: 2 )
}.edgesIgnoringSafeArea(.bottom).foregroundColor(.white)
}
}.navigationBarTitle(Text("Vitameal")).background(Image("bg"))
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct TabBarIcon: View{
let width, height: CGFloat
let systemIconName, tabName: String
var body: some View{
VStack{
Image(systemName: systemIconName)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: width, height: height)
.padding(.top, 10)
.foregroundColor(.white)
Text(tabName).foregroundColor(.white).font(.footnote)
Spacer()
}
.padding(.horizontal, -4)
}
}
For the AppName.swift file, this is what I tried which lead to large amount of space:
@main
struct RiyaVitaMealApp: App {
var body: some Scene {
WindowGroup {
NavigationView{
ContentView()
}
}
}
}
Selecting any option will automatically load the page