Swiftui Ios14 - Navigationview + List - Won't Fill Space

SwiftUI iOS14 - NavigationView + List - Won't fill space

Problem

It looks like the default styles of a List or NavigationView in iOS 14 may in some cases be different than in iOS 13.

Solution #1 - explicit listStyle

It's no longer always the PlainListStyle (as in iOS 13) but sometimes the InsetGroupedListStyle as well.

You need to explicitly specify the listStyle to PlainListStyle:

.listStyle(PlainListStyle())

Example:

struct ContentView: View {
    var views = ["Line 1", "Line 2", "Line 3"]

    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach(views, id: \.self) { view in
                        VStack {
                            Text("\(view)")
                        }
                        .background(Color.red)
                    }
                }
                .listStyle(PlainListStyle()) // <- add here
            }
        }
    }
}

Solution #2 - explicit navigationViewStyle

It looks like the NavigationView's default style can sometimes be the DoubleColumnNavigationViewStyle (even on iPhones).

You can try setting the navigationViewStyle to the StackNavigationViewStyle (as in iOS 13):

.navigationViewStyle(StackNavigationViewStyle())

Example:

struct ContentView: View {
    var views = ["Line 1", "Line 2", "Line 3"]

    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach(views, id: \.self) { view in
                        VStack {
                            Text("\(view)")
                        }
                        .background(Color.red)
                    }
                }
            }
        }
        .navigationViewStyle(StackNavigationViewStyle()) // <- add here
    }
}

SwiftUI List Separator within NavigationView Problem

navigationBarItems will be deprecated in the future so you should use toolbar instead

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button("Hours") { }
    }
}
.toolbar {
    ToolbarItem(placement: .navigationBarTrailing) {
        HStack {
            Button("Favorites") { }
            Button("Specials") { }
        }
    }
}

If you want to keep using navigationBarItems, there is a better work around by using other ListStyle

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("Chocolate")
                Text("Vanilla")
            }
            .navigationBarTitle(Text("Today‘s Flavors"))
            .navigationBarItems(
                leading: Button("Hours") { }
            )
            .listStyle(PlainListStyle())
        }
    }
}

do not apply navigationBarTitle on every row for a work around, it's bad

Unexpected Padding Swift UI List in NavigationView

That is the default listStyle for that combination. You should explicitly set that to plain:

.listStyle(PlainListStyle())

Blank Screen on Loading List in SwiftUI

try this approach, calling road.getList() in .onAppear{}:

struct MyPriceList: View {
    
    @StateObject var road = ListAPI()
    
    var body: some View {  // <-- here need a body
        List
        {
            ForEach(road.priceRoad)
            {
                road in
                HStack{
                    Text(road.packageName)
                        .font(.system(size: 15))
                        .foregroundColor(.black)
                }
            }
        }
        .onAppear {
            road.getList() // <-- here load your data
        }
    }
}

and make PriceList and ResponseList Identifiable, like this:

struct PriceList : Identifiable, Codable {
    let id = UUID()
    // ...
}

struct ResponseList: Identifiable, Codable {
    let id = UUID()
    // ...
}
    
struct SampleTypeList: Identifiable, Codable {
    let id = UUID()
    // ...
}

Alternatively, in ListAPI, you could have init() { getList() }, instead of using .onAppear {road.getList()}

How to fix the list strange padding when using navigationbaritems in swiftui since iOS 14?

Ok i got it...

I need to add a ListStyle to the list :

https://developer.apple.com/documentation/swiftui/liststyle

import SwiftUI

struct TestList: View {
  var body: some View {
    NavigationView{
      List {
        Text("hello world")
        Text("hello world")
        Text("hello world")
      }
      .listStyle(PlainListStyle())
      .navigationBarTitle(Text("Test List"), displayMode:.inline)
      .navigationBarItems(leading:
                            Image(systemName: "bell")
      )
    }
  }
}

struct TestList_Previews: PreviewProvider {
  static var previews: some View {
    TestList()
  }
}

when placing items in the toolbar, How do you remove the space where a navigation title would go

putting .navigationBarTitleDisplayMode(.inline) on the VStack fixes this issue. (credit: ChrisR for the comment)

---

Related Topics