在 SwiftUI 中，颜色（Color）是用户界面设计的一个核心部分，它是跨平台的，适用于 iOS、macOS、watchOS 和 tvOS。SwiftUI 提供了简单而强大的方式来使用和自定义颜色，帮助开发者为应用创建一致且美观的视觉体验。

基本颜色

SwiftUI 内置了一些常用的标准颜色，可以直接使用：

系统颜色：Color.red, Color.blue, Color.green, Color.yellow 等。
系统适应性颜色：Color.primary, Color.secondary, Color.accentColor 这些颜色会根据系统的浅色或深色模式自动调整。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .foregroundColor(.red) // 设置文本颜色为红色
            Rectangle()
                .fill(Color.blue) // 填充颜色为蓝色
                .frame(width: 100, height: 100)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

自定义颜色

除了内置颜色，你还可以使用自定义的 RGB 值或从资产目录中引用颜色。

使用 RGB 值：

Color(red: 0.5, green: 0.8, blue: 0.2) // 自定义颜色，取值范围为0.0到1.0
从资产目录引用颜色：你可以在 Xcode 的资产目录（Assets.xcassets）中定义颜色，并在代码中引用它们。

Color("CustomColorName") // 引用资产目录中的颜色

渐变颜色

SwiftUI 支持线性、径向和角度渐变，这些渐变可以用于视图的背景、填充等。

线性渐变：

LinearGradient(
    gradient: Gradient(colors: [.red, .yellow, .blue]),
    startPoint: .top,
    endPoint: .bottom
)

径向渐变：

RadialGradient(
    gradient: Gradient(colors: [.white, .purple]),
    center: .center,
    startRadius: 10,
    endRadius: 100
)

角度渐变：

AngularGradient(
    gradient: Gradient(colors: [.red, .yellow, .green, .blue]),
    center: .center
)

动态颜色与环境适应

SwiftUI 支持动态颜色，这些颜色会根据系统的设置（如浅色/深色模式、对比度等）自动调整。

系统适应性颜色：

Color.primary // 主颜色，自动适应系统模式
自定义适应颜色：你可以在资产目录中定义颜色集（Color Set），根据不同的外观模式或设备特性（如暗黑模式、对比度）定义不同的颜色值。

颜色的使用场景

颜色在 SwiftUI 中可以广泛应用于视图的各个方面：

文本颜色：通过 foregroundColor(_:) 设置文本的颜色。

Text("Custom Color")
    .foregroundColor(Color.purple)

背景颜色：通过 background(_:) 设置视图的背景颜色。

Text("Background Color")
    .padding()
    .background(Color.orange)

填充颜色：使用 fill(_:) 来填充形状或其他绘制区域。

Circle()
    .fill(Color.green)
    .frame(width: 100, height: 100)

边框颜色：使用 border(_:) 为视图设置边框颜色。

Rectangle()
    .frame(width: 100, height: 100)
    .border(Color.black, width: 2)

颜色的透明度

你可以通过 opacity(_:) 修饰符调整颜色的透明度（不透明度），0 表示完全透明，1 表示完全不透明。

Text("Semi-transparent Text")
    .foregroundColor(Color.blue)
    .opacity(0.5) // 设置 50% 透明度

示例：颜色的综合应用

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // 线性渐变背景
            Text("Gradient Background")
                .padding()
                .background(
                    LinearGradient(
                        gradient: Gradient(colors: [.red, .orange, .yellow]),
                        startPoint: .top,
                        endPoint: .bottom
                    )
                )
                .cornerRadius(10)
                
            // 自定义颜色
            Text("Custom Color")
                .foregroundColor(Color(red: 0.3, green: 0.6, blue: 0.9))

            // 动态颜色
            Text("Dynamic Color")
                .foregroundColor(Color.primary)
                .padding()
                .background(Color.secondary)
                .cornerRadius(10)
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

小结：

SwiftUI中的颜色处理十分灵活，不仅提供了方便的系统颜色和自定义颜色选项，还可以通过渐变和透明度等效果增强视觉表现。通过颜色，你可以轻松地为应用添加丰富的视觉层次感。

SwiftUI-认识颜色