Weird spacing with NavigationLink and NavigationBarItems

Question

Created Oct ’20

Replies 2

Boosts 0

Views 3.0k

Participants 2

Hi everyone. I'm having trouble with a weird space that appears when I attempt to apply a NavigationLink to a view that has its own NavigationBarItems written inside of the struct. This is what my code looks like (but only pay attention to the NavigationView, NavigationBarTitle, NavigationBarItems stuff):

Code Block swiftstruct ContentView: View {
  @ObservedObject var viewModel: OlympicGame = OlympicGame()
   
  var body: some View {
    TeamCreateView()
      .environmentObject(viewModel)
  }
}

Code Block swiftstruct TeamCreateView: View {
  @EnvironmentObject var viewModel: OlympicGame
  @State var showTeamEditView: Bool = false
   
  var body: some View {
    NavigationView {
      GeometryReader { geometry in
        VStack {
          Button(action: {
            self.showTeamEditView.toggle()
          }) {
            VStack(alignment: .leading) {
              team1View().padding()
            }.frame(height: geometry.size.height * 0.45)
          }
          .sheet(isPresented: $showTeamEditView) {
            TeamEditView(team: viewModel.team1, isShowing: $showTeamEditView).environmentObject(viewModel)
          }
          Divider()
          Button(action: {
            self.showTeamEditView.toggle()
          }) {
            VStack(alignment: .leading) {
              team2View().padding()
            }.frame(height: geometry.size.height * 0.5)
          }
          .sheet(isPresented: $showTeamEditView) {
            TeamEditView(team: viewModel.team2, isShowing: $showTeamEditView).environmentObject(viewModel)
          }
        }
          .foregroundColor(Color.black)
          .navigationBarTitle("Team Select")
          .navigationBarItems(
            leading:
              Button("Back") {
              },
            trailing:
              NavigationLink(destination: EventsListView()) {
                Text("Next")
              }     
            )
        }
      }
     
     
  }

Code Block swiftstruct EventsListView: View {
  @EnvironmentObject var viewModel: OlympicGame
   
  @State var showEditEvent: Bool = false
  var body: some View {
    NavigationView {
      List {
        ForEach(self.viewModel.eventsList) { event in
          Button(action: {
            print("Size of eventsList")
          }) {
            EventsListItemView(event: event)
            .foregroundColor(Color.black)
          }
        }
        .onDelete(perform: delete)
      }
      .listStyle(PlainListStyle())
    }
    .navigationBarTitle("Events")
    .navigationBarItems(
      trailing:
        Button(action: { self.showEditEvent.toggle() }) {
          EventsListNewItemView()
        }
        .padding()
        .sheet(isPresented: $showEditEvent) {
          NewEventView(isShowing: $showEditEvent)
            .environmentObject(viewModel)
        }
         
    )
  }
   
  func delete(at offsets: IndexSet) {
    viewModel.removeEvent(at: offsets)
  }
}

There is a weird space that appears between my NavigationBarTitle and the List on my EventsListView. Am I doing Navigation wrong? Could someone maybe show me how to do NavigationBarItems correctly?

Here is a picture of what the space looks like:
https://ibb. co/G745tWc (delete the space)

Boost

Answer 1

OOPer OP

Oct ’20

Accepted Answer

Your EventsListView is a target View inside a NavigationView, so it is shown in the NavigationView.

Having NavigationView in EventsListView makes nested NavigationView.
The weird space is another navigation bar for the inner NavigationView declared in EventsListView.

Please try removing NavigationView in EventsListView:

Code Block struct EventsListView: View {
    @EnvironmentObject var viewModel: OlympicGame
    
    @State var showEditEvent: Bool = false
    var body: some View {
        //NavigationView { //<- Remove this line
            List {
                ForEach(self.viewModel.eventsList) { event in
                    Button(action: {
                        print("Size of eventsList")
                    }) {
                        EventsListItemView(event: event)
                            //.foregroundColor(Color.black)
                    }
                }
                .onDelete(perform: delete)
            }
            .listStyle(PlainListStyle())
        //} //<- Remove this line
        .navigationBarTitle("Events")
        //...
    }
    
    //...
}

2

Answer 2

danieldang OP

Oct ’20

Amazing! Thanks again, OOPer!

0