SwiftUI使用（一）

首先需要一个Mac系统

使用正版的苹果电脑或者黑苹果都行

安装Xcode

根据你mac系统的版本，找寻相关的适配版本，如本文使用的Xcode 11适配mac10.15版本

无论你是正版还是黑苹果，下载Xcode都能去官方下。下载完成后，安装即可。

使用Xcode

开始

首先打开Xcode，并选择Create a new Xcode prohect
然后，选择IOS > Application > Single View Application and hit Next

按照下面的内容填写相关信息
Proudct Name：Test
Organization Name：your name
Organization Identifier：com.yourname
Language：Swift
User Interface：Swift UI

 选择一个地方保存，创建好后，会进入项目文件中，此时右侧上分有三个边框，点击可以显示或隐藏检查器图标

 而在Xcode11版本中，带来了实时预览的功能，通过该功能，开发者可以实时观察编码效果。点击Resume按钮，激活预览窗口。

 激活后，会出现一个手机界面，其下方，可以调节显示比例
若需要关闭预览界面，可以再其界面的右上方选择

点击Canvas，或者使用其快捷键，都可以实现隐藏或打开预览界面。

 预览界面的右下方，有个类似播放按钮的键。如果界面上包含按钮、表格等需要进行手势操作的控件，就需要点击此处的实时预览按钮，激活实时预览功能，再次点击即可取消

左侧文件列表里:

AppDelegate.swift：应用代理文件，主要用来监听来自其它程序的外部事件，或者在程序启动之后进行预处理操作，通常在2程序启动之后，通过子线程进行本地数据的更新操作。

SceneDelegate.swift：场景代理文件，主要用来处理分屏功能，并管理应用程序的显示方式，例如让多个实例同时运行，或在一个实例移至后台时采取措施。

ContentVIew.swift：内容视图文件，是默认的用户界面，开发者可以在此文件中进行用户界面的设计和布局。当然对于复杂的用户界面，我们可以创建多个内容视图文件。

剩下的几个文件先不讲，目前还用不上。

 接着切回ContentView.swift文件，点击右侧的Resume，打开实时预览。再看回文件中的代码。

 body属性的类型为View协议，View是SwiftUI所有界面元素的基础类型。遵循View协议并实现必需的body属性，即可给视图提供自定义的内容和行为。

 从代码和同步预览区可以看出，此时在界面中的Text视图，文本视图显示的内容位于双引号之间。

Text文本操作

 接下来讲解一些对Text文本操作的语法，语法和文本在同一个body内，跟在你需要更改的文本之后。

如果我们想对文本的内容进行加粗

 这样就能使得文本字体变粗，如果还想对该文本进行其他操作，接在后面继续加即可。但如果想添加多个文本，就需要将多个Text文本放在VStack视图下。VStack视图可以将其内部的多个视图，在垂直方向进行等距排列，因此就能在预览区域，以纵向排列的方式，显示两个文本视图。

而Xcode有个更简单的方法，点击右上角的 + 号，打开组件库，

 打开组件库后，可以在组件库中找到Text，然后拖拽到预览图里的text的下方，即可在text下方添加一个新的text文本框，并且，我们可以看到左边代码会自动添加一个VStack视图，如下图

这是右边预览的情况

这是左边代码的情况

接着，讲解一些对Text相关的语法

.italic()   #文本倾斜

.underline()   #下划线

.underline(true, color: .orange)   #下划线，并将下划线改成橙色

.strikethrough()   #添加删除线

.strikethrough(true, color: .red)   #下划线，并将下划线改成红色

.foregroundColor(Color .yellow)   #更改文字颜色为黄色

.background(Color .blue)   #更改文本框背景色为蓝色

.baselineOffset(CGFloat(15.0))   #设置文本内容在垂直方向上的偏移值

.background(Image("Picture"), alignment: .bottom)   #将一张图片作为文本视图的背景，并设置文字内容位于文本视图的底部

.font(.footnote)   #设置文字的字体尺寸为注脚样式

.font(.system(size: 36))   #设置字体尺寸为36

.font(.system(.title, design: .monospaced))   #设置文字的字体为标题样式，该样式可以根据屏幕尺寸的大小，自动调整自身的尺寸

.font(.custom("BradleyHandITCTT-Bold", size: 36))   #将字体改为指定字体，并将尺寸设置为36

.fontWeight(Font.Weight.heavy)   #添加一个文字视图，并通过字体粗细属性给它设置加粗效果

.fontWeight(Font.Weight.ultraLight    #通过文字粗细属性，添加一个纤细的字体效果

注意： VStack视图里面只能存放10个子视图，所以要在第十个子视图之后继续存放的话，需要在第一个VStack子视图里，再添加一个VStack视图

Text段落属性

 接着，讲解一些文本视图的段落属性，通过这些段落属性可以调整文字的字距、行距、偏移值、框架和对齐方式等视觉样式。

.tracking(10)    #调整字距为10

.kerning(10)   #调整字母间距为10

.blur(radius: 10)   #添加模糊效果，并设置模糊的半径为1

.lineSpacing(20)   #设置行距为20

.lineLimit(nil)   #同时不限制文字的行数

.offset(x: 40, y: 0)  #设置文字内容在水平方向上，向右侧偏移40点的距离

.frame(width: 200, height: 80, alignment: .bottomTrailing)   #设置文本的宽度为200，高度为80，内容位于文本视图的右下角

.frame(width: 200, height: 80, alignment:   #设置文本的宽度为200，高度为80，内容位于文本视图的中心位置

.position(x: 50, y: 50)   #调用文本视图的位置方法，使文本向右和向下各偏移50点的位置。该方法会使对齐属性失效

.multilineTextAlignment(.center)   #多行对齐，中心对齐

Text填充

因为程序是链式结构的原因，所以放置语法的位置影响很大

这就是典型的例子，借由此特效，我们可以做到一个渐变效果

 先将文本框的大小扩至到最大，接着使用edgesIgnoringSafeArea取消安全区，让文本框填充，实现全屏幕覆盖
.frame(miniWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.edgesIgnoringSafeArea(.all)