view - SwiftUI - 如何更改 View 的背景颜色？

Question

我开始尝试 SwiftUI，令我惊讶的是，更改 View 的背景颜色似乎并不简单。如何使用 SwiftUI 做到这一点？

Answer 1

屏幕背景颜色

(从 Xcode 版本 13 开始)

我不确定原始海报是指整个屏幕的背景颜色还是单个 View 的背景颜色。所以我只添加这个答案，即设置整个屏幕的背景颜色。

使用 ZStack

var body: some View {
    ZStack {
            Color.purple
                .ignoresSafeArea()
            
            // Your other content here
            // Other layers will respect the safe area edges
    }
}

我添加了.ignoresSafeArea()，否则它将停在安全区域边缘。

使用覆盖修饰符

var body: some View {
    Color.purple
        .ignoresSafeArea(.vertical) // Ignore just for the color
        .overlay(
            VStack(spacing: 20) {
                Text("Overlay").font(.largeTitle)
                Text("Example").font(.title).foregroundColor(.white)
        })
}

注意:将 .ignoresSafeArea 保持在仅颜色上非常重要，这样您的主要内容就不会忽略安全区域边缘。

iOS 15

iOS 15/Xcode 13 对样式与安全区域边缘的工作方式进行了一些更改。

根据我的观察，规则是:如果样式触及安全区域边缘，它将渗入安全区域。

这为您提供了更多设置背景颜色/样式的选项。

什么是样式？

样式可以是:

• 颜色
• Material (模糊效果)
• 分层 View (.secondary、.tertiary、.quaternary)
• 渐变

使用背景

由于VStack的背景接触到安全区域的边缘，紫色会渗入安全区域。

var body: some View {
    VStack {
        Text("Hello, World!")
        Divider()
        Spacer()
    }
    .background(Color.purple)
}

标签 View

在 iOS 15 中，TabView 不再是半透明的。这意味着背景颜色会直接渗入其中。

如果您想为 TabView 提供自定义样式，您可以添加另一个接触底部安全区域边缘的样式，以便渗透到 TabView 中。例如:

var body: some View {
    TabView {
        VStack {
            Text("Hello, World!")
            Divider()
            Spacer()
            // Bleeds into TabView
            Rectangle()
                .frame(height: 0)
                .background(.thinMaterial)
        }
        .background(Color.purple)
        .tabItem {
            Text("Tab 1")
            Image(systemName: "wifi")
        }
    }
}

导航 View

发生在 TabView 上的同样的事情也会发生在 NavigationView 上。

要自定义 NavigationView 样式，请添加一个样式，该样式将接触顶部安全区域边缘，并将渗入到 NavigationView 中:

var body: some View {
    NavigationView {
        VStack {
            // Bleeds into NavigationView
            Rectangle()
                .frame(height: 0)
                .background(.ultraThinMaterial)
            Text("Hello, World!")
            Divider()
            Spacer()
        }
        .background(Color.purple)
        .navigationTitle(Text("Style"))
    }
}

我完全愿意接受其他实现这一目标的方法。如果您知道其他方法，请发表评论或编辑此答案。