NavigationView 中的 SwiftUI 列表分隔符问题

Question

我不确定这是否是众所周知的问题，但这很奇怪。可以使用Apple的示例代码重现该问题 navigationBarItems(leading:trailing :) 正如您所看到的，列表分隔符有额外的前导空格，看起来像是由于某种原因缩进的。

这是实际代码：

import Foundation
import SwiftUI
import UIKit
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("Chocolate")
                Text("Vanilla")
                Text("Strawberry")
            }
            .navigationBarTitle(Text("Today‘s Flavors"))
            .navigationBarItems(leading:
                HStack {
                    Button("Hours") {
                        print("Hours tapped!")
                    }
                }, trailing:
                HStack {
                    Button("Favorites") {
                        print("Favorites tapped!")
                    }

                    Button("Specials") {
                        print("Specials tapped!")
                    }
                }
            )
        }
    }
}

PlaygroundPage.current.setLiveView(ContentView())

我用 Playground 测试了上面的代码，iPhone 13/15.3.1 它们是相同的。 我搞乱了代码，发现将 .navigationBarTitle()、.navigationBarItems() 应用于 List 会导致问题。它们必须适用于每个列表项。不过很奇怪。这意味着几乎所有用 NavigationView 包装的 List 示例代码都是错误的。这是我找到的修复方法。

import Foundation
import SwiftUI
import UIKit
import PlaygroundSupport

struct ContentView: View {
    let contents = ["Chocolate", "Vanilla", "Strawberry"]

    var body: some View {
        NavigationView {
            List {
                ForEach (contents, id: \.self) { content in
                    Text(content)
                        .navigationBarTitle(Text("Today‘s Flavors"))
                        .navigationBarItems(leading:
                            HStack {
                                Button("Hours") {
                                    print("Hours tapped!")
                                }
                            }, trailing:
                            HStack {
                                Button("Favorites") {
                                    print("Favorites tapped!")
                                }

                                Button("Specials") {
                                    print("Specials tapped!")
                                }
                            }
                        )
                }
            }
        }
    }
}

PlaygroundPage.current.setLiveView(ContentView())

虽然我不确定是否可以称这是一个错误，但文档或实现肯定是错误的。有人能解释一下吗？

Answer 1

navigationBarItems 将来将被弃用，因此您应该使用 toolbar 代替。

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button("Hours") { }
    }
}
.toolbar {
    ToolbarItem(placement: .navigationBarTrailing) {
        HStack {
            Button("Favorites") { }
            Button("Specials") { }
        }
    }
}

如果您想继续使用 navigationBarItems，有一个更好的解决方法：其他 ListStyle

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("Chocolate")
                Text("Vanilla")
            }
            .navigationBarTitle(Text("Today‘s Flavors"))
            .navigationBarItems(
                leading: Button("Hours") { }
            )
            .listStyle(PlainListStyle())
        }
    }
}

不要在每一行上应用 navigationBarTitle 来解决问题，这很糟糕

Answer 2

您需要将ANY（无论您想要什么）样式应用于列表，然后一切都会好的。