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

看起来是这样的：

- HansDeBeer

---

不行，这个例子只有在我使用 .inline 时才有效，但是如果我使用 largeTitle，那么向上滚动和标题变小的手势就不再起作用了。 - HansDeBeer

你有任何解决方案吗？ - Sona

有没有解决方案？ - Varun Naharia

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("连接到Lol", displayMode: .automatic)或.navigationBarTitle("连接到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())
                }
    }

代码执行结果：

- Eldar

Answer 2

您需要在背景颜色下添加.modifier .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")
                }
            }
        }
    }
}

希望它有所帮助。

- Nikos Polychronakis

---

但是当我将这些东西推到顶部时，大标题并不在它应该的位置。所以这个方法行不通。或者你有一个可用的代码示例吗？ - HansDeBeer

这就是为什么我写了相应的更改顶部填充的代码。在.edgesIgnoringSafeArea(.top)下添加类似.padding(.top, 40)的内容即可解决问题。使用edgesIgnoringSafeArea修饰符会对UI造成一些问题，但据我所知，这是唯一的方法来将视图移动到状态栏后面。 - Nikos Polychronakis

但它仍然会将导航栏和标题一起移动 - 所以对我来说这不是一个可接受的解决方案，因为导航栏应该保持在其位置。 - HansDeBeer