SwiftUI学习(1)

SwiftUI学习(1)

1.文本(text)

在swift中，文本是我们常用的一个元素，在输入内容时，一般是新建文本然后在其中输入我们要显示的内容。如：

此外，在文本内，我们可以对里面的文字进行各式各样的调节，如：

甚至我们也可以设置放内容的框的样式，以及文本的摆放形式：

我们甚至可以设置多个frame，让文本设计更丰富。

对于frame，需要注意的是，它是按照代码的输入顺序来进行摆放，下一行代码的frame必定摆放在上一行代码的frame之后，如：

而如果要改变这个顺序，我们可以使用**overlay()**函数，让swiftui将其中的内容置于所有frame的最上方。

swift给予了我们极大的空间去设计一个文本内容，让我们能够去设计一个自己想要的文本。

2.图形和颜色(shape)

在开发的过程中，图形的设计是在所难免的，而在swift中，我们可以自定义的添加各种各样的图形，并且可以去改变图形的大小填充，裁剪等。

在上面可以看到基本提供的形状，以及形状对应的单词。

我们可以对一个形状进行多个操作，达成我们的目的：

以一个矩形为例：

我们把矩形填充为绿色，描边为蓝色，且描边的线宽为20px ：

对于颜色，swiftui给我们提供了非常多的颜色来供我们去选择，甚至你可以在调色盘中调出自己喜欢的颜色，如果你不想每次都进行调色，我们可以在后缀为**.xcassets**的文件中自定义一个颜色：

我们在.xcassets文件中将强调色设置为橘色，在外面调用强调色时，他就会变为橘色。当然我们也可以自己进行添加和命名，只需要通过左下角的 + 号箭头即可。

注意：我们可以选择在不同模式下该颜色的显示情况

按需修改箭头所指的位置即可。

渐变

当然，如果你想要更丰富的颜色，可以尝试去使用渐变来满足你的需求，渐变有三种，分别是径向渐变(RadialGradient) 线性渐变（LinearGradient）和角度渐变(AngularGradient)。

1. 在径向渐变中，颜色类似波纹变化，从想水波一样内而外的改变，我们可以设置它的中心点，以及起始半径和结束半径等。如下定义：

2. 在线性渐变中，颜色从一侧到另一侧逐渐改变，我们可以设置他们颜色的顺序，色彩和从哪边开始至哪边结束等。如下定义：

3. 在角度渐变中，颜色成一个圆锥类的梯度，有点类似于一个圆盘，渐变随起始和终止角度的差距进行覆盖填充。下面是基本定义语法：

   

   圆心在图形中心，起始角度和终止角度相差360°：

圆心在图形中心，起始角度和终止角度相差360°+45°：

3.图像(image)

如果我们不想要图形，而是想要更精准的图标，在swift中也会有提供。我们可以去下面这个网站，找到我们需要的图标。

SF Symbols

如果对于原版的图标不满意，我们可以进行一些设计来达到我们自己的需求，这些设计与图形中的设计大相径庭，我们不再过多赘述。

当然，如果你不想使用系统提供的图标，你也可以使用自己上传的图像。

• 首先，我们点击**.xcassets**文件：

• 然后将所需要的图片从桌面拖到文件左侧的栏中（即红色箭头区域）：

• 随后，我们可以自定义图像的名称，然后就可以去主页面调用它：

• 当你首次上传图像，并尝试调用foregroundColor()函数更改颜色时你会发现图像的颜色并没有改变，这时就需要去更改渲染模式，在图像的下面加上：

• 你也可以去**.xcassets**文件中的检查器去进行默认的设置，这样就不用每次上传图像时再输入一遍；
  

• 将其改为template image即可

4.栈(Stack)

栈是SwiftUI中对其屏幕上元素的一种简单的方法，它分为以下三类：

• VStack

• HStack

• ZStack

4.1 VStack

VStack（vertical stack）又称为垂直栈，它是将元素竖着摆放的一种方法，具体如下：

同时可以注意到，在默认模式下VStack会将不同的元素直接有着默认的间隔，我们可以手动去消除这个间隔，甚至去改变VStack的排列方式。

我们将矩形的大小改变，并使得他们左对齐，消除间隔：

值得一提的是，在栈中，spacing中的nil关键字不会让间距消失，反而会是一个8px 的默认距离，如果我们要使得边距消失，得手动设置为0.

同理这些方法也可以在下面两个栈中使用。

4.2 HStack

HStack (Horizontal stack) 又称为水平栈，是将元素在水平方向上进行摆放：

4.3 ZStack

ZStack 又称覆盖排列，它是将元素子元素会在z轴方向上叠加，同时在垂直/水平轴上对齐的视图，遵循从后到前的原则，即写在后面的元素排列在最上方：

5.padding

padding也可以称为页边距，即在两个元素之间的填充距离，达到分离的效果，如：

默认是四边都填充，当然我们也可以设计只向单边的填充，如：

甚至可以进行多次调整，达到想要的效果：

6.Spacer

我们在使用栈时，如果要调整两个对象的间距至刚好占据两边，显然如果使用spacing来进行调试会十分麻烦，这时我们可以用到一个函数spacer。

在Swift中，Spacer是一种用于在StackView中创建间距的视图。Spacer会根据StackView的方向自动调整大小，填充剩余的空间。

下面看一个例子：
我们设计两个矩形，用水平栈来摆放，让它们刚好占据屏幕的两边：

可以看到，现在我们的调整还不够完美，两个矩形会有一定的溢出空间，我们还需要进一步的微调spacing让他更完美，但如果我们直接使用spacer：

可以看到它是非常的完美且易操作，同时他还具备自我适应的功能，例如我们将红色矩形放大，并使用一个黄色框架来标注space的距离。

调整前：

调整后：

我们还可以使用多个spacer来将不同的元素平均分开，优化布局：

同样的，spacer也有可以设定的最小长度(minlength)，在进行布局时，我们可以用此达到不同的效果。

注意：默认的最小长度不是0，因此在设定时无论怎么压缩spacer总会空出一段空间。

7. init 和enum

在swiftui的使用中，我们在设计一个图标时，往往需要对它们的字体大小，颜色，形状等都进行详细的说明。

假如这时我们要进行一点改变，要改动的代码可能会有很多，因此我们可以使用一个变量来进行赋值，这样在使用相同的颜色或字体的地方就可以通过一个量的改变让所有的代码改造成相应的值，如：

我们将背景改为了一个变量的名字，并且在主体外对变量赋值，来达到我们的目的。

当然，我们也可以不对变量进行直接赋值，而是提出变量，然后在下面的视图部分进行直接的初始化。

事实上，前面的变量声明其实是init函数的一种声明，其标准的形式应该是这样：

但在swiftui中，我们可以不写下面这段代码，只保留上面那段，他会自动识别并输入。

当然，init函数还是非常有用的，我们可以通过自定义init函数来达到满意的需求。

如，我们想使用配套的颜色和字，但不想在初始化的时候在进行重构，这时我们可以在init函数中通过条件的判断来进行调色：

这时我们的初始化只会保留count和title，我们只需要改title，它就会变为对应的颜色：

在定义init函数时必须要定义对应的数据类型，我们这时可以使用enum枚举类型来进行一个类型的定义，帮助我们进一步简化和读懂代码，如：

8. Foreach

在swift中，我们可以用循环来遍历元素，在swiftui中，我们同样可以使用Foreach语句来达到类似的效果。

首先了解Foreach的使用，输入Foreach，swiftui会跳出与Foreach有关的量，如：

前面的表示循环的次数，后面则表示需要循环的元素，如我们打印十个"Hi"

此外，Foreach还有另外的语法，其中一个是要我们去提供数据。我们可以用它来遍历一个数组的每个元素。

9.滚动视图(ScrollView)

在前面的设计中，如果我们对一个栈提供过多的元素或者设计某一个元素超出了我们的视图范围，我们将无法查看他在视图外的情况，这时我们可以通过一个ScrollView来让视图可以滚动，并观察到外面的情况。

可以看到矩形已经超出了视图的范围，如果我们加上ScrollView，

可以实现类似刷视频的上下滑动。

当然，我们也可以通过它实现水平的滑动，这时就要修改它的默认值，设置成水平滑动：

同时可调的参数还有看见滑动大致位置的小标。

值得一提的是，如果我们创建的元素过多，我们可以在栈的前面添加lazy，这样它就只会加载我们视图上所用到的元素，对于不用到的元素暂时不加载。

10.Grid

Grid 是 SwiftUI 中的一个视图容器，用于创建网格布局。它可以让我们以列的形式排列子视图，并根据需要自动调整它们的大小和位置。VGrid为垂直网格图，HGird为水平网格图

我们来创建一个矩形的黑色网格图：

我们设置了五列且每一列的宽度设置为50px，并创建了个循环显示50个矩形。

值得一提的是，如果我们设置的矩形不满50个，它将会把矩形平均分到五个列之中，且多出来的矩形从左到右依次分配，如：

此外，Gridtem还有flexible和adaptive两种排列方式：

对于flexible：

• 项的宽度和高度可以根据可用的空间进行调整。
• 项可以根据其他项的大小进行重新排列。
• 项可以根据设备方向进行重新排列。

对于adaptive：

• 项的宽度和高度可以根据可用的空间进行调整。
• 项不会根据其他项的大小进行重新排列。
• 项不会根据设备方向进行重新排列。

可以看到，它们最大的区别就是flexible可以根据其它的项来进行排列而adaptive则不会随着别的项而改变，因此flexible可以不设置最小和最大限度，但adaptive必须要。