互动教程网[www.hdjc8.com]

1. 欢迎使用本专栏学习SwiftUI，这是苹果最近推出的最直观、最创新的全平台界面搭建技术，并且使用容易编写和阅读的声明式的语法。2. 要使用SwiftUI技术，首先使用Xcode创建一个SwiftUI项目。保持默认的选项，点击下一步按钮，进入下一个设置页面。3. 在产品名称输入框里，输入项目的名称。4. 接着点击此处的下拉箭头，打开用户界面技术列表。5. 在默认状态下，开发者使用故事板来搭建应用程序的用户界面，这里我们选择SwiftUI选项。6. 然后打开生命周期管理选项列表。7. Xc.

本节课演示最基本的Text视图，以及Text视图常见的视觉属性。它和UILabel标签视图类似，主要用来在界面上显示辅助信息。首先隐藏左侧的项目导航区。接着在界面中添加文本视图，界面元素都需要放置在ContentView结构体的body属性中，然后点击此处的Resume按钮，激活预览窗口。body属性的类型为View协议，View是SwiftUI所有界面元素的基础类型。遵循View协议并实现必需的body属性，即可给视图提供自定义的内容和行为。从右侧的同步预览区可以看出，此时在界..

本节课演示文本视图的段落属性，通过这些段落属性可以调整文字的字距、行距、偏移值、框架和对齐方式等视觉样式。添加一个文本视图，并使用字距属性设置它的字距为10，同时观察右侧同步预览区的变化。字距属性表示一组文字的平均字距。添加另一个文本视图，并使用字距调整属性，设置它的字距为10。字距调整属性表示一对字元的字距。给文本视图添加模糊效果，并设置模糊的半径为1。接着添加一个具有较长文字内容的文本视图，设置文本视图的行距为20，同时不限制文字的行数。添加一个文本视图，并设..

本节课演示文本视图的内部填充属性，开发者可以使用填充属性，修改文字内容和文本视图边框之间的距离，即修改文本视图的上下左右的内边距。为了更加清楚的显示填充属性，首先给文本视图设置黑色作为背景颜色，设置白色作为文字颜色。设置填充属性的值为20，增加文本视图与文字内容的间距。链式调用的顺序由上而下进行，所以首先设置第二个文本视图的内边距，然后再给文本视图设置背景颜色和字体颜色，这时内边距也会拥有相应的背景颜色。接着给文本视图添加多个填充属性，以创建由外向内颜色渐变的边框。首先添..

SwiftUI在界面搭建时，会考虑到屏幕设备的安全区域，界面的元素被限制在刘海的下方。本节课演示如何使界面元素可以突破这个安全限制，并撑满整个屏幕。设置文本视图的框架属性，不限制文本视图的最大宽度和最大高度。设置文本视图的背景颜色为橙色，从右侧的预览窗口可以看出，文本视图位于顶部刘海的下方。设置文字的字体属性，以增加文字的尺寸。接着设置文本视图的边缘，在上下左右四个方向上忽略安全区域的限制。点击此处的按钮，缩小预览窗口的显示比例。文本视图忽略了安全区域的限制，从而..

本节课演示如何对日期内容进行格式化，并显示在文本视图中。首先给当前的ContentView结构体，添加一个日期属性。该日期属性的初始值，是设备的当前日期。接着添加一个日期格式化类型的属性，对日期内容进行格式化操作。首先初始化一个日期格式化类型的实例。设置日期格式化对象的日期样式为长样式，依次显示日数、月份和年份的值。最后返回指定的实例，作为日期格式化属性的值。设置文本视图的字体样式，以增加文字的尺寸。由于同步预览处于暂停状态，所以需要点击此处的恢复按钮，恢复同步预..

本节课演示如何使用文本视图的扩展方法，对多个不同样式的文本视图进行拼接，从而创建漂亮的富文本。首先设置文字的字体颜色为黄色。同时给文字设置加粗的显示效果。调用文本视图的加号扩展方法，拼接另一个文本视图，该扩展方法可以将两个文本视图进行拼接，并返回一个统一的文本视图。设置第二个文本视图的字体颜色为橙色，并给文字添加删除线的效果。使用扩展方法，拼接第三个指定内容的文本视图。设置文本视图的字体颜色为红色，并给文字添加倾斜的显示效果。使用相同的方式，继续拼..

Label是SwiftUI 2.0带来的一个新的界面元素，使您可以在单个UI元素中，显示图像、SF符号和文字的组合。创建一个标签控件，显示一行文字，并在文字的左侧显示一枚图标。接着显示Label和List的搭配使用，在List中使用Label，可以创建常见的选项列表。和上一次创建Label不同，这次使用更加简洁的初始化语句，创建一个Label控件，并设置Label的文字和图标。继续在列表中添加一个Label元素。当文字内容较多时，图标也能和右侧的文字保持完美对齐。..

本节课演示TextField的使用，TextField是一个用来显示可编辑文本界面的控件，主要用于接收和显示来自用户的输入内容。首先添加一个字符串类型属性，用于接收用户在TextField中输入的内容，并在左侧添加@State属性包装器。@State是指属性代理，它表示userName属性将和界面上的元素进行绑定。当属性的值发生变化时，SwiftUI会立即通知绑定的视觉元素进行内容的更新。由于给ContentView结构体添加了两个属性，所以需要更新PreviewProvider..

当用户在输入密码时，我们需要使用密文来显示用户输入的内容，这就需要借助SecureField视图。要使用该视图，首先给当前的结构体添加一个属性。该属性用于存储用户输入的密码，并在属性的左侧添加了一个@State属性代理标记，从而使属性和界面元素进行绑定。修改当前的文本视图，以实时显示属性的值。这里实时显示密码，只是为了方便演示密文输入框的使用。由于密码属于隐私，通常不会显示密码信息的。添加一个密文输入框，并设置指定的占位符。同时设置它的text的值为password属性的值，并通..

TextField可以让用户输入单行的文字内容，若想输入多行的文字内容，可以使用能够容纳多行滚动文字的 TextEditor。定义一个字符串属性，用来存储用户输入的文字内容。接着定义一个布尔属性，用来标识是否弹出警告窗口，以显示用户输入的内容。TextEditor是由UIKit中的UITextView演变而来，因此可以在init方法中，通过UITextView修改TextEditor的外观属性。添加一个VStack视图，作为子视图的容器。创建一个TextEditor，Te..

Button按钮是用户界面最常见的交互控件，本节课演示按钮的基础用法，以及创建图文混排样式的按钮。首先添加一个简单的按钮，并指定样式的标题文字为First button。当按钮被点击时，在控制台输出相应的日志。接着点击此处的实时预览按钮，进入实时预览模式。点击此处的按钮，检查按钮的点击事件。使用键盘上的快捷键，显示底部的调试区。从控制台可以看出，并没有输出相应的日志。这说明在实时预览模式，无法查看按钮的日志输出。接着点击编译并运行按钮，在模拟器中预览当前的项目。..

本节课将使用Button控件的sheet方法，打开一个指定内容的模态窗口。首先给当前的结构体对象添加一个属性。该属性是布尔类型，用于决定模态窗口的显示和隐藏。接着添加一个按钮控件，并设置它的标题文字。当按钮被点击时，设置布尔属性的值为真。调用Button控件的sheet方法，并设置isPresented的值为当前的布尔属性。当属性的值为真时，显示sheet中的内容。定义一个遵守View协议的指定名称的结构体，作为一个新的自定义视图。结构体相对于类来说更加轻量，所以Swif..

精美的用户界面，当然少不了Image图像视图的装饰！所以从本节课开始，将陆续讲解众多的和图像视图相关的知识点。首先点击此处打开文件列表。选择此处的资源文件夹，查看项目中已经存在的图片资源。从资源文件夹可以看出，当前项目中已经导入了一张图片，点击ContentView文件，返回原来的界面。接着开始编写代码，在用户界面上显示资源文件夹中的图片。Image视图类似于UIKit中的UIImageView，主要用于显示项目里的图片素材。这里直接使用图片的名称，即可快速显示指定名称的..

您将在本节课给图像视图添加边框、透明度和阴影等视觉效果，首先添加一个图像视图。通过指定的名称，加载项目中的一张图片。请使用我们提供的项目源码里的素材图片。给图像视图添加一个橙色的边框，边框的宽度为默认值1。接着添加另一个图像视图，并设置边框的宽度为10。添加第三个图像视图，并设置图像视图的透明度为0.5，也就是图片处于半透明的状态，接着选择这三个图像视图的代码。按下键盘上的快捷键，注释所选的代码。然后继续编写代码，添加一个新的图像视图。添加一个新的..

SwiftUI提供了大量的图像特效，从而使用户不需借助专业的图像处理软件，也可以给图像添加丰富多彩的梦幻效果。首先加载项目里的图片。依次添加两个图像视图，以方便进行特效的对比。其中第一个视图是原始图片，第二个是应用模糊效果之后的图像视图，模糊的半径是2。因为图片素材是包含透明度的，所以设置opaque属性为真，可以给透明像素应用模糊效果。设置图像的亮度为0.5。参数值的范围为0至1，其中0表示无效果，1表示最亮的效果。对图像的颜色进行反转，通俗点说，就是黑色和白色、黄色和..

本节课演示多个图像视图之间的混合效果。首先点击此处的文件名称，打开文件列表。选择此处的资源文件夹选项，打开项目的资源文件夹。当前资源文件夹包含两张图片，作为图像之间混合的演示素材。如果您需要使用这两张素材图片，请使用我们的课程源码。接着开始编写代码，首先添加一个图像视图。该图像视图用来加载指定名称的图片素材。差值混合模式查看每个通道中的颜色信息，并从基色中减去混合色，或从混合色中减去基色。与白色混合将反转基色的值；与黑色混合则不会发生变化。由于图片和背景颜..

本节课演示如何给图像添加遮罩，使用遮罩可以突出显示图片的主题内容，我们在第四章还将利用遮罩制作非常漂亮的动画。首先添加一个图像视图，显示项目中的一张图片素材。然后通过调用裁剪图形方法，给图像应用遮罩效果，遮罩图形为圆形，此时从右侧的预览窗口可以看出，图片已经被裁剪成圆形效果。接着添加一个新的图像视图，您将使用另一个遮罩方式。通过调用遮罩方法，给图像应用遮罩效果，遮罩图形为圆形，从预览窗口可以看出，两种方式都产生了相同的遮罩效果。点击此处的文件名称，打开文件列表。点..

本节课将演示图像视图的缩放和旋转，当前项目已经拥有了一个图像视图。添加一个新的图像视图，并将它缩小为原来的0.8倍。在右侧的预览窗口，观察上下两张图片的不同。您可以对图像视图的宽度和高度应用不同的缩放比例，在此将图像视图的宽度放大为原来的1.2倍，同时将图像视图的高度缩小为原来的0.5倍。在默认情况下，图像视图的缩放锚点位于图像视图的中心位置。此时您将图像视图的缩放锚点，修改为左下角。给图像视图应用旋转效果，并设置旋转的角度为90度。在默认情况下，图像视图的旋转锚..

项目中的图片素材毕竟数量有限，所以我们在工作中，经常需要下载网络上的图片。本节课演示如何下载并显示网络图片，首先打开文件列表。选择此处的文件名称，打开资源文件夹。资源文件夹拥有一张图片，这张图片将作为网络图片的占位符。点击此处的后退按钮，返回原来的开发界面。接着开始编写代码，实现网络图片的下载和显示。首先添加一个图像视图，加载您刚刚看到的占位符图片。添加一个UIImage类型的属性，该属性拥有@State属性包装器，所以当该属性的值发生变化时，和该属性绑定的图像视..

本节课演示Picker视图的使用，Picker和UIKit里的UIPickerView类似，主要用于提供一个滚动列表，方便用户的选择。首先添加列表的数据源。给当前的结构体添加一个数组属性，作为Picker列表的数据源。添加另一个数组属性，作为Picker列表的每一个选项的字体颜色。然后添加一个整型属性，作为列表里的处于选择状态的选项的索引值，并给它添加@State属性包装器，使该属性和界面中的Picker视图进行数据绑定。初始化一个Picker视图，并将它和selecte..

本节课演示DatePicker视图的使用，DatePicker和UIKit中的UIDatePicker类似，主要用于提供一个日期和时间列表，方便用户的选择。首先添加一个日期格式化类型的属性，您将用它对用户所选的日期和时间进行格式化，并显示在文本视图中。初始化一个日期格式化类型的实例，并设置它的日期样式为长类型，即依次显示月份、天数和年份。然后返回初始化的日期格式化实例。添加另一个属性，并给它添加@State属性包装器，从而和DatePicker进行绑定。当用户选择某个日期..

本节演示如何在用户选择日期时，实时设置日期的格式。首先定义一个属性，用来存储格式化后的日期。添加另一个属性，用来实时存储用户选择的日期。通过set语句，当用户选择日期时，对所选日期进行格式化。首先定义一个日期格式化对象，并设置日期的格式。对日期进行格式化，并将结果存储在第一个变量中。添加一个VStack视图，作为子视图的容器。接着添加一个DatePicker视图，将它和bindingDate属性进行绑定，并设置DatePicker的组件类型为日期类..

本节演示SwiftUI 2.0带来的ColorPicker，使用它可以让用户简单、快速的挑选所需的颜色。首先添加一个属性，用来存储用户选择的颜色。添加一个VStack视图，作为子视图的容器。创建一个尺寸为300的圆形，用来显示用户选择的颜色。添加一个高度为20的空格视图，使圆形和下方的ColorPicker保持适当的距离。继续添加一个HStack视图，作为子视图的容器。创建一个颜色拾取器，并支持透明度的设置。增加VStack视图的内间距，使颜色拾取..

本节课演示如何将Picker视图，修改为常见的分段拾取器。使用分段拾取器，可以在多个视图区域进行快速的跳转。现在开始编写相关代码。给当前的结构体添加一个数组属性，作为Picker列表的数据源。然后添加一个整型属性，作为列表里的处于选择状态的选项的索引值，并给它添加@State属性包装器，使该属性和界面中的Picker视图进行数据绑定。初始化一个Picker视图，并将它和selectedAnimal属性进行绑定，当用户操作Picker视图时，该属性的值将同步发生变化。接着来..

Slider视图的使用非常简单，用户可以在最小值和最大值的范围内，通过拖动滑块进行数值的快速设置，所以常用于音量调整、播放进度和拍照缩放等场合。首先添加一个浮点类型的属性，并设置它的初始值为0。该属性拥有@State属性包装器，表示该属性将和滑杆视图进行数据绑定。添加一个滑杆视图，并将滑杆视图和temperature属性进行绑定。当用户调整滑杆时，该属性的值也将同步发生变化。添加一个文本视图，用来实时显示temperature属性的值。设置VStack视图的内边距，使界面..

本节课演示Stepper步进器的使用，步进器由一个增加按钮、一个减小按钮和一个数值标签组成，非常适用于在小范围内进行数值的精确调整。首先添加一个浮点类型的属性，并设置它的初始值为0。该属性拥有@State属性包装器，表示该属性将和步进器视图进行数据绑定。添加一个步进器视图，接着将依次设置步进器的递增、递减事件和数值标签。设置步进器的递增事件，当用户点击加号按钮时，增加temperature的数值。设置步进器的递减事件，当用户点击减号按钮时，缩小temperature的数值..

Toggle开关控件的使用非常普遍，例如手机设置页面的蓝牙和飞行模式等功能的选项开关。主要用于标识是否选择某个选项，或者是否激活某项功能。首先添加一个布尔类型的属性，并设置它的初始值为真。该属性拥有@State属性包装器，表示该属性将和开关控件进行数据绑定。然后修改此处的文本视图，作为开关控件的标签。通过扩展方法，添加另一个文本视图，该文本视图用来显示布尔属性的值。设置文本视图的字体颜色绿色，并加粗显示文字内容。添加一个开关控件，并将它和布尔属性进行绑定。当用户调..

本节课演示TabView标签视图的使用，标签视图位于屏幕的底部，可以让用户在几个页面之间进行快速的切换，效果类似于UITabBarController。标签视图所控制的页面位于大括号之内。TabView仅支持类型为文本、图像或LayoutView的标签项，其他类型的视图将产生一个可见的空白标签项。添加一个文本视图，作为标签视图的第一个标签项。继续添加另一个文本视图，作为标签视图的第二个标签项。设置第一个文本视图的字体尺寸为36。接着来设置文本视图的选项卡，只有设置..

本节演示如何通过修改TabView的tabViewStyle，实现分页效果的制作。首先创建一个滚动视图，作为多个页面的容器。接着创建一个标签视图，标签视图所控件的页面位于大括号之内。添加一个文本视图，作为标签视图的第一个标签项。设置第一个文本视图的字体尺寸、显示区域和背景颜色。添加一个图像视图和一个文本视图，作为底部选项卡列表里的第一个选项卡。继续添加另一个文本视图，作为标签视图的第二个标签项。同样设置文本视图的字体尺寸、显示区域和背景颜色。..

SwiftUI并没有提供网页视图，所以我们需要借助于WebKit里的网页视图。本节课演示如何在SwiftUI项目中，使用其它框架里的视觉控件。首先导入需要使用到的WebKit框架。使当前的结构体遵循UIViewRepresentable协议。使用该协议的实例，可以在SwiftUI中创建和管理UIView对象。实现协议里的makeUIView方法，用来初始化并返回一个WKWebView网页视图对象。接着实现协议里的updatedUIView方法，用来设置网页视图需要加载的网..

SwiftUI 2.0为我们带来了Map视图，本节演示Map视图的使用，并在地图上显示一枚Map pin。要使用地图视图，首先引入所需的框架。接着定义一个结构体，作为Map pin数组中的元素的类型。添加一个id属性，以遵循Identifiable协议。接着添加一个属性，作为地图上的Map pin。初始化一个坐标区域属性，作为地图需要显示的坐标区域。添加一个数组属性，作为地图上所有的Map pin。根据两个参数，创建一个显示指定区域地理信息的地图视图。..

本节借助MapKit里的地图视图，创建一个SwiftUI中的地图。首先导入需要使用到的MapKit框架。使当前的结构体遵循UIViewRepresentable协议。使用该协议的实例，可以在SwiftUI中创建和管理UIView对象。实现协议里的makeUIView方法，用来初始化并返回一个MKMapView地图视图对象。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R8AoCb7I-1630557352652)(http://www.hdjc8..

除了SwiftUI 2.0提供的环形活动进度条，我们还可以借助UIKit里的UIActivityIndicatorView实现环形进度条。首先添加一个新的结构体，该结构体遵循UIViewRepresentable协议。当在结构体之间进行属性数值的传递时，传递的是属性的一个副本。所以需要使用@Binding属性包装器，将属性变成引用类型，对结构体之间的属性进行引用绑定。这样当属性的值发生变化时，另一个引用该属性的结构体的属性也会同时发生变化。此处实现makeUIView方法，用来初..

在上一节课，通过定时器实现环形进度条的定时隐藏。我们将在本节课借助ObservableObject可观察对象，实现环形进度条的定时隐藏。在此使用上一节课的源码，首先导入需要用到的框架。定义一个类，该类遵循可观察对象协议。可观察对象和@State属性包装器非常相似，区别是ObservableObject是用来修饰一个对象的。@Published属性包装器经常和ObservableObject配合使用，允许可观察对象里的属性被监听，从而起到和@State类似的作用。AnyCa..

SwiftUI 2.0带来了进度条视图，使我们可以快速创建环形进度条和水平进度条。首先添加一个VStack视图，作为子视图的容器。创建一个用来提示用户等待的循环进度动画，并设置前景颜色为橙色。接着点击此处的实时预览按钮，进入实时预览模式。当进入实时预览模式之后，开始播放环形进度条动画。点击实时预览按钮，退出实时预览模式。继续编写代码，创建水平进度条。首先添加一个属性，用来存储水平进度条的进度值。初始化一个进度视图，并设置它的最大值为100。创建一个..

本节课演示如何在传统的基于UIKit的项目中，使用SwiftUI框架里的界面元素。首先在欢迎面板中，点击创建一个新项目命令，创建一个新的项目。保持默认的选项，点击下一步按钮，进入下一个设置页面。首先在产品名称输入框里，输入项目的名称。接着点击此处的下拉箭头，打开用户界面技术列表。选择列表里的故事板选项，作为用户界面的搭建平台。这样就完成了项目的设置，点击右下角的下一步按钮，选择项目的存储位置。选择桌面作为项目的存储位置，您可以根据需求自行选择其它路径作为项..

本节课演示如何利用旋转和偏移功能，对视图进行镜像操作。首先点击此处的文件名称，打开文件列表。点击此处的文件名称，进入资源文件夹。资源文件夹里包含一张图标，该图标是一张人物的正面照，目前只完成了一半，您需要使用镜像操作，制作一张完整的图标。首先返回原来的编码界面。接着开始编写代码，实现图标的镜像操作。首先添加一个ZStack视图，作为子视图的容器。同时添加一个图像视图，加载资源文件夹里的图片。然后添加另一个图像视图，加载资源文件夹里的相同的图片。对图像视图进..

本节课演示如何将颜色、渐变、图片和图形这些元素，作为视图的背景。首先设置文本视图的字体，增加文字的尺寸。接着增加文本视图的内边距，以更加清楚的观察各种背景的视觉效果。使用橙色作为文本视图的背景颜色，并观察右侧预览窗口的变化。接着使用一个图像视图，作为文本视图的背景。调用图像视图的可调整大小方法，使图像视图适配文本视图的显示区域。使用线性样式的渐变，作为文本视图的背景。渐变的起始颜色为橙色，结束颜色为紫色。渐变线的起点位于文本视图的左上角，结束点位于文本视图..

本节课演示AnyView的使用，首先为当前的结构体，添加一个布尔属性。布尔属性用于判断显示哪一个视图，它的值是一个随机的布尔值。作为View协议唯一的属性，body需要return一个View。return关键词默认被省略，所以当在文本视图左侧加上return时，也是可以正常工作的。根据布尔属性的值判断，是否返回文本视图。如果属性的值为真，则返回第一个文本视图，否则返回第二个文本视图。现在需要刷新右侧的预览窗口，以生成不同的布尔值。首先点击此处的编辑器菜单。然后选..