SwiftUI - 设置状态栏背景颜色以与导航栏对齐答案

【问题标题】：SwiftUI - Set statusbar background color to align with navigation barSwiftUI - 设置状态栏背景颜色以与导航栏对齐
【发布时间】：2020-03-19 12:27:09
【问题描述】：

我正在尝试设置状态栏的背景颜色以使其与导航栏颜色对齐。在 UIKit 中，我会在它下面放置一个视图。在 SwiftUI 中，我尝试使用 ZStack，但大标题不再起作用。

所以这是我目前没有绿色状态栏的工作状态：

 var body: some View {
        NavigationView {
            
            ScrollView {
                Text("Lol 123 Lol")
                    .foregroundColor(Color.secondary)
                    .padding([.top, .bottom], 16)
                    .padding([.leading,.trailing], 16)
                TwoTextFieldsView(isSecondSecure: true,
                                  firstTextFieldText: username,
                                  secondTextFieldText: password,
                                  firstTextFieldPlaceholder: "Username",
                                  secondTextFieldPlaceholder: "Password")
                    .padding([.leading,.trailing, .bottom], 16)
                
                
                
            }
            .navigationBarTitle("Connect to Lol")
            .onTapGesture {
                self.hideKeyboard()
            }
            
        }
        
    }

它看起来像：

【问题讨论】：

不，如果我使用.inline 而不是.largeTitle，这个例子才有效。如果我使用largeTitle - 向上滚动并且标题变小 - 手势不再起作用。
你有什么解决办法吗？
有什么解决办法吗？

标签： ios swift uinavigationbar swiftui statusbar

【解决方案1】：

你必须添加

.edgesIgnoringSafeArea(.all)

背景颜色下的修饰符。

struct ContentView: View {
    @State private var password = ""
    
    var body: some View {
        NavigationView {
            ZStack {
                
                Color.green
                    .edgesIgnoringSafeArea(.all) //<-- Add this modifier to the background Color
                
                VStack {
                    ScrollView {
                        Text("Lol 123 Lol")
                            .foregroundColor(Color.secondary)
                            .padding([.top, .bottom], 16)
                            .padding([.leading,.trailing], 16)
                        TextField("Test", text: $password)
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                            .padding([.leading,.trailing, .bottom], 16)
                    }
                    .navigationBarTitle("Connect to Lol")
                }
            }
        }
    }
}

希望对你有帮助。

【讨论】：

但是我把事情推到了顶部——而且大标题不是它应该在的地方。所以这行不通。或者你有工作代码示例吗？
这就是我写相应更改顶部填充的原因。在 .edgesIgnoringSafeArea(.top) 下添加 .padding(.top, 40) 之类的东西应该可以解决问题。使用 edgesIgnoringSafeArea 修饰符会给 UI 带来一些问题，但据我所知，这是将视图移动到状态栏后面的唯一方法。
但是它仍然会移动导航栏和标题 - 所以这对我来说不是一个可接受的解决方案，因为导航栏应该保持在它的位置。

【解决方案2】：

此代码适用于修饰符.navigationBarTitle("Connect to Lol", displayMode: .inline)：

struct ContentView1: View {
    @State private var password = ""
    
    init() {
        UINavigationBar.appearance().barTintColor = .brown
    }
    
    
    var body: some View {
            NavigationView {
                
                ScrollView {
                    Text("Lol 123 Lol")
                        .foregroundColor(Color.secondary)
                                            .padding([.top, .bottom], 16)
                                            .padding([.leading,.trailing], 16)
                        TextField("Test", text: $password)
                                                .textFieldStyle(RoundedBorderTextFieldStyle())
                                                .padding([.leading,.trailing, .bottom], 16)
                    
                    
                    
                }
                .navigationBarTitle("Connect to Lol", displayMode: .inline)
                }
            // do not forget to add this
            .navigationViewStyle(StackNavigationViewStyle())
            }
}

但是使用默认模式.navigationBarTitle("Connect to Lol", displayMode: .automatic) 或.navigationBarTitle("Connect to Lol", displayMode: .large)- 这个方法由于某种原因不起作用并且不填充状态栏。如果有人能解释原因，我将不胜感激。

删除状态栏（.statusBar (hidden: true)）也没有带来结果。

我一直在寻找这个问题，并找到了一篇关于 it 的精彩文章。我通过这篇文章修改了你的代码并取得了成功。

    struct ContentView1: View {
        @State private var password = ""
        
        init() {
            let coloredAppearance = UINavigationBarAppearance()
            coloredAppearance.backgroundColor = .green
            coloredAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.black]
                   
            UINavigationBar.appearance().standardAppearance = coloredAppearance
            UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
        }
        
        
        var body: some View {
                NavigationView {
                    
                    ScrollView {
                        Text("Lol 123 Lol")
                            .foregroundColor(Color.secondary)
                                                .padding([.top, .bottom], 16)
                                                .padding([.leading,.trailing], 16)
                            TextField("Test", text: $password)
                                                    .textFieldStyle(RoundedBorderTextFieldStyle())
                                                    .padding([.leading,.trailing, .bottom], 16)
                        
                        
                        
                    }
                    .navigationBarTitle("Connect to Lol")
                    }
                // do not forget to add this
                .navigationViewStyle(StackNavigationViewStyle())
                }
    }

代码执行结果：

【讨论】：