当用户首次启用App时，客户端应用常常会呈现一段过渡的App功能阐明页面，帮助用户快速了解并熟悉App的基本功能和亮点。

引导页是用户了解产品的第一个窗口，能给用户留下开端的形象。

一个好的引导页能够很好地传达产品设计理念和产品设计调性，也是企业传达企业文化很好的窗口。当然关于开发者来说，也是必不可少的练手项目。

接下来，咱们同样将用10分钟来构建一个引导页界面布局。

页面剖析-元素构成

引导页常常由3～5个滑动页面组成，引导页的设计内容较为规范统一，惯例由图片、阐明文案、引导按钮组成。当引导页滑动到最终一个页面时，用户能够点击引导按钮进入登陆页或许首页。

快速上手10分钟完成一个引导页界面

  • 引导图片：运用Image组件，坚持其固定宽高比；
  • 引导文字：运用Text组件，设置字体色彩等；
  • 引导按钮：运用Image组件，引证Apple官方的SF Symbols图标库图标；

考虑完全体结构后，关于单个页面布局能够采用笔直布局，以此为图片>文字>引导按钮。

实战编程-创立项目

打开Xcode开发工具，点击Create a new Xcode project，将新项目命名为GuidePage，如下弹窗所示：

快速上手10分钟完成一个引导页界面

命名好项目后，指定保存途径，一个SwiftUI项目就创立完成了。

实战编程-引导图片

和上一章节导入登录页面背景图片的计划共同，点击视图工具栏的Assets.xcassets文件，点击底部“+”图标，挑选Import，如下弹窗所示：

快速上手10分钟完成一个引导页界面

本次引导页需求搭建4个页面，因而需求到4张引导页图片。除了点击“+”图标，挑选Import导入本地图片外，还能够在本地文件夹中挑选多张图片拖入到中心的资源文件中进行导入，两种办法在实践开发中均可运用。

导入文件完成后，如下弹窗所示：

快速上手10分钟完成一个引导页界面

当然别忘了给导入的图片重命名，便利更好地找到图片。图片资源导入成功后，回到ContentView文件，多张图片下，能够运用图片数组的办法将导入的图片创立在一个图片数组中，代码如下：

let imageModels = ["image001", "image002", "image003", "image004"]

let为声明常量的办法，imageModels为声明的目标，运用赋值运算符“=”给声明的目标赋值。数组的符号为“[]”，因为图片在SwiftUI引证的办法为字符串类型，因而数组内的元素为多个字符串元素，运用“,”隔开。

SwiftUI声明式语法的魅力之处在于，咱们声明的目标imageModels能够主动根据赋值的内容确认其类型，省略了每次都需求指定类型的编程过程。

咱们运用Image组件展现imageModels图片数组中的图片看看作用，代码如下：

struct ContentView: View {
let imageModels = ["image001", "image002", "image003", "image004"]
var body: some View {
Image(imageModels[0])
.padding()
}
}

快速上手10分钟完成一个引导页界面

Image组件引导imageModels图片数组的内容，运用[]进行索引，而计算机的索引是由0开端，因而0代表imageModels图片数组第一个元素，也就展现了第一张图片。

能够看到图片尺寸现已超出了屏幕可见范围，结合上一章内容所需，需求设置图片修饰符让Image内容展现在屏幕范围内，如下代码所示：

Image(imageModels[0])
 .resizable()
 .scaledToFit()

快速上手10分钟完成一个引导页界面

resizable修饰符可对Image图片目标进行缩放，scaledToFit修饰符在缩放的基础上对Image图片目标设置坚持其宽高比，防止图片拉升变形。

实战编程-引导文字

引导文字和引导图片具有一一对应关系，每一张引导图片对应一段引导文字，因而也能够运用数组的办法创立文字数字再引证，如下代码所示：

let textModels = ["勤测体温","勤加消毒","勤洗双手","出门戴口罩"]

引导文字和引导图片的布局办法为笔直布局，这儿能够运用到VStack布局容器，并可运用文字修饰符对文字进行美化，如下代码所示：

VStack(spacing: 20) {
Image(imageModels[0])
.resizable()
.scaledToFit()
Text(textModels[0])
.font(.title)
.bold()
}

快速上手10分钟完成一个引导页界面

实战编程-引导按钮

引导按钮本质上也是一张图片，与惯例图片类型不同，它是一种图片图片。咱们能够直接导入引导按钮的图片，当然为了坚持图标的统一性，Apple官方供给了官方图标库供开发者运用，无需导入图片，即可直接运用引证Apple官方的SF Symbols图标库图标。

快速上手10分钟完成一个引导页界面

SF Symbols图标库图标能够直接运用Image组件调用，与惯例图片目标引证不同，需求运用systemName指定为系统图标类型，如下代码所示：

Image(systemName: "arrow.forward.circle")
 .font(.largeTitle)

快速上手10分钟完成一个引导页界面

实战编程-轮博翻滚

单张引导页的款式咱们基本完成了，要使得引导页能够滑动切换，这儿需求运用到一个新的组件TabView，TabView组件是SwiftUI供给的切换视图组件，运用办法如下：

TabView {
  //代码块
}
.tabViewStyle(PageTabViewStyle())
.edgesIgnoringSafeArea(.all)

因为要完成翻滚，那么在TabView视图的基础上，还需求运用tabViewStyle修饰符进行修饰，需求运用PageTabViewStyle款式。而且视图需求铺满全屏，运用edgesIgnoringSafeArea修饰符去掉一切安全区域。

视图内容部分，之前都是运用数组的索引办法，这只能运用到1个数据，要想引证一切数据，需求运用到ForEach循环函数，代码如下：

TabView {
ForEach(imageModels.indices, id: \.self) { index in
VStack(spacing: 80) {
Image(imageModels[index])
.resizable()
.scaledToFit()
Text(textModels[index])
.font(.title)
.bold()
Image(systemName: "arrow.forward.circle")
.font(.largeTitle)
}
}
}
.tabViewStyle(PageTabViewStyle())
.edgesIgnoringSafeArea(.all)

快速上手10分钟完成一个引导页界面

ForEach循环的办法遍历imageModels数组中的数据，在ForEach循环办法中，indices取得数据的范围，imageModels.indices等同于0..imageModels.count。结合TabView组件，如此，便完成了引导页的遍历和翻滚作用。

最终，当引导页翻滚到最终一个页面时，引导按钮需求切换变成引导点击进入首页/登陆页的按钮，咱们能够运用if判别句子，若当时引导页为最终一张，则修正引导按钮为指定的按钮，能够运用last取得数组中最终一个元素，代码如下：

if imageModels[index] == imageModels.last {
Button(action: {}) {
Text("当即体验")
.font(.system(size: 17))
.bold()
.frame(minWidth: 0, maxWidth: 120)
.padding()
.foregroundColor(.white)
.background(.green)
.cornerRadius(8)
}
} else {
Image(systemName: "arrow.forward.circle")
.font(.largeTitle)
}

快速上手10分钟完成一个引导页界面

全体作用-预览

点击模拟器顶部的“运转”图标，尝试拖动页面，作用如下：

本章小结

在本章节中，咱们强化学习了Image组件和Text组件的运用，并学习运用systemName引证Apple官方图标库图标。另外还学习2个新的组件TabView切换视图容器和ForEach循环函数，其间ForEach循环函数中如何运用索引以及取得最终一个元素等办法也有所涉及。

总的来说，新增知识点较多，希望各位童鞋好好消化下，更好地进行下面的学习。

说一千遍不如手敲一遍，脑子懂了手也要学会，快来试试吧～

在下一章节中，咱们将学习更多SwiftUI项目知识，搭建一个又一个项目，请坚持等待吧～

版权声明

本文为稀土技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！