Search code examples
swiftswiftuinavigationview

(SwiftUI) NavigationLink is not full width of screen


When the NavigationView is in the root, and NavigationLink is in the subView, like the code below, the label of navigation link cannot take the full width of screen.

If I move the NavigationView to the subView(ListView), the label will be full width, but I cannot navigate to a full screen destination.

Can anyone help? the requirement is 1. full width of navigation link label and 2. navigate to a full screen view. Or should I use fullScreenCover to do this?

    struct ContentView: View {
        var body: some View {
            NavigationView {
                VStack {
                    ListView()
                    Text("Tabs here")
                }
            }
        }
    }
    
    struct ListView: View {
        var body: some View {
            List {
                NavigationLink(
                    destination: Text("detail for item1"),
                    label: {
                        Text("item1")
                    }
                )
                NavigationLink(
                    destination: Text("detail for item2"),
                    label: {
                        Text("item2")
                    }
                )
            }
        }
    }

enter image description here


Solution

  • Using PlainListStyle() will cause the rows to take up the entire width:

    List {
      NavigationLink(
          destination: Text("detail for item1"),
          label: {
              Text("item1")
          }
      )
      NavigationLink(
          destination: Text("detail for item2"),
          label: {
              Text("item2")
          }
      )
    }.listStyle(PlainListStyle())
    

    enter image description here