SwiftUI - 表单 "styling" 应用于导航目标视图
SwiftUI - Form "styling" being applied to navigation destination view
在 SwiftUI 中,每当 NavigationLink 位于表单内时,目标视图似乎也 "styled" 就好像它也在表单中一样。这对选择器等有意义,但我只想显示包含简单电子邮件客户端的内部应用程序的消息列表。请参阅下面重新创建的示例。
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")
}
}
上面的 BasicRootView 看起来不像我想要的那样,但它的链接目标看起来像一个普通列表。因此,当我尝试将它放在一个表单中以获取布局并查看我要查找的内容时,目标列表本身现在看起来也在一个表单中,这是列表开头和导航栏之间不必要的间隙。
^^ 不好
^^ 不错
^^ 不错
^^ 不好
有什么方法可以 "shed" 目标视图中的表单?
只需为您的两个列表定义 listStyle:
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)
}
}
在 SwiftUI 中,每当 NavigationLink 位于表单内时,目标视图似乎也 "styled" 就好像它也在表单中一样。这对选择器等有意义,但我只想显示包含简单电子邮件客户端的内部应用程序的消息列表。请参阅下面重新创建的示例。
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")
}
}
上面的 BasicRootView 看起来不像我想要的那样,但它的链接目标看起来像一个普通列表。因此,当我尝试将它放在一个表单中以获取布局并查看我要查找的内容时,目标列表本身现在看起来也在一个表单中,这是列表开头和导航栏之间不必要的间隙。
^^ 不好
^^ 不错
^^ 不错
^^ 不好
有什么方法可以 "shed" 目标视图中的表单?
只需为您的两个列表定义 listStyle:
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)
}
}