SwiftUI - 如何更改视图的背景颜色? [英] SwiftUI - How do I change the background color of a View?

问题描述

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

I'm beginning to try out SwiftUI and I'm surprised that it doesn't seem to be straightforward to change the background color of a View. How do you do this using SwiftUI?

推荐答案

屏幕的背景色

(从 Xcode 版本 13 开始)

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

I'm not sure if the original poster meant the background color of the entire screen or of individual views. So I'll just add this answer which is to set the entire screen's background color.

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

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

I added .ignoresSafeArea() otherwise, it will stop at safe area margins.

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 保持在颜色上很重要，这样您的主要内容就不会忽略安全区域的边缘.

Note: It's important to keep the .ignoresSafeArea on just the color so your main content isn't ignoring the safe area edges too.

iOS 15/Xcode 13 对样式处理安全区域边缘的方式进行了一些更改.

iOS 15/Xcode 13 has introduced some changes to the way Styles work with the edges of safe areas.

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

This gives you more options for setting a background color/style.

什么是风格?

样式可以是:

• 颜色
• 材质(模糊效果)
• 分层视图(.secondary、.tertiary、.quaternary)
• 渐变

因为VStack的背景接触到安全区的边缘，紫色会渗入安全区.

Because the background of the VStack touches the edge of the safe area, the purple color will bleed into the safe area.

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

标签视图

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

TabView

In iOS 15 the TabView is no longer translucent. Meaning the background color will bleed right into it.

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

If you want to provide a custom style for your TabView, you can add another Style that touches the bottom safe area edge so that bleeds into your TabView. For example:

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

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

The same thing that happens to TabView will also happen with NavigationView.

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

To customize the NavigationView style, add a style that will touch the top safe area edge and it will bleed into the 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"))
    }
}

我对实现这一目标的其他方式完全开放.如果您知道其他方式，请发表评论或编辑此答案.

I'm totally open to other ways of accomplishing this. Leave a comment or edit this answer if you know of other ways.

这篇关于SwiftUI - 如何更改视图的背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！