SwiftUI教程（九）SwiftUI实战之闲鱼首页

SwiftUI教程系列文章汇总

本文通过实现闲鱼首页，对之前所掌握的Swift视图和布局技术都进行一遍操练，以此加深印象。

效果演示：

[图片上传失败...(image-298b9f-1658462671077)]

实现功能

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 水平布局多个视图，每个视图都显示图片+文本

Grid

说明：

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

localityView

说明：

1. 分为三部分：1. 查找选项；2. 出租信息；3. 详细显示
2. 所涉及视图和布局前文都已说明，这里便不再赘述了

8、启动页

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

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

设置

启动效果：

启动效果