SwiftUI-表单“样式”应用于导航目标视图

时间:2019-09-09 18:56:02

标签: swiftui ios13

在SwiftUI中,每当NavigationLink位于表单中时,目标视图似乎也被“样式化”,就好像它也在表单中一样。这对于选择器等很有用,但是我只想显示一个内部应用程序的消息列表,该应用程序包括一个简单的电子邮件客户端。请参见下面的重新创建的示例。

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看起来不像我想要的那样,但是其链接的目标看起来像一个普通列表。因此,当我尝试将其放在表单中以获取布局并查找所需的外观时,目标列表现在本身也看起来像在表单中,这是列表开头和导航栏之间不必要的间隙。

BadFolderView

^^不好

GoodMessageView

^^好

GoodFolderView

^^好

BadMessageView

^^不好

有什么方法可以在目标视图中“删除”表单?

1 个答案:

答案 0 :(得分:1)

只需为两个列表定义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)
    }
}