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

Posted 2023-04-18

【中文标题】SwiftUI - 设置状态栏背景颜色以与导航栏对齐

【英文标题】：SwiftUI - Set statusbar background color to align with navigation bar

【发布时间】：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 - 向上滚动并且标题变小 - 手势不再起作用。

你有什么解决办法吗？

有什么解决办法吗？

【参考方案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())
                
    

代码执行结果：