实战需求

SwiftUI Color技巧之如何混合两种颜色并设置过渡效果

本文价值与收获

看完本文后，您将能够作出下面的界面

截屏2021-02-12 下午1.23.53.png

看完本文您将掌握的技能

• 管理一组TextField
• 使用ScrollView
• 设置圆形TextField

---

基础知识

Color

与环境有关的颜色。

宣言

@frozen struct Color

总览

AColor是后绑定令牌：SwiftUI仅在给定环境中使用它之前才将其解析为具体值。

---

UIColor

存储颜色数据和有时不透明度的对象。

宣言

class UIColor : NSObject

总览

颜色对象可以通过多种方式创建：

UIKit提供了标准的系统颜色，用于将您自己的UI对象中的颜色与UIKit提供的颜色进行匹配。您可以复制这些颜色，而无需了解颜色的基本表示形式。请参阅UI元素颜色。

UIKit提供了标准颜色的定义，例如红色，橙色，黄色等。请参阅标准颜色。

您可以在Core Graphics颜色空间中创建自定义颜色。请参见从组件值创建颜色。

您可以从另一个对象创建颜色对象，例如另一个UIColor对象，一种颜色的Core Graphics表示形式或Core Image颜色。请参见从另一个颜色对象创建颜色。

您可以从UIImage对象创建颜色并将其用于绘制重复图案。请参见创建基于图案的颜色。

使用UIColor对象的最常见方法是将其提供给UIKit中的其他对象。例如，UIView该类（及其子类）包括背景和淡色，以影响它们在屏幕上的绘制方式。下面的代码示例设置视图的背景和色调颜色。

backgroundView.backgroundColor = UIColor.systemGray
backgroundView.tintColor = UIColor.systemBlue

在执行自定义绘图时，UIColor对象提供设置当前图形上下文的填充或笔触颜色的方法。以下代码示例显示了视图内自定义绘图的简单示例。

class CircleView: UIView {
    
    override func draw(_ rect: CGRect) {
        let ovalBounds = self.bounds.insetBy(dx: 10, dy: 10)
        let oval = UIBezierPath(ovalIn: ovalBounds)
        let brightRed = UIColor(displayP3Red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)
        brightRed.setFill()
        oval.fill()
    }
}

有关功能的完整列表，请参见将颜色应用于绘图环境。

了解色彩空间的使用

UIColor对象通常存储它的颜色值作为核心图形的颜色（CGColor）是一个核心图形颜色空间（）。有一些返回基础颜色数据的方法和属性，这些方法和属性在获取颜色信息中进行了描述。创建自定义颜色时，基础颜色空间和每个颜色组件的值范围会根据iOS版本而有所不同。CGColorSpace

这些设备色彩空间与sRGB色彩空间的显示特性紧密对应。这些色空间中分量的值的范围是到。创建颜色时，颜色对象会钳位值以确保它们适合此范围。0.01.0

使用自定义颜色时，请使用扩展的颜色空间来存储您的颜色值。当您需要担心在特定颜色空间中尽可能接近地表示该颜色时，请将颜色从扩展颜色空间转换为目标颜色空间。

---

实战代码

1、主界面