如果在SwiftUI中使用NavigationView，如何更改背景颜色？

Question

我想更改全屏的背景颜色。我正在使用NavigationView，我想为背景设置灰色（不是默认的白色）

struct ContentView : View {
    var body: some View {
        NavigationView {
            ScrollView {
                Text("Example")
            }
            .navigationBarTitle("titl")
        }
    }
}

设置.background(Color.red)在任何地方都不起作用。

预习

Answer 1

如果你只是嵌入在内容NavigationView中的一个ZStack，你应该能够扔颜色你的主要内容下方。

struct ContentView : View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.red.edgesIgnoringSafeArea(.all)
                ScrollView {
                    Text("Example")
                }
                .navigationBarTitle("title")
            }
        }
    }
}

Answer 2

除了 Mattis Schulte 的回答之外，我遇到的副作用之一是状态栏不会继承背景颜色。

但是，当您将列表（例如）向上滚动到视图顶部并且 iOS 切换到内嵌标题视图（具有居中的 NavigationBarTitle）时，它会在状态栏区域中显示颜色，从而留下相当不理想的用户体验。

我能够使用的解决方法是：

import SwiftUI

let coloredNavAppearance = UINavigationBarAppearance()
   
struct ListView: View {

    init() {
        coloredNavAppearance.configureWithOpaqueBackground()
        coloredNavAppearance.backgroundColor = .systemBlue
        coloredNavAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        coloredNavAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
               
        UINavigationBar.appearance().standardAppearance = coloredNavAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredNavAppearance

    }

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("General")) {
                    HStack {
                        Text("ListView #1")
                        Spacer()
                        Text("data")
                            .multilineTextAlignment(.trailing)
                    }
                    HStack {
                        Text("ListView #2")
                        Spacer()
                        Text("data")
                            .multilineTextAlignment(.trailing)
                    }
                }

            }
            .navigationBarTitle("NavBar Title")
        }
    }
}


struct ListView_Previews: PreviewProvider {
    static var previews: some View {
        ListView()
    }
}

希望这对其他人有帮助。归功于https://sarunw.com/posts/uinavigationbar-changes-in-ios13/

Answer 3

最新的解决方案是对 进行扩展UINavigationController，如下所示：

extension UINavigationController {
    override open func viewDidLoad() {
        super.viewDidLoad()

    let standard = UINavigationBarAppearance()
    standard.backgroundColor = .red //When you scroll or you have title (small one)

    let compact = UINavigationBarAppearance()
    compact.backgroundColor = .green //compact-height

    let scrollEdge = UINavigationBarAppearance()
    scrollEdge.backgroundColor = .blue //When you have large title

    navigationBar.standardAppearance = standard
    navigationBar.compactAppearance = compact
    navigationBar.scrollEdgeAppearance = scrollEdge
 }
}

或者，旧的：

在结构初始值设定项中更改UITableView颜色，如下所示：

struct ContentView : View {
init() {
    UITableView.appearance().backgroundColor = .red
    }
var body: some View {
    NavigationView {
        ScrollView {
            Text("Example")
        }
        .navigationBarTitle("title")
    }
  }
}

Answer 4

对于 iOS 16 + 中的导航栏

.toolbarBackground(.red, for: .navigationBar)

Answer 5

只需将其添加到代码的初始化程序中即可UIScrollView.appearance().backgroundColor = UIColor.red。但不幸的是，这个解决方案有很多副作用。

Answer 6

您可以做的一个小技巧是添加一个没有任何文本的文本视图，并将背景颜色添加到您想要的颜色，如下所示：

Text(" ")
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
    .background(Color.red)
    .edgesIgnoringSafeArea(.all)