Question

我要更改全屏的背景颜色。我正在使用“导航视图”，并希望将背景颜色设置为灰色（不是默认的白色）

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

设置.background(Color.red)在任何地方都无效。

preview

Answer 1

最新的解决方案具有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
 }
}

OR，旧的：

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

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

Answer 2

好吧，我刚刚尝试过omar的解决方案，但不幸的是，如果堆栈中还有其他视图，它就无法工作。

因此，到目前为止，我看到的最好的答案实际上是改变NavigationView的基础背景颜色（在OP的原始问题中），只是在UIView外观上设置背景颜色，如{{3 }}：

UIView.appearance().backgroundColor = UIColor.red

Answer 3

您可以做的一个小技巧是添加一个不包含任何文本的文本视图，然后将背景色添加到所需的内容中，如下所示：

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

Answer 4

如果您只是将内容嵌入NavigationView内的ZStack中，则应该可以在主要内容下方添加颜色。

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

Answer 5

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

Answer 6

在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 7

更改NavigationView的bg颜色并使其在内容滚动期间像缩小/放大一样正常工作并保持安全区域非常复杂

NavigationView-color-customisation on github 在这里，我发布了有关SwiftUI应用中的颜色自定义的常见问题和解决方案

如果您真的想在所有navgiationViews中更改bg颜色，则关于UINavigationController扩展的上一则评论的第一部分看起来不错

Answer 8

这是我的解决方案，因为其他案例都无法解决，所以我想我会分享。

因此，对于Navigation标题栏颜色，添加一个初始化器，如下所示：

struct ContentView: View {
    init() {
        UINavigationBar.appearance().backgroundColor = .red
    }
    var body: some View {
        NavigationView {
            ScrollView {
                ...
            }
        }
    }
}

然后要编辑ScrollView背景色，可以执行以下操作：我已经完成ListView了，但是可以为ScrollView完成。

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))
    }

}

UI示例https://imgur.com/a/TQ9c5Sc

Answer 9

很难获得“一刀切”的解决方案，但通常可以通过内省“隐藏”视图控制器并设置其背景颜色来实现。为此最好使用 SwiftUI-Introspect。在你的情况下：

struct ContentView : View {
    var body: some View {
        NavigationView {
            ScrollView {
                Text("Example")
            }
            .navigationBarTitle("titl")
            .introspectViewController { vc in
                vc.view.backgroundColor = .clear
            }
        }
    }
}

您的视图构成可能不同。要找到正确的视图，请在 Xcode 中调试您的视图层次结构并在其上设置 backgroundColor。这可能是通过 vc.parent 或 vc.parent.subviews 或视图层次结构中的其他位置。

警告：就我而言，我需要在 NavigationLink 目的地使用修饰符。

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

9 个答案: