Section 09 : Color Literal, Gradient and Overlay

Section 09 : Color Literal, Gradient and Overlay - Color Literal，渐变和覆盖（11’54"）

Quickly edit colors and add gradients and use the overlay modifier.

快速编辑颜色和渐变与覆盖（overlay）修饰器的使用

1. 渐变

（1）基本渐变

首先看一下 background 修饰，其参数是 View，也就是说任何 View 都可以成为背景。所以我们在指定背景颜色的时候，不能单纯写 background(.white)，而应该写成 background(Color.white)，因为 Color 才属于视图，而具体的颜色名字则不是。同样，渐变 gradient 也是一种 View 。可以用下面的方法生成一个基本渐变。

// 颜色数组，第一个元素是开始颜色，最后一个元素是结束颜色，中间的是过渡色
Gradient(colors:[.red, .yellow, .blue]		

（2）渐变方式

在 SWiftUI 中，渐变有三种形式：

• Linear Gradient - 线性渐变，从起点到终点沿着某个直线方向进行渐变。生成方法：

LinearGradient(gradient: Gradient, 			// 基本渐变
               startPoint: UnitPoint, 		// 起点位置
               endPoint: UnitPoint)			// 终点位置

• Angular Gradient - 角度渐变，从起点到终点沿着顺时针方向渐变，角度取值为 0~2π。有两种创建方式：

// 指明基本渐变 gradient，旋转角的顶点 center，旋转开始的偏移角度（顺时针为正，默认 0 是x轴正方向）
AngularGradient(gradient: Gradient, center: UnitPoint, angle: Angle = .zero)
// 第二种方法
AngularGradient(gradient: Gradient, 		// 基本渐变
                center: UnitPoint, 			// 角的顶点位置
                startAngle: Angle = .zero, 	// 起始偏移角度，默认值为 0
                endAngle: Angle = .zero)	// 结束偏移角度，默认值为 0

• 径向渐变，即以某点为圆心，以圆心为起点，沿着半径以同心圆的方式逐步向外渐变。创建方式：

RadialGradient(gradient: Gradient, 		// 基本渐变
               center: UnitPoint, 		// 圆心位置
               startRadius: CGFloat, 	// 起始颜色半径
               endRadius: CGFloat)		// 结束颜色半径

这里提到的位置，是按照形状的 8 个控制点。画个参考（希望大家能明白我的意思，呵呵）

这个表头	我	不知道怎么去掉
topLeading	top	topTrailing
leading	center	trailing
bottomLeading	bottom	bottomTrailing

2. Color Literal

color literal 不知道怎么翻译，literal 我记得是字面量的意思，但是这里。。。大家说说看

一般情况下，我们在处理颜色的时候，可能会选择系统内置的名称，或者使用颜色的初始化器，像下面这样：

Color.blue		// 使用内置名称
Color(red: Double, green: Double, blue: Double)		// 使用 RGB 参数

Xcode 还给我们提供了一种便利的方式来处理颜色。当创建颜色时，在Color()的括号中输入 colorl，会在自动完成的菜单中看到 Color Literal的选项，选择后键入⏎，将会在括号内出现一个色块，默认是白色（或黑色？）。双击这个色块会弹出色彩选择窗口。可以在窗口中选择已有的颜色，还可以单击 other... 按钮去打开 Colors 窗口，其中提供更多的处理选择。这样我们始终在编辑器中可以看见最终颜色的结果，还是很方便的。

3. 自定义头像（Avatar……阿凡达？ 😂）

最初的思路肯定是在 VStack 中加上头像的图片，然后使用偏移修饰，像下面这样：

VStack(spacing: 16) {
                Image("wowLM_small")					// 头像图片
                    .resizable()						// 可变大小
                    .frame(width: 80, height: 80)		// 定义大小
                    .offset(y: -60)						// 偏移
                MenuRow(title: "账  号", iconName: "gear")
                MenuRow(title: "账  单", iconName: "creditcard")
                MenuRow(title: "退  出", iconName: "person.circle")
                
            }
            .frame(maxWidth: .infinity)
            .frame(height: 300)
            .background(                                                               // 线性渐变
                LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)), Color(#colorLiteral(red: 0.8705882353, green: 0.8941176471, blue: 0.9450980392, alpha: 1))]),     // 基础渐变，起始颜色和结束颜色
                               startPoint: .top,                                       // 起始位置
                               endPoint: .bottom))                                     // 结束位置
            .clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
            .shadow(radius: 30)
            .padding()

这样做的结果是图片被裁剪了，因为整个 VStack 有个 clipShape 修饰。所以这么不行。我们要采用 overlay 的方式来回避裁剪，将头像图片完整地显示出来。注释掉前面的 Image 和 修饰符之后，在 VStack 的 clipShape 修饰后面加上 overlay 修饰，

 .overlay(
     Image("wowLM_small")                    // 头像图片
         .resizable()                        // 可变大小
         .aspectRatio(contentMode: .fill)    // 填充宽高比例
         .frame(width: 60, height: 60)       // 定义大小
         .clipShape(Circle())                // 裁剪
         .offset(y: -150)                    // 偏移
)

4. 添加文字说明和进度条

（1）在 VStack 中的菜单项目之前增加一个关于进度的 Text。

Text("Howard Ge - 完成度 52%")
	.font(.caption)

（2）在上面的文本下面添加进度条

Color.white
    .frame(width: 38, height: 6)                            // 进度标志
    .cornerRadius(3)                                        // 圆角修饰
    .frame(width: 130, height: 6, alignment: .leading)      // 放入新的框架
    .background(Color.black.opacity(0.08))
    .cornerRadius(3)
    .padding()
    .frame(width: 150, height: 24)                          // 再放入新的框架
    .background(Color.black.opacity(0.1))
    .cornerRadius(12)

这里我们看到依旧是从里向外的逐步实现，先定义了进度条上的浮标，然后使用 frame 修饰扩展到进度条，然后再用 frame 修饰将整个进度条放入一个新的框架中。由此我们得到以下结论：

• 结论 1 ：我们再次体会到了修饰器（modifier）的使用是有顺序的。
• 结论 2 ：修饰器总是修饰之前已经形成的结果。
• 结论 2 ：上面的结论决定了 SWiftUI 实现组件的过程是从细节到全局的顺序。

5. 调整 VStack 的阴影修饰

通常情况下，原有的阴影修饰方式简便易用。这里介绍一种功能更加完善的方式：

.shadow(color: Color.black.opacity(0.2), radius: 20, x: 0, y: 20)       // 调整了shadow

其中不仅可以设置阴影的颜色、半径，还可以设置阴影的偏移，使其显示更加灵活多变。

6. 修改 MenuRow

刚才介绍了 Color Literal 方式来选择颜色，现在到 MenuRow 视图中练习一下。修改 SF 符号的颜色，在 Image 组件的修饰后面添加颜色修饰。

.foregroundColor(Color(#colorLiteral(red: 0.662745098, green: 0.7333333333, blue: 0.831372549, alpha: 1)))                     // 使用 Color Literal 选择颜色

😲 wow~~~呵呵，这可能和你在 Xcode 中看到的不一样。没事的，因为我只是复制粘贴过来，所以解析前的完整代码就显示出来了，而在 Xcode 的编辑器里，是会被解析的，你会在括号里面看到一个灰色的色块。

BTW，那个色块的十六进制编码是 #A9BBD4

本节小结

本节代码请参见 GitHub 和 码云

• 基本渐变的参数由 Color 数组构成。
• 渐变的形式有三种：线性渐变（LinearGradient），角度渐变（AngularGradient）和径向渐变（RadiantGradient）。
• 渐变的设置需要有：基本渐变，一个或多个位置，起始和结束的参数。
• 位置是组件的 8 个……控制柄？（PS 还是 Windows 好像这么说的）
• 输入颜色时，可以利用 Color Literal 的自动完成，双击色块打开窗口进行选择或更多处理。
• overlay 修饰可以避开 clipShape 的裁剪，使图片或其他视图完整的显示在现有视图之上。
• 有序使用修饰，完成从细节到全局的组件实现。
• shadow 修饰的另一种更全面的用法。

接下来

下一节将讨论屏幕之间的动画……加油！