前言

没有想到竟然还在进行总结，这是我继续参加第四期创作者训练营的文章,继续不断总结自己的学习经历。点击查看活动链接。

今日学习鸡汤：坚持，继续坚持，后面其实就会慢慢认清现实！

其实本专栏的内容都是有一定衔接的，从浅入深，这也是我自己的初衷，慢慢提升自己对知识的掌握程度。在这里我们首先对我们上章节创建的项目文件进行整理下，更好的进行后续持续的学习，前文链接。

我们鼠标点击ContentView右键 > 重构 > 重命名, 将当前文件名更改为TextBootcamp，为什么这么弄呢，主要就是更加直观方便后续继续迭代文件。

后面我们在这基础之上新增文件继续学习即可，也是为了方便更好的管理代码！

在本章中，我们主要掌握以下方面：

好的，项目开始

我们打开我们的工程文件，点击左侧头部的 File > File From Template > User Interface 下选择SwiftUI View视图模板，输入文件名称：ShapesBootcamp。

这里就需要用到快捷键，更好的方便我们创建项目: command + N, 不妨可以试试！

好的我们正式进入我们的项目文件中：

我们先基本实现这些图形，然后我们来个小挑战！

圆形

我们这边演示绘制有填充颜色的圆形以及空心描边的圆形。

Circle()
    // 设置图形的尺寸
    .frame(width: 200, height: 200, alignment: .center)
Circle()
    // 根据边框边框
    .stroke(.blue, style: StrokeStyle(lineWidth: 5))
    // 设置图形的尺寸
    .frame(width: 200, height: 200, alignment: .center)

矩形

Rectangle()
    // 设置当前矩形填充的颜色为蓝色
    .fill(Color.blue)
    .frame(width: 200, height: 100, alignment: .center)

椭圆形

Ellipse()
    // 设置当前椭圆填充颜色为黄色
    .fill(Color.yellow)
    // 设置当前椭圆尺寸为宽度200， 高度100
    .frame(width: 200, height: 100, alignment: .center)

不规则矩形

你可能想知道什么是不规则矩形，不规则形状，如果你不想知道也没办法，因为我肯定是要说的，哈哈哈！

不规则矩形就是我们可以不规则形状的四个方位圆角角度,直接进入代码演示。

/*
    topLeadingRadius: 左上方圆角角度
    bottomLeadingRadius: 左下方圆角角度
    bottomTrailingRadius: 右下方圆角角度
    topTrailingRadius: 右上方圆角角度
    style：.circular 设置圆角角度地方平滑过度
*/
UnevenRoundedRectangle(
    topLeadingRadius: 50, 
    bottomLeadingRadius: 0,
    bottomTrailingRadius: 10, 
    topTrailingRadius: 30,
    style: .circular).frame(width: 200, height: 100, alignment: .center)

到这里介绍Shape形状的部分已经讲解结束了。在这里最后提到一点就是当前我们创建的协议目前都是遵循Shape协议，其协议主要实现什么方法可以后续探索下...

挑战（延伸）

在这里呢我们主要实现通过我们的状态管理@State以及结合.trim裁切修饰器去完成动态变化裁切形状的DEMO。会用到目前没有提及到的内容，但是不需要担心，后面会涉及！

结果演示

首先我们搭建我们的静态页面：由一个环形边框以及Slider滑块组成。首先我们创建我们的环形圆圈

Circle()
    .stroke(lineWidth: 10)
    .fill(Color.purple)
    .frame(width: 200, height: 200, alignment: .center)

下一步是我们在页面中添加我们的滑块组件，这是SwiftUI内置的UI控件，首先我们得定义我们视图页面内的状态，我们通过@State去进行定义，主要就是定义后可以避免视图不必要的刷新重新进行复制，在后面的章节会进行详细介绍其原理。

// 滑块开始位置
@State private var fromPosition: CGFloat = 0.0

滑块组件，我们设置其宽度为200，并且添加顶部内边距50, 将可绑定值fromPosition添加到Slider滑块组件上进行绑定。

为什么需要使用$符号，主要原因是当前值是支持组件内部进行修改，数据双向绑定的。

Slider(value: $fromPosition)
        .frame(width: 200, height: 10, alignment: .center)
        .padding(.top, 50)

我们添加一些动画效果，使用animation,以及添加覆盖效果到环形上显示当前滑块的值

// 建立子元素垂直布局
VStack {
    Circle()
    .stroke(lineWidth: 10)
    .fill(Color.purple)
    .frame(width: 200, height: 200, alignment: .center)
    // 添加线形变化动画
    .animation(.linear(duration: 1), value: fromPosition)
    .overlay {
        // 文本字符转，将浮点小数转换为字符串
        Text(String(format: "%.1f", fromPosition))
   }
   Slider(value: $fromPosition)
        .frame(width: 200, height: 10, alignment: .center)
        .padding(.top, 50)
}

添加裁切修饰器到我们的环形组件中,我们先看看这个修饰器的两个参数，分别是from，以及to，他们的最大值分别都是1.0。我们裁切的区域就是这两个值之外的区域。

func trim(from startFraction: CGFloat = 0, to endFraction: CGFloat = 1) -> some Shape

其实这块多去尝试就知道它的裁切原则。

我们看最终添加后的效果以及代码。

struct ShapesBootcamp: View {
    @State private var fromPosition: CGFloat = 0.0
    var body: some View {
        // 建立子元素垂直布局
        VStack {
            Circle()
                // 裁切，最大值为1.0
                .trim(from: 1.0 - fromPosition, to: 1.0)
                .stroke(lineWidth: 10)
                .fill(Color.purple)
                .frame(width: 200, height: 200, alignment: .center)
                // 添加线形变化动画
                .animation(.linear(duration: 1), value: fromPosition)
                .overlay {
                    // 文本字符转，将浮点小数转换为字符串
                    Text(String(format: "%.1f", fromPosition))
                }
            Slider(value: $fromPosition)
                .frame(width: 200, height: 10, alignment: .center)
                .padding(.top, 50)
        }
    }
}

可能有些地方讲解不太清楚，但是也在努力讲清楚, 希望对你有帮助，非常荣幸有机会在这见到你！我们下一篇再见！