如何在SwiftUI中设置NavigationView背景色

Question

我正在尝试设置NavigationView的背景色。我正在尝试使用以下代码（部分来自SwiftUI教程）添加一个ZStack。除非我将NavigationView...替换为Spacer()

，否则只有白色

    var body: some View {
    ZStack
        {
            NavigationView {
                List {
                    Toggle(isOn: $userData.showFavoritesOnly) {
                        Text("Favourites")
                    }
                    ForEach(userData.landmarks) { landmark in
                        if !self.userData.showFavoritesOnly || landmark.isFavorite {
                            NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
                                LandmarkRow(landmark: landmark)
                            }
                        }
                    }
                }

                .navigationBarTitle(Text("Landmarks"), displayMode: .large)
            }

    }.background(Color.blue.edgesIgnoringSafeArea(.all))
}

我可以设置单个列表项的颜色，但我希望整个背景显示为蓝色

Answer 1

它与UINavigationBar相同。但是，由于还没有直接的api，您可以使用appearance进行更改：

UINavigationBar.appearance().backgroundColor = .orange
UINavigationBar.appearance().tintColor = .green
UINavigationBar.appearance().barTintColor = .yellow
UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.red]
UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.red]

您应该将其放置在可以确保编译器读取的位置，例如init()方法内部。

请注意，其中某些将在Xcode 11 beta 5以下版本中不起作用。

Answer 2

这是我想出的解决方案...此解决方案还允许您将背景单元格的颜色设置为与列表元素不同的颜色。

因为ZStack无法正常工作，并且UIView / UINavigationBar.appearance（）。backgroundColor会更改整个可见屏幕的颜色。

我想我会补充一点，因为没有其他解决方案对我有用。

struct ListBackgroundColor: ViewModifier {

    let color: UIColor

    func body(content: Content) -> some View {
        content
            .onAppear() {
                UITableView.appearance().backgroundColor = self.color
                //(Optional) Edit colour of cell background
                UITableViewCell.appearance().backgroundColor = self.color
            }
    }
}   

extension View {
    func listBackgroundColor(color: UIColor) -> some View {
        ModifiedContent(content: self, modifier: ListBackgroundColor(color: color))
    }

}