SwiftUI - Form "styling" being applied to navigation destination view - swiftui

Question

In SwiftUI, whenever a NavigationLink is inside a form, the destination view also seems to "styled" as if it's also in the form. This makes sense for pickers and such, but I'm just wanting to display a list of messages for an internal app that includes a simple email client. See recreated example below.
import SwiftUI
struct BasicRootView: View {
var body: some View {
NavigationView {
VStack(alignment: .leading) {
MailboxListView()
Spacer()
}
}
}
}
struct FormRootView: View {
var body: some View {
NavigationView {
Form {
MailboxListView()
}
}
}
}
struct MessageListView: View {
var body: some View {
List(0..<30) { i in
Text("Message \(i)")
}
.navigationBarTitle("Mailbox", displayMode: .inline)
}
}
struct MailboxListView: View {
var body: some View {
Section(header: Text("account#domain.com").font(.headline)) {
NavigationLink(destination: MessageListView()) {
HStack {
Image(systemName: "tray")
.font(.body)
Text("Inbox")
}
}
NavigationLink(destination: MessageListView()) {
HStack {
Image(systemName: "paperplane")
.font(.body)
Text("Sent")
}
}
NavigationLink(destination: MessageListView()) {
HStack {
Image(systemName: "bin.xmark")
.font(.body)
Text("Spam")
}
}
NavigationLink(destination: MessageListView()) {
HStack {
Image(systemName: "trash")
.font(.body)
Text("Trash")
}
}
}
.navigationBarTitle("Accounts")
}
}
The BasicRootView above doesn't look as I want it to, but the destination of its links looks like a normal list. So when I try to put it in a form to get the layout and look I'm going for, the destination list now itself looks like it's in a form as well, an unnecessary gap between the start of the list and the nav bar.
^^ No good
^^ Good
^^ Good
^^ No Good
Any way to "shed" the form in a destination view?

Answer 1

Just define the listStyle for both of your lists:
struct FormRootView: View {
var body: some View {
NavigationView {
List {
MailboxListView()
} .listStyle(GroupedListStyle())
}
}
}
struct MessageListView: View {
var body: some View {
List(0..<30) { i in
Text("Message \(i)")
} .listStyle(PlainListStyle())
.navigationBarTitle("Mailbox", displayMode: .inline)
}
}