如何在 SwiftUI 中更改状态栏背景颜色？答案

【问题标题】：How to change the status bar background color in SwiftUI?如何在 SwiftUI 中更改状态栏背景颜色？
【发布时间】：2020-06-07 12:56:17
【问题描述】：

我有一个ZStack，上面设置了Color.orange：

struct HomeView: View {
    init() {
        UITabBar.appearance().barTintColor = UIColor.orange
    }
    var body: some View {
        ZStack {
            Color.orange
            TabView {
                Settings()
                .tabItem {
                    Image(systemName: "gear")
                    Text("Settings")
                }
                MapKitView()
                .tabItem {
                    Image(systemName: "location.circle.fill")
                    Text("Home")
                }
                ProfileView()
                .tabItem {
                    Image(systemName: "person")
                    Text("Profile")
                }
            }
            .font(.headline)
        }
    }
}

在这个ZStack 中，我有一个TabView，其中的子视图都有橙色ZStacks。但是这些子视图，包括下面显示的Settings() 和MapKitView()，没有橙色状态栏。

设置（）

struct Settings: View {

    var body: some View {
        ZStack {
            Color.orange
            VStack {
                NavigationView {
                       ...
                    }
            }
        }
    }
}

MapKitView()

struct MapKitView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView()
        return mapView
    }
    func updateUIView(_ uiView: MKMapView, context: UIViewRepresentableContext<MapKitView>) {

    }
}

如何使我的所有视图中的状态栏变为橙色？

【问题讨论】：

这能回答你的问题吗？ SwiftUI: Status bar color
不，这不会只是改变文本而不是背景颜色@pawello2222
您应该使用Color.orange.edgesIgnoringSafeArea(.all)，这样它应该会扩大以填充未覆盖的区域。

标签： ios swift swiftui

【解决方案1】：

ZStack {
...
}
.edgesIgnoringSafeArea(.vertical) // or .top

【讨论】：

【解决方案2】：

例如，如果您想在状态栏下绘制漂亮的模糊效果。

YourView()
    .overlay(alignment: .top, content: {
        Color.clear // Or any view or color
    .background(.regularMaterial) // I put clear here because I prefer to put a blur in this case. This modifier and the material it contains are optional.
    .edgesIgnoringSafeArea(.top)
    .frame(height: 0) // This will constrain the overlay to only go above the top safe area and not under.
})

【讨论】：