解析SwiftUI布局细节（二）循环轮播+复杂布局
zxRisingSun 人气:0
前言
上一篇我们总结的主要是VStack里面的东西，由他延伸到 @ViewBuilder, 接着我们上一篇总结的我们这篇内容主要说的是下面的几点，在这些东西说完后我准备解析一下苹果在SiwftUI文档中说道的比较好玩的一个东西，具体的我们后面在看。这篇我们还是说我们关于SwiftUI的东西，再提一下Demo代码我已经提交上Git了，目前Demo进度为一级页面基本上结束，地图点击大头针的添加也刚处理完，代码有需要的小伙伴可以去Git看看，项目地址
1、View之间的跳转（这里有个疑问需要帮忙！）
2、稍微复杂点View的布局思路和一些细节知识
3、SwiftUI循环轮播图
这次总结的首页的UI布局如下，我们下面一点点的解析：
界面跳转的问题
正常的界面跳转逻辑实现是比较简单的，我们先看看这个很简单的正常跳转，再说说我们的问题：
NavigationView{
VStack{
List{
/// 开关按钮
/// Toggle(isOn: $userData.showFavoritesOnly) {Text("Favorites only")}
ForEach(landmarkData) { landmark in
if !self.userData.showFavoritesOnly || landmark.isFavorite {
NavigationLink(destination:LandmarkDetail(landmark:landmark)
.environmentObject(self.userData),label:{
LandmarkRow(landmark: landmark)
})
}
}
}
.listStyle(PlainListStyle())
.navigationTitle("iPhone")
}
}
这是一个很普通的通过 NavigationView + NavigationLink 的界面跳转，在苹果给的 SwiftUI 的使用例子中就是这样写的，当然我们在正常的使用中这样写也没啥问题，那我们界面跳转的问题是什么呢？
如果你看了我们 Demo中的代码，你就知道我们是采用 TabView 嵌套 NavigationView 的形式，在这样的模式下似乎是存在问题的， 在 TabView+NavigationView 中你利用 NavigationLink 单击没法跳转，只有长按的时候才能跳转，这个问题抛出来，有懂得小伙伴希望能给我说一下，这个问题我也一直没有解决！具体的我们Demo中可以看看“我的”页面那个 List 的代码，问题就在那里。要理解这点的麻烦也给我说说，感谢！
首页布局
我们把首页这个布局给解析一下，大概分了下面几部分，我们再具体的说说：
我们看看最底层的代码先：
NavigationView{
ScrollView(showsIndicators:false,content: {
/// Banner视图
HomeBannerView()
.environmentObject(homeViewModel)
/// 服务列表
HomeServiceCircleView().frame(
width: homeViewModel.homeServiceCircleWidth,
height: homeViewModel.homeServiceCircleHeight)
.environmentObject(homeViewModel)
.offset(y: -5)
/// 滚动头条
HomeCircleNewsView().frame(
width: homeViewModel.homeNewsCircleWidth,
height: homeViewModel.homeNewsCircleHeight)
.environmentObject(homeViewModel)
/// 四个按钮
HomeButtonView().frame(
width: homeViewModel.homeButtonViewWidth,
height: homeViewModel.homeButtonViewHeight)
.offset(y: -5)
/// 服务列
HomeServiceListView().frame(
width: homeViewModel.homeServiceViewWidth,
height: homeViewModel.homeServiceViewHeight)
.environmentObject(homeViewModel)
/// 最美的风景
HomeSnapshotView().environmentObject(homeViewModel)
}).navigationTitle(title)
}
这部分的代码没有啥特别需要说明的，都比较简单，可能是就是这个 environmentObject （我把它称为环境变量）这个是需要特别说明的一个变量，从名字上可以看出，这个修饰符是针对全局环境的。通过它我们可以避免在初始 View 时创建 ObservableObject, 而是从环境中获取 ObservableObject，像 @EnvironmentObject，@ObservedObject，@Binding 和 @States 这几个关键字还是需要需要我们特别理解的。下面这篇我们博客园的同行总结的还是很精辟的。传送门在这
下面是我们值得细说的一些点：
1、值得注意的 TabView + PageTabViewStyle
这是在iOS14中新出的一个值得我们注意的点，PageTabViewStyle 是14.0的新东西，但它的确能达到一个满意的翻页效果。和我们UIKit中的效果一样。具体的代码如下：
TabView(selection: $selection) {
/// 里面的具体内容，我们写了三页
ForEach(0..<3){
HomeServicePageView(pageIndex: $0)
.tag($0)
.environmentObject(homeViewModel)
}
}
/// PageTabViewStyle 14.0的新东西
.tabViewStyle(PageTabViewStyle())
.animation(.spring())
2、GeometryReader 它其实是有必要好好了解一下的。GeometryReader 的主要作用就是能够获取到父View建议的尺寸，这就是它的主要作用，要没有它我们面临的可能就是无休止的传值了，SwiftUI 既然是声明式的UI,按我的理解你就没有办法去获取某一个视图的父视图之类的。不然怎么体现声明这个点呢！
这个GeometryReader在前面第一期的时候我说过这个属性。
/// A proxy for access to the size and coordinate space (for anchor resolution)
/// of the container view.
@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
public struct GeometryProxy {
/// The size of the container view.
public var size: CGSize { get }
/// Resolves the value of `anchor` to the container view.
public subscript<T>(anchor: Anchor<T>) -> T { get }
/// The safe area inset of the container view.
public var safeAreaInsets: EdgeInsets { get }
/// Returns the container view's bounds rectangle, converted to a defined
/// coordinate space.
public func frame(in coordinateSpace: CoordinateSpace) -> CGRect
}
* size 比较直观，就是返回父View建议的尺寸
** subscript 可以让我们获取.leading,.top等等类似这样的数据
*** safeAreaInsets 可以获取安全区域的Insets
**** frame(in:) 要求传入一个CoordinateSpace类型的参数，也就是坐标空间，可以是.local, .global 或者 .named()，其中 .named()可以自定义坐标空间。
有一个还得说明一下，GeometryReader 改变了它显示内容的方式。在 iOS 13.5 中，内容放置方式为 .center。在 iOS 14.0 中则为：.topLeading。
3、再提一点关于上面说的滚动视图，在UIKit中我们可以用UICollectionView搞定一切，但是在SwiftUI中没有这个控件，我建议采用的方式是 ScrollView + HStack + VStack 的方式去实现，很多同行有说目前来看SwiftUI的List在数据量大的情况下性能不是特别好，采用ScrollView是个不错的方式，而且也很容易构建出来，并不是说每一个Item的位置都需要你去计算，所以没啥可以担心的。
除了这个List，还要一个From我们也可以了解下，他们俩肉眼可见的区别 在选中这个点上的区别。
循环轮播实现
总结一下循环轮播怎么实现，采用的方案就是 HStack + Gesture + Timer 的方式，这三者就能实现一个自动循环滚动或者手动滚动的轮播。然后缩放的方式还是比较简单的，我们采用改变下Image的frame的方式。
HStack 这没啥可以具体说的，可以看代码，注释比较多，就不在这里累赘了。
Gesture 这个我们可以说说，它就是我们具体手势的父类，像我们的单击手势和我们这里用到的拖拽手势一样。具体的我们会看下面的代码，他们的区别就是像拖拽我们可以监控它的改变状态，点击或者双击、长按等我们可以添加事件等等。下面是拖拽的代码：
/// 定义拖拽手势
private var dragGesture: some Gesture{
DragGesture()
/// 拖动改变
.onChanged {
isAnimation = true
dragOffset = $0.translation.width
}
/// 结束
.onEnded {
dragOffset = .zero
/// 拖动右滑，偏移量增加，显示 index 减少
if $0.translation.width > 50{
currentIndex -= 1
}
/// 拖动左滑，偏移量减少，显示 index 增加
if $0.translation.width < -50{
currentIndex += 1
}
/// 防止越界
currentIndex = max(min(currentIndex, homeViewModel.homeBannerCount() - 1), 0)
}
}
再看看Timer,SwiftUI区别于我们UIKit的创建方式，SwiftUI对它进行了简化，具体的创建如下：
/// SwiftUI对定时器的简化，可以进去看看具体参数的定义 private let timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
它不像我们UIKit的需要我们绑定事件，那它的事件是怎么处理的呢？看看下面的代码：
/// 对定时器的监听
.onReceive(timer, perform: { _ in
currentIndex += 1
}
它的事件就是通过 onReceive 监听处理的，所有通过 publish 创建的都是可以通过 onReceive 监听的。那还有啥事通过 publish 创建的呢？我所用到的就是 NotificationCenter。
这样基本上循环轮播的实现我们基本上都说清楚了，具体里面的一些实现细节代码注释写的清清楚楚，还是仔细看看代码结合里面的注释来看，难度不是很大。首页顶部自动循环轮播的代码实现如下，代码里有些注释还是比较重要的，注意看注释：
struct HomeBannerView: View {
@EnvironmentObject var homeViewModel: HomeViewModel
/// SwiftUI 对定时器的简化，可以进去看看具体参数的定义
private let timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
/// 拖拽的偏移量
@State var dragOffset: CGFloat = .zero
/// 当前显示的位置索引,
/// 这是实际数据中的1就是数据没有被处理之前的0位置的图片
/// 所以这里默认从1开始
@State var currentIndex: Int = 1
/// 是否需要动画
@State var isAnimation: Bool = true
let spacing: CGFloat = 10
var body: some View {
/// 单个子视图偏移量 = 单个视图宽度 + 视图的间距
let currentOffset = CGFloat(currentIndex) * (homeViewModel.homeBannerWidth + spacing)
/// GeometryReader 改变了它显示内容的方式。在 iOS 13.5 中，内容放置方式为 .center。在 iOS 14.0 中则为：.topLeading
GeometryReader(content: { geometry in
HStack(spacing: spacing){
ForEach(0..<homeViewModel.homeBannerCount()){
/*
如果想自定义Image大小，可以添加frame
clipped()相当于UIKit里的clipsToBounds,
与aspectRatio(contentMode: .fill)搭配使用。
注意：frame 要放在resizable后面，否则报错,
如果需求裁剪，需要放在aspectRatio后面，
clipped()前面，否则frame失效 */
Image(homeViewModel.bannerImage($0)).resizable()
/// 自己尝试一下.fill和.fit
.aspectRatio(contentMode: .fill)
.frame(width: geometry.size.width,
height: $0 == currentIndex ? geometry.size.height:geometry.size.height*0.8 )
.clipped() /// 裁减
.cornerRadius(10)
}
}.frame(width:geometry.size.width,
height:geometry.size.height,alignment:.leading)
.offset(x: dragOffset - currentOffset)
.gesture(dragGesture)
/// 绑定是否需要动画
.animation(isAnimation ?.spring():.none)
/// 监听当前索引的变化,最开始初始化为0是不监听的，
.onChange(of: currentIndex, perform: { value in
isAnimation = true
/// 第一张的时候
if value == 0 {
isAnimation.toggle()
currentIndex = homeViewModel.homeBannerCount() - 2
/// 最后一张的时候currentIndex设置为1关闭动画
}else if value == homeViewModel.homeBannerCount() - 1 {
isAnimation.toggle()
currentIndex = 1
}
})
/// 对定时器的监听
.onReceive(timer, perform: { _ in
currentIndex += 1
})
}).frame(width: homeViewModel.homeBannerWidth,
height: homeViewModel.homeBannerHeight)
}
}
// MARK: -
extension HomeBannerView{
/// 定义拖拽手势
private var dragGesture: some Gesture{
DragGesture()
/// 拖动改变
.onChanged {
isAnimation = true
dragOffset = $0.translation.width
}
/// 结束
.onEnded {
dragOffset = .zero
/// 拖动右滑，偏移量增加，显示 index 减少
if $0.translation.width > 50{
currentIndex -= 1
}
/// 拖动左滑，偏移量减少，显示 index 增加
if $0.translation.width < -50{
currentIndex += 1
}
/// 防止越界
currentIndex = max(min(currentIndex, homeViewModel.homeBannerCount() - 1), 0)
}
}
}
参考文章：
项目地址
SwiftUI之GeometryReader
理解SwiftUI关键字 State Binding ObservesOgiect EnvironmentObje
SwiftUI 自定义实现旋转木马轮播效果
加载全部内容