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

Question

我正在尝试设置状态栏的背景颜色以使其与导航栏颜色对齐。在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()
            }

        }

    }

它看起来像：

Answer 1

此代码与修饰符 .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())
                }
    }

代码执行结果：

Answer 2

添加修饰符

.edgesIgnoringSafeArea(.top)

转到NavigationView并相应地更改顶部填充。