NavigationView 问题中的 SwiftUI 列表分隔符

Question

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

这是实际代码：

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 来变通，这很糟糕

NavigationView 问题中的 SwiftUI 列表分隔符

SwiftUI List Separator within NavigationView Problem

swiftui

swiftui-list

swiftui-navigationview