第
SwiftUI?引导页界面实现示例
目录引言页面分析-元素构成实战编程-创建项目实战编程-引导图片实战编程-引导文字实战编程-引导按钮实战编程-轮博滚动整体效果-预览本章小结
引言
当用户首次启用App时，客户端应用常常会出现一段过渡的App功能说明页面，帮助用户快速了解并熟悉App的基本功能和亮点。
引导页是用户了解产品的第一个窗口，能给用户留下最初的印象。
一个好的引导页可以很好地传达产品设计理念和产品设计调性，也是企业传达企业文化很好的窗口。当然对于开发者来说，也是必不可少的练手项目。
接下来，我们同样将用10分钟来构建一个引导页界面布局。
页面分析-元素构成
引导页常常由3～5个滑动页面组成，引导页的设计内容较为规范统一，常规由图片、说明文案、引导按钮组成。当引导页滑动到最后一个页面时，用户可以点击引导按钮进入登陆页或者首页。
引导图片：使用Image组件，保持其固定宽高比；引导文字：使用Text组件，设置字体颜色等；引导按钮：使用Image组件，引用Apple官方的SFSymbols图标库图标；
考虑完整体结构后，对于单个页面布局可以采用垂直布局，以此为图片文字引导按钮。
实战编程-创建项目
打开Xcode开发工具，点击CreateanewXcodeproject，将新项目命名为GuidePage，如下弹窗所示：
命名好项目后，指定保存路径，一个SwiftUI项目就创建完成了。
实战编程-引导图片
和上一章节导入登录页面背景图片的方案一致，点击视图工具栏的Assets.xcassets文件，点击底部+图标，选择Import，如下弹窗所示：
本次引导页需要搭建4个页面，因此需要到4张引导页图片。除了点击+图标，选择Import导入本地图片外，还可以在本地文件夹中选择多张图片拖入到中间的资源文件中进行导入，两种方式在实际开发中均可使用。
导入文件完成后，如下弹窗所示：
当然别忘了给导入的图片重命名，方便更好地找到图片。图片资源导入成功后，回到ContentView文件，多张图片下，可以使用图片数组的方式将导入的图片创建在一个图片数组中，代码如下：
letimageModels=[image001,image002,image003,image004]
let为声明常量的方法，imageModels为声明的对象，使用赋值运算符=给声明的对象赋值。数组的符号为[]，由于图片在SwiftUI引用的方式为字符串类型，因此数组内的元素为多个字符串元素，使用,隔开。
SwiftUI声明式语法的魅力之处在于，我们声明的对象imageModels可以自动根据赋值的内容确定其类型，省略了每次都需要指定类型的编程步骤。
我们使用Image组件展示imageModels图片数组中的图片看看效果，代码如下：
structContentView:View{
letimageModels=[image001,image002,image003,image004]
varbody:someView{
Image(imageModels[0])
.padding()
Image组件引导imageModels图片数组的内容，使用[]进行索引，而计算机的索引是由0开始，因此0代表imageModels图片数组第一个元素，也就展示了第一张图片。
可以看到图片尺寸已经超出了屏幕可见范围，结合上一章内容所需，需要设置图片修饰符让Image内容展示在屏幕范围内，如下代码所示：
Image(imageModels[0])
.resizable()
.scaledToFit()
resizable修饰符可对Image图片对象进行缩放，scaledToFit修饰符在缩放的基础上对Image图片对象设置保持其宽高比，避免图片拉升变形。
实战编程-引导文字
引导文字和引导图片具有一一对应关系，每一张引导图片对应一段引导文字，因此也可以使用数组的方式创建文字数字再引用，如下代码所示：
lettextModels=[勤测体温,勤加消毒,勤洗双手,出门戴口罩]
引导文字和引导图片的布局方式为垂直布局，这里可以使用到VStack布局容器，并可使用文字修饰符对文字进行美化，如下代码所示：
VStack(spacing:20){
Image(imageModels[0])
.resizable