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

Question

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

55

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

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

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

预览

- Ivan Vorobei

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- l1Dan · Answer 1

SwiftUI中的NavigationView和UIKit中的UINavigationBar同样繁琐，我有一个第三方开源解决方案，希望能帮助您解决这个问题。

Git仓库：NXNavigationExtension

更改NavigationView颜色：

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            NavigationLink {
                Text("Pop")
                    .padding()
                    .useNXNavigationView(onPrepareConfiguration: { configuration in
                        // Page2
                        configuration.navigationBarAppearance.backgroundColor = .green
                    })
            } label: {
                Text("Push")
                    .padding()
                    .useNXNavigationView(onPrepareConfiguration: { configuration in
                        // Page1
                        configuration.navigationBarAppearance.backgroundColor = .red
                    })
            }
        }
        .navigationViewStyle(.stack)
    }
    
}

示例

- alexis · Answer 2

更改NavigationView的背景颜色并使其正常工作非常复杂，例如在内容滚动期间进行缩小/放大以及保持安全区域。

Github上NavigationView颜色自定义我在这里发布了有关SwiftUI应用程序中颜色自定义的常见问题和解决方案

此外，如果您真的想要在所有NavigationView中更改背景颜色，则前一个评论关于UINavigationController扩展的第一部分看起来不错。

- Muhammad Danish Qureshi · Answer 3

借助这篇文章的帮助，我在SwiftUI中更新了我的导航视图的颜色。

NavigationView {
    VStack{}
    .navigationBarColor(.black, tintColor: .white) 
}

这个方法在View类中不可用，所以要写一个扩展。

extension View {

func navigationBarColor(_ backgroundColor: Color?, tintColor: Color?) -> some View {
    self.modifier(NavigationBarModifier(backgroundColor: UIColor(backgroundColor ?? .white), tintColor: UIColor(tintColor ?? .black)))
}

}

我们现在没有NavigationBarModifier，所以我们需要在我们的代码中添加这个类。

struct NavigationBarModifier: ViewModifier {
    var backgroundColor: UIColor?

init(backgroundColor: UIColor?, tintColor: UIColor?) {
    self.backgroundColor = backgroundColor

    let coloredAppearance = UINavigationBarAppearance()
    coloredAppearance.configureWithTransparentBackground()
    coloredAppearance.backgroundColor = .clear
    coloredAppearance.titleTextAttributes = [.foregroundColor: tintColor as Any]
    coloredAppearance.largeTitleTextAttributes = [.foregroundColor: tintColor as Any]

    UINavigationBar.appearance().standardAppearance = coloredAppearance
    UINavigationBar.appearance().compactAppearance = coloredAppearance
    UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
    UINavigationBar.appearance().tintColor = tintColor

}

func body(content: Content) -> some View {
    ZStack{
        content
        VStack {
            GeometryReader { geometry in
                Color(self.backgroundColor ?? .clear)
                    .frame(height: geometry.safeAreaInsets.top)
                    .edgesIgnoringSafeArea(.top)
                Spacer()
            }
        }
    }
}
}

现在导航视图的颜色已经改变。