Adding Trailing Item to NavigationView Changes Appearance

Question

Created Jan ’21

Replies 2

Boosts 0

Participants 2

Hello, I'm relatively new to coding, and I was creating a list under a NavView which I plan on changing into a dynamic list soon. Anyways, my NavView is set up with a title, and I wanted to add a "+" button on the top right, so I used the trailing items to add the button. However, for some reason, the background colors of the list items change and the line dividers between each list item seem to be misaligned. I wanted to know why adding a trailing item messes everything up. Please see the attached screenshots (before trailing item and after trailing item is added) as well as my code.

Thank you!

Code Block struct GradesDisplayRow: View {
  var body: some View {
    NavigationView {
    List {
      HStack {
        VStack(alignment: .leading) {
        Text("32.5 / 33")
          .font(.largeTitle)
          .padding(.top, 5)
          .frame(width: 250.0, alignment: .leading)
          Text("Summative Assessment (Chapter 3-5) ").font(.body)
            .padding(.bottom, 5)
            .frame(width: 280.0, alignment: .leading)
        }
        Spacer()
        Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
          Text("EDIT")
            .fontWeight(.semibold)
            .foregroundColor(Color.darkGray)
        }
         
        .frame(height: 2.0)
        .foregroundColor(.black)
          .padding()
        .background(Color.lightGray)
          .cornerRadius(20)
     
      }
      HStack {
        VStack(alignment: .leading) {
        Text("15 / 16.5")
          .font(.largeTitle)
          .padding(.top, 5)
          .frame(width: 250.0, alignment: .leading)
          Text("Chapter Review Packet ").font(.body)
            .padding(.bottom, 5)
            .frame(width: 280.0, alignment: .leading)
        }
        Spacer()
        Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
          Text("EDIT")
            .fontWeight(.semibold)
            .foregroundColor(Color.darkGray)
        }
         
        .frame(height: 2.0)
        .foregroundColor(.black)
          .padding()
        .background(Color.lightGray)
          .cornerRadius(20)
     
      }
      HStack {
        VStack(alignment: .leading) {
        Text("3 / 3")
          .font(.largeTitle)
          .padding(.top, 5)
          .frame(width: 250.0, alignment: .leading)
          Text("Homework for 2/29 ").font(.body)
            .padding(.bottom, 5)
            .frame(width: 280.0, alignment: .leading)
        }
        Spacer()
        Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
          Text("EDIT")
            .fontWeight(.semibold)
            .foregroundColor(Color.darkGray)
        }
         
        .frame(height: 2.0)
        .foregroundColor(.black)
          .padding()
        .background(Color.lightGray)
          .cornerRadius(20)
     
      }
      HStack {
        VStack(alignment: .leading) {
        Text("32.5 / 33")
          .font(.largeTitle)
          .padding(.top, 5)
          .frame(width: 250.0, alignment: .leading)
          Text("Summative Assessment over Triangles ").font(.body)
            .padding(.bottom, 5)
            .frame(width: 280.0, alignment: .leading)
        }
        Spacer()
        Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
          Text("EDIT")
            .fontWeight(.semibold)
            .foregroundColor(Color.darkGray)
        }
         
        .frame(height: 2.0)
        .foregroundColor(.black)
          .padding()
        .background(Color.lightGray)
          .cornerRadius(20)
     
      }
    }.navigationBarTitle("Grades")
      .navigationBarItems(trailing: Button(action: {}) {
        Image(systemName: "plus")
          }
      )
    .navigationViewStyle(StackNavigationViewStyle())
     
       
    }
     
     
     
   
   }
}

With Trailing Item

Without Trailing Item

Answered by OOPer in 659067022

I assume you mean navigationBarItems with trailing item.
(It adds a trailing item to navigation bar.)

I wanted to know why adding a trailing item messes everything up.

Not clearly documented, but the style of container may affect the default styles of content in SwiftUI.

Please try specifying the listStyle explicitly:

Code Block     var body: some View {
        NavigationView {
            List {
                //...
            }
            .listStyle(InsetListStyle()) //<-
            .navigationBarTitle("Grades")
            .navigationBarItems(trailing:
                Button(action: {}) {
                    Image(systemName: "plus")
                }
            )
            .navigationViewStyle(StackNavigationViewStyle())
        }
    }

Boost

Answer 1

OOPer OP

Jan ’21

Accepted Answer

I assume you mean navigationBarItems with trailing item.
(It adds a trailing item to navigation bar.)

I wanted to know why adding a trailing item messes everything up.

Not clearly documented, but the style of container may affect the default styles of content in SwiftUI.

Please try specifying the listStyle explicitly:

Code Block     var body: some View {
        NavigationView {
            List {
                //...
            }
            .listStyle(InsetListStyle()) //<-
            .navigationBarTitle("Grades")
            .navigationBarItems(trailing:
                Button(action: {}) {
                    Image(systemName: "plus")
                }
            )
            .navigationViewStyle(StackNavigationViewStyle())
        }
    }

1

Answer 2

Hu is I OP

Jan ’21

Wow, that fixed it. Thank you so much! As a new developer this is absolutely mindblowing.

0