第1章第1节： 创建第一个SwiftUI项目 [SwiftUI快速入门到实战]

本专栏包含231节SwiftUI教程，基于最新的SwiftUI 2.0。

231节大容量课程：包含了SwiftUI的大部分知识点，详细讲解SwiftUI的方方面面。15个超级精彩的实例：包含美食、理财、健身、教育、电子商务等各行业的App实例！

SwiftUI是一种创新、简单的iOS开发中的界面布局方案，可以通过Swift语言的强大功能，在所有的Apple平台上快速构建用户界面。 仅使用一组工具和API为任何Apple设备构建用户界面。

• 本课程练习素材下载：互动教程网 http://hdjc8.com/hdjc/swiftUI/

【本专栏特点】

1、创新的教学模式：手把手教您SwiftUI用户界面开发技术；

2、贴心的操作提示：让您的眼睛始终处于操作的焦点位置；

3、语言简洁精练：瞄准问题的核心所在，减少对思维的干扰，并节省您宝贵的时间；

4、课程短小精悍：即方便于您的学习和记忆，也方便日后对功能的检索；

5、齐全的学习资料：提供所有课程的源码；

6、购买本专栏，免费获得：互动教程网的同名互动课程！

课程大纲快速入口：

第一章：SwiftUI基础控件

1-1 创建第一个SwiftUI项目
1-2 使用Text视图显示指定的文字
1-3 Text视图的段落属性
1-4 Text视图的填充属性
1-5 如何使视图充满整个屏幕
1-6 如何对Text视图里的日期进行格式化
1-7 使用Text视图创建漂亮的富文本
1-8 使用Label显示图像、SF符号和文字的组合
1-9 使用TextField文本输入框接收用户的数据
1-10 使用SecureField密文输入框接收用户的密码
1-11 创建可容纳多行滚动文字的输入框TextEditor
1-12 Button按钮控件的使用
1-13 通过Button打开一个模态窗口
1-14 使用Image图像视图显示项目中的图片
1-15 如何给图像视图添加边框、透明度和阴影
1-16 使用图像视图强大的色彩调整功能
1-17 两个图像视图之间的色彩混合
1-18 如何给图像视图添加遮罩以突出主题
1-19 如何对图像视图进行缩放和旋转
1-20 如何下载并使用图像视图显示网络图片
 

第二章：SwiftUI实用控件

2-1 方便用户选择项目的Picker拾取器
2-2 方便用户选择日期的DatePicker日期拾取器
2-3 对DatePicker日期拾取器进行实时格式化
2-4 使用ColorPicker快速挑选所需的颜色
2-5 如何将Picker转换为分段拾取器
2-6 使用Slider滑杆在指定的范围内选择一个数值
2-7 使用Stepper步进器在小范围内进行数值的精确调整
2-8 使用Toggle开关控件开启或取消某个选项
2-9 使用TabView包含和切换多个页面
2-10 使用TabView快速实现分页效果
2-11 在SwiftUI中使用WebKit里的网页视图
2-12 使用SwiftUI的Map视图创建地图和MapPin
2-13 在SwiftUI中使用MapKit里的地图视图
2-14 在SwiftUI中使用UIKit里的环形进度条
2-15 如何通过定时器实现环形进度条的定时隐藏
2-16 如何UIKit的项目中使用SwiftUI里的视图
2-17 使用ProgressView快速创建环形进度条和水平进度条
2-18 如何利用旋转和偏移功能对视图进行镜像操作
2-19 如何将颜色、渐变、图片和图形作为视图的背景
2-20 如何通过AnyView返回任意类型的视图
2-21 使用ViewModifier视图修饰符集成多个样式
2-22 如何在SwiftUI中绘制一个圆形
2-23 矩形和圆角矩形的绘制以及给图形添加描边
2-24 使用胶囊图形绘制一朵漂亮的彩色花瓣
2-25 通过Path路径绘制不规则的线条和图形
2-26 使用渐变提高视觉的冲击力：绘制线性渐变
2-27 使用角度渐变制作顺时针的扇形渐变颜色
2-28 使用径向渐变制作从原点向外扩散的渐变颜色
2-29 如何使用库窗口往代码中快速添加视图
 

第三章：SwiftUI页面布局

3-1 使用Group在多个模拟器中预览视图
3-2 使用HStack在水平方向排列视图
3-3 使用VStack在垂直方向排列视图
3-4 使用ZStack在深度方向排列视图
3-5 使用LazyVStack惰性加载垂直堆栈
3-6 使用LazyVGrid进行灵活性的网格布局
3-7 使用Divider分隔线对视图进行分隔
3-8 使用Spacer空格视图撑满布局空间
3-9 HStack, VStack和ZStack布局视图的综合应用
3-10 使用List列表在垂直方向显示一系列的内容
3-11 如何往一个List列表里插入新的记录
3-12 如何删除List列表里的记录
3-13 如何调整记录在List列表里的顺序
3-14 如何使列表同时支持删除和移动记录的功能
3-15 使用section将列表分为几个组
3-16 使用tintColor单独设置列表中的图表颜色
3-17 利用List的children属性创建一个嵌套列表
3-18 使用ScrollView在限定的区域显示超长的内容
3-19 创建一个水平方向上的滚动视图
3-20 创建两层嵌套的滚动视图
3-21 使用ScrollViewReader使滚动视图跳转到指定位置
3-22 制作一份漂亮而强大的表单
3-23 使用Section对表单进行分组
3-24 如何激活表单以及如何使表单失效
3-25 如何切换部分表单项目的可见性
 

第四章：SwiftUI制作漂亮的动画

4-1 快速制作一个缩放动画
4-2 使用withAnimation制作缩放和渐隐动画
4-3 制作渐缓时间曲线的位移动画
4-4 制作spring样式时间曲线的旋转动画
4-5 色相和亮度的复合动画的制作
4-6 如何修改动画的播放速度和延迟时间
4-7 如何制作循环动画并指定动画的循环次数
4-8 如何以动画的方式显示或隐藏指定的位图
4-9 如何制作样式丰富的过渡动画
4-10 如何制作一个模拟手机解锁的动画
4-11 三维旋转、缩放和偏移三合一的复合动画
4-12 通过修改渐变颜色的色相制作华丽的色彩动画
4-13 创建漂亮的色轮旋转动画
4-14 如何利用裁剪图形制作常见的聚焦动画
4-15 如何利用裁剪图形制作探照灯滚动扫描效果
4-16 制作一段漂亮的花朵旋转动画
4-17 利用动画的延迟特性完成序列动画的制作
4-18 利用图形的描边和虚线相位制作履带动画
4-19 使用VideoPlayer播放视频素材
4-20 使用matchedGeometryEffect创建视图过渡动画
 

第五章：SwiftUI的交互操作

5-1 如何给视图添加单击手势
5-2 如何给视图添加双击手势
5-3 如何给视图添加长按手势
5-4 如何给视图添加旋转手势
5-5 如何给视图添加拖动手势
5-6 如何使一个视图同时支持多种的手势
5-7 如何给一个视图添加序列手势
5-8 借助sizeCategory预览不同字体下的文本视图
5-9 使用@ScaledMetric使数值匹配Dynamic Type size
5-10 如何在预览窗口使用不同的模拟器预览用户界面
5-11 预览视图在正常模式和黑暗模式下的效果
5-12 如何创建Context Menu上下文菜单
5-13 使用appstoreOverlay向用户推荐其他的应用
5-14 使用fileExporter将文档导出到iCloud
5-15 使用DisclosureGroup视图实现点餐功能
5-16 根据用户输入的字符对数据进行过滤
5-17 如何使用SwiftUI分析工具跟踪视图的性能
5-18 创建一个简单的Widget小组件
5-19 创建一个具有计时功能的Widget小组件
5-20 开始制作一款可配置的天气Widget小组件
5-21 实现Widget对应的完整应用中的功能
5-22 使用App Groups使应用和Widget共享数据
5-23 从零开始编写天气Widget小组件的每行代码
 

第六章 SwiftUI的页面跳转

6-1 如何使用NavigationLink进行页面间的跳转
6-2 如何在PreviewProvider中使用导航视图
6-3 如何设置导航栏里的标题样式
6-4 如何在导航栏添加一些功能按钮
6-5 如何在导航视图的底部放置一排工具栏
6-6 点击列表不同的选项进入不同的详情页面
6-7 如何实现导航页面的自定义后退
6-8 如何通过PresentationMode实现导航的后退
6-9 如何自动滑入导航视图的二级页面
6-10 如何使用@Binding绑定包装关闭模态窗口
6-11 如何使用@ObservedObject监听实例对象一
6-12 如何使用@ObservedObject监听实例对象二
6-13 如何使用@StateObject实现简单的购物车功能
6-14 使用@EnvironmentObject进行页面间的数据传递
6-15 使用@Environment访问环境中的指定key的值
6-16 使用@AppStorage将属性的值同步到UserDefaults
6-17 使用@SceneStorage存储各个场景的状态
6-18 如何快速打开一个模态窗口
6-19 通过PresentationMode使用模态窗口的关闭
6-20 通过popover方法快速打开模态窗口
6-21 如何快速打开一个警告窗口
6-22 如何快速打开一个动作表单
6-23 将子视图作为属性以使布局代码更简洁
6-24 如何实现对视图显示和消失事件的监听
6-25 使用SwiftUI管理生命周期
6-26 使用@UIApplicationDelegateAdaptor获得AppDelegate
6-27 使用UISceneConfiguration往项目中导入SceanDelegate
6-28 如何在页面跳转时显示或隐藏底部的标签栏
6-29 通过路由在SwiftUI中实现组件化开发
 

第七章 SwiftUI项目实战

7-1 创建一个非常漂亮的复合动画
7-2 通过第三方的类库实现下拉刷新功能
7-3 快速实现一个侧滑菜单
7-4 制作一款教育应用的漂亮首页
7-5 给页面里的内容添加动画效果
7-6 制作一份游戏类型选择页面
7-7 给页面里的内容添加动画效果
7-8 完成电子商务列表页面顶部元素的制作
7-9 完成电子商务列表页面剩余内容的制作
7-10 给页面里的内容添加动画效果
7-11 完成银行卡片视图的创建
7-12 创建银行卡片的列表并实现动画效果
7-13 开始制作一份用来计算存款利息的界面
7-14 完成存款金额输入界面的制作
7-15 完成存款期限拾取界面的制作
7-16 利息支付方式设置界面的制作
7-17 完成自定义弹出窗口的制作
7-18 给页面里的内容添加动画效果
7-19 开始制作一份注册和登录页面
7-20 完成登录表单和注册表单的制作
7-21 给页面里的内容添加动画效果
7-22 开始制作一份网站访问量的统计页面
7-23 完成滑动选项卡的制作
7-24 完成漂亮的甜甜圈图表的制作
7-25 完成滚动列表的制作并实现动画效果
 

第八章 SwiftUI精彩实例

8-1 为一款美食应用制作一组漂亮的引导面
8-2 完成页码识别器和跳过按钮的制作
8-3 给引导页添加手势并将页码识别器与状态进行绑定
8-4 开始制作一款健身应用的主要界面
8-5 完成环形图表下方的今日力量训练列表
8-6 完成今日力量训练下方的健身视频列表
8-7 完成健身数据的统计页面的制作
8-8 完成由曲线、面积、柱形图表组成的复合图表
8-9 给页面里的内容添加动画效果
8-10 开始制作在线销售美味冰激凌的应用界面
8-11 完成三张漂亮的冰激凌卡片的制作
8-12 完成二级页面顶部内容的制作
8-13 完成二级页面其它内容的制作
8-14 给两个页面的内容添加动画效果
8-15 开始制作一款理财应用的主要界面
8-16 制作一组横幅广告以展示用户的多张银行卡
8-17 完成历史交易列表的制作
8-18 给页面里的内容添加动画效果
8-19 开始制作个人理财档案页面
8-20 完成个人理财档案页面功能列表的制作
8-21 开始制作理财类目选取的九宫格页面
8-22 完成理财类别九宫格视图的制作
8-23 开始制作增加收入的表单页面
8-24 完成增加收入的表单页的制作
8-25 开始制作理财报表页面
8-26 完成月度支出柱形图表的制作
8-27 完成漂亮的彩环图表的制作
8-28 完成彩环图表下方的费用列表的制作
8-29 给页面里的内容添加动画效果
 

第九章 SwiftUI完整项目

9-1 使用SwiftUI技术开始搭建互动教程合集的界面
9-2 集中存放应用程序所有视图通用的修饰符
9-3 完成首页顶部内容的制作
9-4 完成首页课程类别列表的制作
9-5 完成首页课程班级列表的制作
9-6 完成首页热门主题列表的制作
9-7 将四个功能模块合并成首页
9-8 完成课程类型和课程列表类型的定义
9-9 完成历史课程列表页面的制作
9-10 完成课程列表视图的制作
9-11 实现从服务器获取新闻列表的功能
9-12 开始进行新闻列表界面的制作
9-13 完成课程标签列表页面的制作
9-14 完成班级列表页面的制作
9-15 制作页面底部的四个选项卡
9-16 实现从服务器获取刷题类别列表的功能
9-17 创建刷题类型列表单元格的自定义视图
9-18 实现刷题类别列表界面的制作
9-19 定义题目类型并实现从服务器下载题目的功能
9-20 实现答题页面的制作
9-21 定义消息类型并实现从服务器下载消息的功能
9-22 完成自定义消息视图的制作
9-23 完成消息列表页面的制作
9-24 创建用户档案列表的数据模型和数据源
9-25 自定义一个视图用来显示用户学习状态
9-26 完成用户档案页面功能列表的制作
9-27 完成订阅选项视图的创建
9-28 完成会员订阅页面的创建
9-29 完成课程资源下载页面的制作
9-30 获取课程缓存大小并实现缓存文件的删除
9-31 演示用户档案六个功能页面的使用

本节讲解如何创建第一个SwiftUI项目：

1. 欢迎使用本专栏学习SwiftUI，这是苹果最近推出的最直观、最创新的全平台界面搭建技术，并且使用容易编写和阅读的声明式的语法。


2. 要使用SwiftUI技术，首先使用Xcode创建一个SwiftUI项目。保持默认的选项，点击下一步按钮，进入下一个设置页面。


3. 在产品名称输入框里，输入项目的名称。


4. 接着点击此处的下拉箭头，打开用户界面技术列表。


5. 在默认状态下，开发者使用故事板来搭建应用程序的用户界面，这里我们选择SwiftUI选项。


6. 然后打开生命周期管理选项列表。


7. Xcode 将创建与项目同名的Swift文件，取代旧的AppDelegate.swift和SceneDelegate.swift，用于引导程序呈现初始用户界面。


8. 这样就完成了项目的设置，点击右下角的下一步按钮，选择项目的存储位置。


9. 这里选择桌面作为项目的存储位置，您可以根据需求自行选择其它路径，作为项目的存储位置。最后点击创建按钮，创建一个新的项目。


10. 点击此处的显示或隐藏检查器图标，隐藏右侧的检查器面板。


11. 实时预览的功能最早出现在Xcode 11版本，通过该功能，开发者终于拥有了实时观察编码效果的窗口。点击此处的Resume按钮，激活预览窗口。


12. 由于项目默认创建了一个文本标签，所以此时在预览区域显示了一个内容为Hello World的文本标签。点击此处的图标，可以缩小预览区域的显示比例。


13. 点击此处的图标，打开显示比例列表。


14. 选择此处的显示比例，以完全显示整个预览窗口。将光标放置在模拟器外部的预览区域，双指在触控板上捏合操作，可以精确缩放预览区域的显示比例。


15. 如果需要关闭预览窗口，可以点击此处的调整编辑器选项图标，打开编辑器选项菜单。


16. 选择此处的画布选项，隐藏右侧的预览窗口。


17. 由于实时预览功能对于开发者来说十分重要，所以我们经常需要切换预览窗口，因此推荐使用快捷键打开或关闭预览窗口。


18. 如果界面上包含按钮、表格等需要进行手势操作的控件，就需要点击此处的实时预览按钮，激活实时预览功能。


19. 此时就可以对界面中的交互元素进行手势操作了，当然目前界面只有一个标签，无需开启实时交互功能。再次点击实时预览按钮，取消实时预览功能，


20. 点击此处的图标，可以在物理设备上预览用户界面。


21. 由于没有物理设备连接电脑，所以此时显示空白列表。


22. 点击此处的检查预览图标，打开内容视图设置面板。


23. 在打开的内容设置面板中，可以设置视图的属性和预览效果。首先设置模拟器的名称。


24. 在面板外部点击，隐藏设置面板。


25. 此时在模拟器的顶部，显示了新的名称。所有对预览属性的修改，都会以代码的形式，显示在PreviewProvider的内部。


26. 接着演示如何使用不同的模拟器预览用户界面，首先打开模拟器列表。


27. 在打开的模拟器列表中，选择此处的模拟器。


28. 在右侧的预览区域，显示了新的模拟器。


29. 如果需要预览视图在任意尺寸的显示区域的效果，可以点击此处的下拉箭头，打开布局选项列表。


30. 选择此处的fixed选项，自定义模拟器的尺寸。


31. 此时显示了视图在宽度和高度都是100点时的效果。


32. 接着来修改模拟器的尺寸。


33. 继续修改模拟器的高度。


34. 在内容视图设置面板的外部点击，完成模拟器尺寸的调整。


35. 修改此处的代码，同样可以调整模拟器的尺寸。


36. 将显示区域的宽度和高度都设置为400。


37. 接着恢复模拟器的样式。点击此处的下拉箭头，再次打开布局选项列表。


38. 选择列表中的设备选项，使布局的尺寸，跟随上方所选设备的尺寸。


39. 在内容视图设置面板的外部点击，完成模拟器的调整。


40. 使用预览功能，同样可以观察用户界面在正常、暗黑两种主题下的效果。


41. 点击此处的下拉箭头，打开颜色方案列表。


42. 选择列表中的暗黑主题。


43. 此时在预览区域，显示了用户界面在暗黑主题下的显示效果。


44. Dynamic Type动态类型功能，允许用户通过系统的设置页面，调整屏幕上显示的文本内容的大小。


45. 点击此处的下拉箭头，打开动态类型选项列表。


46. 选择Extra Large超大选项，预览视图中的文字在该选项下的显示效果。


47. 在内容视图设置面板的外部点击，完成动态类型的调整。


48. 接着来查看项目自带的几个文件，首先打开此处的项目应用文件。


49. 右侧的代码包含一个App类型的结构体，通过设置结构体的body属性，引导程序呈现初始的用户界面。


50. 新的属性配置文件包含一个启动画面属性，通过该属性设置应用程序的启动画面。最后返回内容视图文件，开始学习SwiftUI技术！