SwiftUI-如何更改视图的背景颜色？

Question

我开始尝试SwiftUI，但感到惊讶的是，更改A的背景颜色似乎并不简单View。您如何使用SwiftUI呢？

Answer 1

背景颜色

（在 iOS 17.4 Xcode 模拟器上测试）

请注意，foregroundColor(_:)修饰符已被弃用。foregroundStyle(_:)代替使用。

1. 文字背景

要在文本视图上扩大背景颜色，请使用修改器的maxWidth和maxHeight参数.frame()。

var body: some View {             // PINK COLOR
    Text("one")
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .foregroundStyle(.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| 堆栈

如果您想为 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))
            .foregroundStyle(.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))
            .foregroundStyle(.white)
    }
}

7.场景视图

SceneKit 场景的背景颜色。

import SwiftUI
import SceneKit

struct ContentView : View {       // PURPLE COLOR
    var scene = SCNScene()
    var options: SceneView.Options = [.allowsCameraControl]

    init() {
        scene.background.contents = UIColor.purple

        let model = SCNNode(geometry: SCNSphere(radius: 0.25))
        model.geometry?.materials[0].diffuse.contents = UIColor.systemMint
        scene.rootNode.addChildNode(model)
        options.insert(.autoenablesDefaultLighting)
    }
    
    var body: some View {
        SceneView(scene: scene, options: options).ignoresSafeArea()
    }
}

8.iOS 版 ARView

非 AR 模式下 RealityKit 场景的背景颜色。

import SwiftUI
import RealityKit

struct ContentView : View {       // DARK GRAY COLOR
    var body: some View {
        ARContainer().ignoresSafeArea()
    }
}

struct ARContainer : UIViewRepresentable {
    let arView = ARView(frame: .zero)
    let anchor = AnchorEntity()

    func makeUIView(context: Context) -> ARView {
        arView.environment.background = .color(.init(white: 0.2, alpha: 1))
        
        let model = ModelEntity(mesh: .generateSphere(radius: 0.25))
        model.setParent(anchor)
        arView.scene.anchors.append(anchor)
        return arView
    }
    func updateUIView(_ view: ARView, context: Context) { }
}

9. 精灵视图

SpriteKit 场景的背景颜色。

import SwiftUI
import SpriteKit

struct ContentView : View {       // CHOCOLATE COLOR
    var scene = SKScene()

    init() {
        scene.backgroundColor = .init(Color(red: 0.2, green: 0.1, blue: 0))

        let node = SKShapeNode(circleOfRadius: 0.1)
        node.position = CGPoint(x: 0.5, y: 0.5)
        node.fillColor = .systemOrange
        node.lineWidth = 0
        scene.scaleMode = .aspectFill
        scene.addChild(node)
    }
    var body: some View {
        SpriteView(scene: scene).ignoresSafeArea()
    }
}

混合模式

在 SwiftUI 中，还有影响背景颜色和/或图像颜色的合成技术。在此处阅读有关“photoshopic”混合模式的信息。

Answer 2

您可以执行以下操作：

.background(Color.black)

围绕您的观点。

例如。从默认模板（我将其包含在Group中）：

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

要为其添加一些不透明度，还可以添加.opacity方法：

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

您还可以使用的检查视图的元素通过CMD +点击查看并点击Show SwiftUI Inspector> Background>你的颜色

Answer 3

屏幕背景色

（自Xcode版本11.1（11A1027）

我不确定原始海报是指整个屏幕还是单个视图的背景色。因此，我只添加此答案即可设置整个屏幕的背景色。

使用ZStack

var body: some View {
    ZStack
        {
            Color.purple
                .edgesIgnoringSafeArea(.all)

            // Your other content here
            // Other layers will respect the safe area edges
    }
}

我说.edgesIgnoringSafeArea(.all)，否则，将在安全区边缘停止。

使用叠加层修改器

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

注：保持这一点很重要.edgesIgnoringSafeArea的，那颜色正好让你的主要内容是不是太无视安全区的边缘。

Answer 4

填满整个屏幕：

var body: some View {
    Color.green.edgesIgnoringSafeArea(.all)
}

代码	结果

Answer 5

对于List：

所有 SwiftUI 的Lists 都由UITableViewiOS 中的 a 支持。所以你需要改变tableView的背景颜色。但由于Color和UIColor值略有不同，您可以去掉UIColor.

struct ContentView : View {
    init(){
        UITableView.appearance().backgroundColor = .clear
    }
    
    var body: some View {
        List {
            Section(header: Text("First Section")) {
                Text("First Cell")
            }
            Section(header: Text("Second Section")) {
                Text("First Cell")
            }
        }
        .background(Color.yellow)
    }
}

现在你可以使用任何Color你想要的背景（包括所有的）

另外先看看这个结果：

如您所见，您可以像这样设置 View 层次结构中每个元素的颜色：

struct ContentView: View {
    
    init(){
        UINavigationBar.appearance().backgroundColor = .green 
        //For other NavigationBar changes, look here:(/sf/answers/4025668881/)
    }

    var body: some View {
        ZStack {
            Color.yellow
            NavigationView {
                ZStack {
                    Color.blue
                    Text("Some text")
                }
            }.background(Color.red)
        }
    }
}

第一个是window：

window.backgroundColor = .magenta

非常常见的问题是我们无法移除 SwiftUI 的背景颜色HostingViewController（目前），因此我们无法navigationView通过视图层次结构看到某些视图。您应该等待 API 或尝试伪造这些视图（不推荐）。

Answer 6

iOS 部署目标 15 \xe2\x86\x92 使用修饰符.background(Color)。

\n\n

如果您的应用程序需要与较旧的 SwiftUI 版本兼容，例如 iOS 14，您可以按照 Apple 的建议并临时制作ViewModifier：

\n

\n

ViewModifier protocol当您想要创建可应用于任何视图的可重用修改器时，请采用。

\n

您可以modifier(_:)直接应用于视图，但更常见和惯用的方法是modifier(_:)定义一个View包含视图修饰符的扩展

\n

来源：\xef\xa3\xbf 开发者文档 > SwiftUI > 视图基础知识 > ViewModifier

\n

\n

extension View {\n  @available(iOS, deprecated: 15.0, message: "No longer needed, use the default background modifier instead")\n  func backgroundColor(_ color: Color) -> some View {\n    modifier(BackgroundColorModifier(color: color))\n  }\n}\n\nstruct BackgroundColorModifier: ViewModifier {\n  var color: Color\n\n  func body(content: Content) -> some View {\n    if #available(iOS 15.0, *) {\n      content\n        .background(color)\n    } else {\n      ZStack {\n        color // background\n        content\n      }\n    }\n  }\n}\n

\n

然后您可以申请.backgroundColor(_:)任何View：

\n

var body: some View {\n  ScrollView() {\n    \xe2\x80\xa6\n  }\n  .backgroundColor(.red)\n}\n

\n

当您的应用程序不再支持旧的 iOS 版本时，您将收到警告，您的自定义视图修饰符不再需要 \xe2\x80\xa6 清理时间！

\n

Answer 7

像这样

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

Answer 8

您可以简单地更改视图的背景颜色：

var body : some View{


    VStack{

        Color.blue.edgesIgnoringSafeArea(.all)

    }


}

您还可以使用 ZStack ：

var body : some View{


    ZStack{

        Color.blue.edgesIgnoringSafeArea(.all)

    }


}

Answer 9

我喜欢声明一个修饰符来更改视图的背景颜色。

extension View {
  func background(with color: Color) -> some View {
    background(GeometryReader { geometry in
      Rectangle().path(in: geometry.frame(in: .local)).foregroundColor(color)
    })
  }
}

然后我通过将颜色传递给视图来使用修改器。

struct Content: View {

  var body: some View {
    Text("Foreground Label").foregroundColor(.green).background(with: .black)
  }

}

Answer 10

struct Soview: View {
    var body: some View {
        VStack{
            Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
                .frame(maxWidth:.infinity,maxHeight: .infinity)
        }.background(Color.yellow).ignoresSafeArea(.all)
    }
}

Answer 11

几种可能性：（SwiftUI / Xcode 11）

1 .background(Color.black) //for system colors

2 .background(Color("green")) //for colors you created in Assets.xcassets

3. 否则，您可以在元素上执行Command+Click并从那里更改它。

希望它有帮助:)