(SwiftUI / Xcode 11)

1 .background(Color.black) //系统颜色

2 .background(Color("green")) //用于您在Assets.xcassets中创建的颜色

或者你可以用Command+Click在元素上改变它。

希望能有所帮助:)

你可以这样做:

.background(Color.black)

围绕着你的视野。

如。从默认模板(我把它包围在一个组):

    var body: some View {
        VStack {
          Text("Hello SwiftUI!")
        }
       .background(Color.black)
    }

为了添加一些不透明度，你也可以添加.opacity方法:

.background(Color.black.opacity(0.5))

你也可以通过CMD +单击视图，然后单击Show SwiftUI Inspector > Background > Your Color来使用视图的inspect元素

解决方案:

你可以创建一个彩色视图，并将其设置为VStack背景。

struct ColoredView: UIViewRepresentable {
    var color: Color
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        view.backgroundColor = UIColor(color)
        DispatchQueue.main.async {
            view.superview?.superview?.backgroundColor = .clear
        }
        return view
    }
    func updateUIView(_ uiView: UIView, context: Context) {}
}

用法:

 VStack {
    Text("VStack with Red backgound")
    Text("VStack with Red backgound")
    Text("VStack with Red backgound")
    Text("VStack with Red backgound")
 }.background(ColoredView(color: .red))

结果:

屏幕背景色

(从Xcode Version 13开始)

我不确定最初的海报是指整个屏幕的背景色还是单个视图的背景色。我将添加这个答案，即设置整个屏幕的背景色。

使用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引入了一些改变样式在安全区域边缘的工作方式。

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

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

什么是风格?

样式可以是:

颜色 材质(模糊效果) 分层视图(。第二、第三、第四系) 梯度

使用背景

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

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

TabView

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

NavigationView

发生在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"))
    }
}

我完全愿意用其他方式来实现这个目标。如果你知道其他方法，请留下评论或编辑这个答案。

背景颜色

（Xcode 14.2， iOS 16.3， SwiftUI 4.0）

1. 文本

要在文本视图中扩展BG颜色，请使用.frame()修饰符的maxWidth和maxHeight参数。

var body: some View {             // PINK COLOR
    Text("one")
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .foregroundColor(.white)
        .font(.system(size: 100))
        .background(.pink)
}

2. ZStack

要填充ZStack视图的背景，使用Color对象作为基础层。

var body: some View {             // YELLOW COLOR
    ZStack {
        Color.yellow.ignoresSafeArea()
        Text("two").font(.system(size: 100))
    }
}

3.VStack | HStack

如果你想给VStack或HStack分配一个新的BG颜色，请对堆栈本身应用修饰符。

var body: some View {             // TEAL COLOR
    VStack {
        Text("three").font(.system(size: 100))
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(.teal)
}

4. 梯度

你可以使用矩形忽略屏幕的安全区域，并用渐变填充屏幕。

var body: some View {             // PURPLISH GRADIENT
    ZStack {
        Rectangle()
            .fill(Gradient(colors: [.indigo, .purple]))
            .ignoresSafeArea()
        Text("four").font(.system(size: 100))
            .foregroundColor(.white)
    }
}

5. 颜色方案|反色

颜色反转是一种简单而聪明的解决方案。

var body: some View {             // INVERSION OF A COLOR
    ZStack {
        List {
            ForEach(1..<6) { version in
                HStack {
                    Image(systemName: "swift")
                    Text("Swift \(version).0")
                }
            }
        }
        Text("five").font(.system(size: 100))
    }
    .environment(\.colorScheme, .dark)
    // .colorInvert()
}

6. 图像

无缩进图像可以包含纯色或渐变。

var body: some View {             // GREEN JPEG as BG COLOR
    ZStack {
        Image("green")
            .resizable()
            .ignoresSafeArea()
            .brightness(-0.2)
        Text("six").font(.system(size: 100))
            .foregroundColor(.white)
    }
}

混合模式

在SwiftUI中，也有影响背景颜色和/或图像颜色的合成技术。点击这里阅读photoshop的混合模式。

像这样

struct ContentView : View {
    @State var fullName: String = "yushuyi"
    var body: some View {        
        VStack
            {
                TextField($fullName).background(SwiftUI.Color.red)
                Spacer()
        }.background(SwiftUI.Color.yellow.edgesIgnoringSafeArea(.all))
    }
}