hiding the navigation bar while scrolling SwiftUI - swiftui

Question

Hello I am new to swiftUI and am making my first app, my current issue is that I am not sure if it is possible to hide my navigation bar while scrolling using the methods I got from a nav bar tutorial I found. I have tried to implement the UINavigationBar stuff but I don't think its at all compatable with what I have so far. I'm pretty sure if I wanted to go that route I would have to rewrite most of what I have to fit that format.
I was hoping that maybe I am missing a step when doing this so I don't have to rewrite what I have
here's my current code
import Foundation
import SwiftUI
struct ContentView: View{
#State var showMenu = false
#State var scoreUp = false
#State var commentP = false
#State var tags = false
#State var sauce = false
var body: some View{
let drag = DragGesture()
.onEnded {
if $0.translation.width < -100 {
withAnimation {
self.showMenu = false
}
}
}
let dragOpen = DragGesture()
.onEnded {
if $0.translation.width > 100 {
withAnimation {
self.showMenu = true
}
}
}
return NavigationView {
GeometryReader { geometry in
ZStack(alignment: .leading) {
/// this is the main view for the second page allowing most of the app features
MainView(showMenu: self.$showMenu, scoreUp: self.$scoreUp, commentP : self.$commentP,tags : self.$tags,sauce :self.$sauce)
.frame(width: geometry.size.width, height: geometry.size.height)
.offset(x: self.showMenu ? geometry.size.width/2 : 0)
.disabled(self.showMenu ? true : false)
.gesture(dragOpen)
if self.showMenu {
HamburgerMenuView(showMenu: self.$showMenu)
.frame(width: geometry.size.width/2, height: geometry.size.height)
.transition(.move(edge: .leading))
.gesture(drag)
}
if self.scoreUp {
// TO DO : MAke this button score up a post
Image(systemName: "arrow.up")
.animation(.interpolatingSpring(stiffness: 50, damping: 1), value: 10)
}
}
}
.navigationBarItems(leading: (
Button(action: {
withAnimation {
self.showMenu.toggle()
}
}) {
Image(systemName: "line.horizontal.3")
.imageScale(.large)
}
))
}
}
}
// this is the main view for both the content view and when the menu is displayed
struct MainView: View{
/// shows the hamburger menu when set to true
#Binding var showMenu : Bool
/// SCORES up posts when set to true
#Binding var scoreUp : Bool
/// allows the user to add a comment to the post if set to true
/// move the view up and give the user a text box
#Binding var commentP : Bool
/// allows the user to see the Tags on the image
#Binding var tags : Bool
/// allows the user to see the Source on the image
#Binding var sauce : Bool
var body: some View {
GeometryReader { geometry in
ZStack() {
Image("");
ScrollView {
VStack(spacing: 20) {
VStack(alignment: HorizontalAlignment.leading){
Text("Test")
.bold();
Image("Test")
.resizable()
.scaledToFit()
HStack() {
Button(action : {
withAnimation{
self.scoreUp = true
}
print("Score up")
}) {
Image(systemName: "arrow.up")
.padding(1)
};
Text("1025");
Button(action : {
withAnimation{
self.commentP = true
}
print("comment")
}) {
Image(systemName: "text.bubble")
.padding(1)
};
Button(action : {
withAnimation{
self.tags = true
}
print("Tags")
}) {
Image(systemName: "tag")
.padding(1)
};
Button(action : {
withAnimation{
self.sauce = true
}
print("sauce?")
}) {
Image(systemName: "eyes")
.padding(1)
};
}
Text("Test")
Image("Test")
.resizable()
.scaledToFit();
Text("Test")
Image("Test")
.resizable()
.scaledToFit()
}
Button(action: {
withAnimation {
self.showMenu = true
}
print("Open the side menu")
}) {
Text("Show Menu");
}
.hidden()
}
}
}
}
}
}
/// this is the hamburger menu itself
struct HamburgerMenuView : View {
#Binding var showMenu : Bool
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading) {
HStack {
Image(systemName: "person")
.foregroundColor(.gray)
.imageScale(.large)
Text("Profile")
.foregroundColor(.gray)
.font(.headline)
.padding(10)
}
HStack {
Image(systemName: "gear")
.foregroundColor(.gray)
.imageScale(.large)
Text("Settings")
.foregroundColor(.gray)
.font(.headline)
.padding(10)
}
HStack {
Image(systemName: "person")
.foregroundColor(.gray)
.imageScale(.large)
Text("Favorites")
.foregroundColor(.gray)
.font(.headline)
.padding(10)
}
HStack {
Image(systemName: "person")
.foregroundColor(.gray)
.imageScale(.large)
Text("Posts")
.foregroundColor(.gray)
.font(.headline)
.padding(10)
}
HStack {
Image(systemName: "person")
.foregroundColor(.gray)
.imageScale(.large)
Text("Comments")
.foregroundColor(.gray)
.font(.headline)
.padding(10)
}
HStack {
Image(systemName: "person")
.foregroundColor(.gray)
.imageScale(.large)
Text("Artists")
.foregroundColor(.gray)
.font(.headline)
.padding(10)
}
HStack {
Image(systemName: "person")
.foregroundColor(.gray)
.imageScale(.large)
Text("Tags")
.foregroundColor(.gray)
.font(.headline)
.padding(10)
}
HStack {
Image(systemName: "person")
.foregroundColor(.gray)
.imageScale(.large)
Text("More")
.foregroundColor(.gray)
.font(.headline)
.padding(10)
}
}
.padding()
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
.background(Color(red: 32/255, green: 32/255, blue: 32/255))
.edgesIgnoringSafeArea(.all)
}
Spacer()
}
}
//// TO DO
//class underImageBar {
//
//
//HStack() {
//Button(action : {
// withAnimation{
// self.scoreUp = true
//}
// print("Score up")
// }) {
// Image(systemName: "arrow.up")
// .padding()
//
//
// };
//Button(action : {
// withAnimation{
// self.commentP = true
//}
// print("comment")
// }) {
// Image(systemName: "text.bubble")
// .padding()
//
//
// };
//Button(action : {
// withAnimation{
// self.tags = true
//}
// print("Tags")
// }) {
// Image(systemName: "tag")
// .padding()
// };
//Button(action : {
// withAnimation{
// self.sauce = true
// }
// print("sauce?")
// }) {
// Image(systemName: "eyes")
// .padding()
//
// };
// }
//}
/// this previews the code
struct menuView: PreviewProvider {
static var previews: some View {
Group {
ContentView()
.toolbar {
}
}
}
}
this was supposed to be a gif stack overflow just made it a jpeg lol?

Answer 1

There is a view modifier for that.
.navigationBarHidden(true)
I hope this helps out.