SwiftUI教程系列文章汇总

本文经过完成闲鱼主页，对之前所把握的Swift视图和布局技能都进行一遍操练，以此加深形象。

效果演示：

完成功能

1. 发动页
2. 页面切换
3. 主界面显现

分析

1. 全体上共分红五个页面：“闲鱼”、“会玩”、“发布”、“音讯”、”我的“。
2. ”闲鱼“页面分红三部分：标题栏、查找栏、主内容界面
3. ”闲鱼“界面能够有”重视“、”引荐“、”本地“三种界面。

1、 界面全体布局

阐明：

1. 全体上分为五个视图
2. 这儿仅对”闲鱼“视图进行了具体规划，其他四个视图只起到占位效果
3. VStack{}就阐明内容为空
4. 经过tabItem的设置给每一项设置了显现
5. 发布视图只设置了图标
6. 经过selectedTab判别选中的是哪一项，来决议是否高亮
7. 由于触及到了分页，所以运用TabView来设置，

2、 闲鱼界面布局

阐明：

1. 全体布局为笔直布局，所以运用VStack。
2. 标题为水平布局，运用HStack
3. 查找为水平布局，运用HStack
4. 内容能够分为重视、引荐、本地，所以运用TabView来设置，设置每一项。视图分别为attentionView、recommendView、localityView。
5. 这儿还需求注意tabViewStyle的设置，PageTabViewStyle表明分页，indexDisplayMode设置不显现小白点

3、 标题

阐明：

1. 创建图片有可能会失败，所以是可选项
2. Spacer能够看做是一个空视图
3. 经过ForEach显现多个Tab切换按钮，动态增加每一项
4. 运用默许动画，点击后拿到当前按钮的tabSwitch
5. 对按钮样式进行设置，选中的tabSwitch假如便是当前的i,那么就高亮显现。不然灰显

4、 查找框

阐明：

1. 能够分为两部分：查找框、分类图标
2. 将查找框全体作为一个图标来显现
3. 查找框又包括了扫描按钮、竖线、输入框、查找文本
4. 竖线经过文本视图Text来设置，文本为空，仅设置布景色
5. 经过Text设置占位文字。为了演示这儿运用了Text，实际上应该运用TextField
6. 检查查找文本视图的设置：
   1. foregroundColor:文本颜色
   2. opacity：透明度
   3. background：布景颜色。
   4. cornerRadius：边框圆角
   5. padding：内边距
7. 经过overlay给查找框掩盖一个边框。cornerRadius设置圆角

5、 attentionView

分为两部分：常拜访的人、检查宝物

5.1 常拜访的人

阐明：

1. 常拜访的人运用HStack进行水平布局
2. 人员信息视图需求水平滚动，所以运用ScrollView，并且设置为.horizonta
3. 每个视图都进行笔直布局，分别为图标和文本。
4. lineLimit设置最大行数为1，假如超出视图大小，则显现为…

5.2 检查宝物

阐明：

1. 视图需求滚动显现，所以运用ScrollView
2. 运用ForEach动态增加多个视图
3. 每个宝物视图包括三部分：1.用户信息；2. 宝物描绘；3. 宝物图片
4. 字典获取的是可选项
5. 运用overlay掩盖描绘信息

6、 recommendView

6.1 品牌选择

阐明：

1. 水平设置闲鱼优品的图片，运用HStack
2. 仍然经过HStack + ForEach 水平布局多个视图，每个视图都显现图片+文本

阐明：

1. 经过Grid设置表格
2. 在columns中设置每列，能够对每列进行设置，这儿都设置为.flexible()
3. 仍然经过ForEach设置每个表格内的信息

6.2 类型选择

阐明：

1. 很明显需求水平布局，而且能够滚动
2. 这儿的weirdAlignment是自定义对齐方式。是水平对齐
3. 假如在不同的场景下会有多种不同样式的显现，能够运用Group进行包装
4. 没有选中，设置为按钮，并且运用默许动画来更改

6.3 宝物选择

阐明：

1. 运用ScrollView能够让视图全体上下滚动
2. 每个元素运用表格来显现，设置为两列
3. 每个元素都分为四部分：1. 宝物图片；2. 宝物描绘；3. 价钱和想要；4. 用户信息
4. 经过设置offset进行相对布局

7、 localityView

阐明：

1. 分为三部分：1. 查找选项；2. 租借信息；3. 具体显现
2. 所触及视图和布局前文都已阐明，这儿便不再赘述了

8、发动页

在Assets中创建发动图片和发动颜色，分别为launch和launchColor

进入到Target -> Info，进行如下设置

发动效果：