SwiftUI NavigationView 背景颜色

Posted

技术标签:

【中文标题】SwiftUI NavigationView 背景颜色【英文标题】:SwiftUI NavigationView background color 【发布时间】:2020-11-03 18:31:46 【问题描述】:

我有一个ScrollView,在VStack 中显示项目列表,而不是使用List。我想复制 .large 导航栏标题的行为,其中背景颜色使用 .systemGroupedBackground

这是我想要的List 的行为。 Summary 的背景是透明的。

这是我在使用 ScrollView + VStack 时得到的行为。注意大导航栏的白色背景。

重现两者的代码是

import SwiftUI

struct MyContentView: View 
    var body: some View 
        NavigationView 
            ScrollView 
                VStack(spacing: 8) 
                    Text("One")
                        .roundedContainer()
                    Text("Two")
                        .roundedContainer()
                
                .padding()
            
            .background(Color(.systemGroupedBackground))
            .navigationBarTitle("Summary", displayMode: .large)
        
    


struct MyListContentView: View 
    var body: some View 
        NavigationView 
            List
                Text("One")
                    .padding()
                Text("Two")
                    .padding()
            
            .listStyle(InsetGroupedListStyle())
            .navigationBarTitle("Summary", displayMode: .large)
        
    



extension View 
    func roundedContainer() -> some View 
        self
            .frame(maxWidth: .infinity)
            .padding(.vertical)
            .background(Color.white)
            .cornerRadius(10)
    


struct MyContentView_Previews: PreviewProvider 
    static var previews: some View 
        Group 
            MyContentView()
            MyListContentView()
        
    

【问题讨论】:

【参考方案1】:

您可以按照here 的描述引入自定义 ViewModifier。

工作示例:

import SwiftUI

struct NavigationBarModifier: ViewModifier 
    var backgroundColor: UIColor?

    init(backgroundColor: UIColor?) 
        self.backgroundColor = backgroundColor
    

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


extension View 

    func navigationBarColor(_ backgroundColor: UIColor?) -> some View 
        self.modifier(NavigationBarModifier(backgroundColor: backgroundColor))
    



struct MyContentView: View 
    var body: some View 
        NavigationView 
            ScrollView 
                VStack(spacing: 8) 
                    Text("One")
                        .roundedContainer()
                    Text("Two")
                        .roundedContainer()
                
                .padding()
            
            .background(Color(.systemGroupedBackground))
            .navigationBarTitle("Summary", displayMode: .large)
            .navigationBarColor(.systemGroupedBackground)
        
    

【讨论】:

这不会修改我的整个应用程序的导航栏吗? 您仅在特定视图上应用该修改 - 在您的情况下,修改的是视图 MyContentView 中的 ScrollView。其他视图未修改。 但修饰符调用UINavigationBar.appearance() 用于任何导航栏 它也不能完全重现 List 行为。您会注意到,列表导航栏在折叠时具有不同的颜色,并且它有一个底部边框 您可以忽略UINavigationBar.appearance() 部分。我已经编辑了上面的解决方案。 List 没有被转载,你是对的。我不知道您解决了两个问题(导航栏背景和列表样式)。

以上是关于SwiftUI NavigationView 背景颜色的主要内容,如果未能解决你的问题,请参考以下文章

使用 NavigationView 和 List 时如何更改 SwiftUI 中的背景颜色?

iOS SwiftUI:使用 ScrollView 和 ZStack 正确堆叠 NavigationView?

NavigationView + TextField 背景

SwiftUI嵌入Stack样式导航视图(NavigationView)中List显示怪异的解决

SwiftUI 更改内联 navigationBarTitleDisplayMode 的导航栏背景颜色

NavigationView 的内容未显示 SwiftUI