SwiftUI - 如何将顶部安全区域的背景颜色更改为灰色？

Question

我想将顶部安全区域的背景颜色从绿色更改为灰色。我到处找，但找不到任何解决方案。预览画面如下所示。

我的代码：

struct ContentView: View {
    @State var name = ""
    init() {
            //Use this if NavigationBarTitle is with Large Font
           UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.red]
           UINavigationBar.appearance().backgroundColor = .gray
        }
    var body: some View {
        NavigationView {
            
            ZStack{
                VStack{
                    TextField("Name", text: $name)
                        .frame(height:200)
                        .padding()
                        .background(backgrounImage())
                        .overlay(RoundedRectangle(cornerRadius: 20).stroke(Color.gray,lineWidth: 4))
                        .padding()
                    Spacer()
                }.navigationTitle("Tanvir")
                .background(Color.green.edgesIgnoringSafeArea(.all))
            }
            
        }
    }
}

Answer 1

您可以在 ZStack 之上添加另一个视图：

    var body: some View {
        NavigationView {
            ZStack(alignment: .top) { // <- Don't forget this
                ,,,
 
                GeometryReader { reader in
                    Color.yellow
                        .frame(height: reader.safeAreaInsets.top, alignment: .top)
                        .ignoresSafeArea()
                }
            }
        }
    }

不要忘记堆栈对齐！

整个应用的一致栏

如果您需要它出现在您的所有视图中，请尝试将代码放在更一致的地方，例如您提供 contentView 的地方：

@main
struct SwiftUIAppPlaygroundApp: App {
    var body: some Scene {
        WindowGroup {
            ZStack {
                ContentView()

                GeometryReader { reader in
                    Color.yellow
                        .frame(height: reader.safeAreaInsets.top, alignment: .top)
                        .ignoresSafeArea()
                }
            }
        }
    }
}

Answer 2

使用此 UIApplication 扩展程序更改状态栏颜色

extension UIApplication {
    /**
     Get status bar view
     */
    var statusBarUIView: UIView? {
        let tag = 13101996
        if let statusBar = self.windows.first?.viewWithTag(tag) {
            self.windows.first?.bringSubviewToFront(statusBar)
            return statusBar
        } else {
            let statusBarView = UIView(frame: UIApplication.shared.windows.first?.windowScene?.statusBarManager?.statusBarFrame ?? .zero)
            statusBarView.tag = tag
            
            self.windows.first?.addSubview(statusBarView)
            return statusBarView
        }
    }
}

用法

struct ContentViewStatusBar: View {
    @State var name = ""
    init() {
        //Use this if NavigationBarTitle is with Large Font
        UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.red]
        UINavigationBar.appearance().backgroundColor = .gray
    }
    var body: some View {
        NavigationView {
            
            ZStack{
                VStack{
                    TextField("Name", text: $name)
                        .frame(height:200)
                        .padding()
                        .background(backgrounImage())
                        .overlay(RoundedRectangle(cornerRadius: 20).stroke(Color.gray,lineWidth: 4))
                        .padding()
                    Spacer()
                }.navigationTitle("Tanvir")
                .background(Color.green.edgesIgnoringSafeArea(.all))
            }
            
        }.onAppear {
            UIApplication.shared.statusBarUIView?.backgroundColor = .gray //<<=== Here
        }
    }
}