SwiftUI NavigationView leads to unwanted indentation for lists

Question

If I wrap a VStack with a List inside a NavigationView, the resulting list is indented, see image. This is not the expected formatting because I'd want the list to cover the whole screen width.

How can I fix this and why does this happen?

Note: This indentation behavior would go away if I remove the VStack, but here I do want to include the Text box ("Something...") inside the NavigationView, because I want it to go away once a user clicks on an item.

Full code below, Xcode 12.3:

import SwiftUI

struct ListView: View {
  var items: [String]
  var body :some View {
    List {
      ForEach(items, id: \.self) { item in
        NavigationLink(destination: Text(item)){
          Text(item)
        }
      }
    }
  }
}

struct ContentView: View {
    var body: some View {
      NavigationView{
        VStack{
          Text("Something that should disappear when I click on the item")
          ListView(items: ["a", "b"])
        }
      }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
      ContentView()
    }
}

score 1 · Accepted Answer · answered Jan 06 '21 at 03:29

Hey all you need to do is add the modifier for a .liststyle

.listStyle(InsetListStyle())

Also you should be aware that there is no way to remove the chevron symbol on lists

import SwiftUI

struct ListView: View {
  var items: [String]
  var body :some View {
    List {
      ForEach(items, id: \.self) { item in
        NavigationLink(destination: Text(item)){
          Text(item)
        }
      }
    }.listStyle(InsetListStyle())
  }
}

struct ContentView: View {
    var body: some View {
      NavigationView{
        VStack{
          Text("Something that should disappear when I click on the item")
          ListView(items: ["a", "b"])
        }
      }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
      ContentView()
    }
}

SwiftUI NavigationView leads to unwanted indentation for lists

1 Answers1