有找专业做淘宝网站的美工,皮具网站建设服装网站,wordpress 内页插件,wordpress误删概览
在 SwiftUI 的开发过程中我们常说#xff1a;“屏幕不够#xff0c;滚动来凑”。可见滚动视图对于超长内容的呈现有着多么秉轴持钧的重要作用。 这不#xff0c;从 SwiftUI 5.0#xff08;iOS 17#xff09;开始苹果又为滚动视图增加了全新的功能。但是官方的示例可…
概览
在 SwiftUI 的开发过程中我们常说“屏幕不够滚动来凑”。可见滚动视图对于超长内容的呈现有着多么秉轴持钧的重要作用。 这不从 SwiftUI 5.0iOS 17开始苹果又为滚动视图增加了全新的功能。但是官方的示例可能会让小伙伴们“雾里看花”、不求甚解。所以本篇博文存在的真谛就尽在于此了 在本篇博文中您将学到如下内容 概览1. 什么是滚动目标行为Scroll Target Behavior2. scrollTargetLayout 视图修改器到底是干嘛用的3. 定制我们自己的 ScrollTargetBehavior 滚动目标行为总结 相信学完本课后小伙伴们一定会对 SwiftUI 5.0 中新的 scrollTargetLayout 以及 scrollTargetBehavior 修改器的含义和使用“醍醐灌顶”、如梦初醒
那还等什么呢让我们马上进入滚动的世界吧
Let’s rolling 本文对应的视频课在此欢迎小伙伴们恣意观赏 SwiftUI 5.0 滚动视图的滚动目标行为解惑和实战 1. 什么是滚动目标行为Scroll Target Behavior
从 SwiftUI 5.0 开始苹果为滚动视图特地新增了 scrollTargetBehavior 修改器方法 使用它我们可以根据滚动轴来设置滚动视图的滚动目标行为Scroll Target Behavior。那么什么是滚动目标行为呢简单来说它表示滚动视图中的滚动目标Scroll Targets在滚动停止时以何种方式对齐。
import SwiftUIenum ScrollAlignType: Identifiable, CaseIterable {case none, paging, viewvar align: AnyScrollTargetBehavior {switch self {case .none:.init(.viewAligned(limitBehavior: .never))case .paging:.init(.paging)case .view:.init(.viewAligned)}}var title: String {switch self {case .none:无case .paging:按页面case .view:按视图}}var id: Int {title.hashValue}
}struct ContentView: View {State private var scrollAlignType ScrollAlignType.nonevar body: some View {ScrollView(.vertical) {ForEach(1...100, id: \.self) { i inText(Item \(i)).font(.largeTitle.weight(.heavy)).foregroundStyle(.white).frame(width: 300, height: 200).background {Capsule().foregroundStyle(.blue.gradient)}}}.scrollTargetBehavior(scrollAlignType.align).padding(.vertical, 20.0).ignoresSafeArea().safeAreaInset(edge: .top) {Picker(滚动目标行为, selection: $scrollAlignType) {ForEach(ScrollAlignType.allCases) { alignType inText(alignType.title).tag(alignType)}}.pickerStyle(.segmented).padding()}}
}#Preview {ContentView()
}在上面的代码中我们尝试用三种不同方式来对齐滚动视图中的滚动目标它们分别是
无滚到哪是哪按页面对齐按视图对齐
运行可以发现前两种滚动对齐效果和我们的想象不谋而合不过最后一种以视图为基准的对齐却貌似没起到什么作用这是怎么回事呢 2. scrollTargetLayout 视图修改器到底是干嘛用的
原来要想以滚动视图内部独立子元素为基准应用滚动目标行为我们必须明确设置滚动目标Scroll Targets这是通过调用 scrollTargetLayout 视图修改器来实现的 我们也可以理解为 scrollTargetLayout 方法将最外层的布局配置成了滚动目标布局。所以上面的代码我们需要做如下修正
ScrollView(.vertical) {ForEach(1...100, id: \.self) { i inText(Item \(i)).font(.largeTitle.weight(.heavy)).foregroundStyle(.white).frame(width: 300, height: 200).background {Capsule().foregroundStyle(.blue.gradient)}}// 明确设置滚动目标.scrollTargetLayout()
}
.scrollTargetBehavior(scrollAlignType.align)
.padding(.vertical, 20.0)重新运行可以看到以视图为基准的滚动对齐已然生效了 另外如果滚动视图中动态生成的内容需要放在额外惰性容器比如 LazyVStack 或 LazyHStack中我们需要在这些容器外层应用 scrollTargetLayout() 修改器方法:
ScrollView(.vertical) {LazyVStack {ForEach(1...100, id: \.self) { i inText(Item \(i)).font(.largeTitle.weight(.heavy)).foregroundStyle(.white).frame(width: 300, height: 200).background {Capsule().foregroundStyle(.blue.gradient)}}}.scrollTargetLayout()
}
.scrollTargetBehavior(scrollAlignType.align)
.padding(.vertical, 20.0)有些小伙伴们可能会问为什么要做这种看似“多此一举”的事呢
考虑下面这个例子我们不希望滚动目标行为应用在滚动的头和尾视图上所以只要在中间滚动内容上启用 scrollTargetLayout 就“水到渠成”啦
struct AnotherExampleScrollView: View {var body: some View {ScrollView {CustomHeaderView()LazyVStack {// 实际的滚动内容}.scrollTargetLayout()CustomFooterView()}.scrollTargetBehavior(.viewAligned)}
}到目前为止iOS 18 beta3所有滚动目标行为相关的修改器方法都只能直接用在滚动视图ScrollView上而不能用在 List 或 Form 这种内部“间接”使用滚动视图的容器上。
3. 定制我们自己的 ScrollTargetBehavior 滚动目标行为
除了使用 SwiftUI 系统默认的滚动目标行为Scroll Target Behavior以外我们还可以按照实际需求创建特定的滚动对齐行为这是通过遵循 ScrollTargetBehavior 协议来实现的 遵循该协议只需完成一个 updateTarget 方法在该方法传入的实参中我们可以根据当前滚动目标上下文TargetContext来恣意修改滚动目标ScrollTarget的位置等信息
struct CustomScrollTargetBehavior: ScrollTargetBehavior {func updateTarget(_ target: inout ScrollTarget, context: TargetContext) {if context.velocity.dy 0 {target.rect.origin.y context.originalTarget.rect.maxY} else if context.velocity.dy 0 {target.rect.origin.y context.originalTarget.rect.minY}}
}extension ScrollTargetBehavior where Self CustomScrollTargetBehavior {static var custom: CustomScrollTargetBehavior { .init() }
}如上代码所示我们创建了一个定制的 CustomScrollTargetBehavior 滚动目标行为在其中
当滚动内容向上滚动时context.velocity.dy 为正值当滚动内容向下滚动时context.velocity.dy 为负值滚动速度越快context.velocity.dy 绝对值越大
从 updateTarget 的代码逻辑不难看到我们自定义创建的这种新滚动模式它在滚动时的阻尼感特别强。
现在可以非常方便轻松的在滚动视图中应用我们自己的滚动目标行为啦
ScrollView(.vertical) {LazyVStack {ForEach(1...100, id: \.self) { i inText(Item \(i)).font(.largeTitle.weight(.heavy)).foregroundStyle(.white).frame(width: 300, height: 200).background {Capsule().foregroundStyle(.blue.gradient)}}}.scrollTargetLayout()
}
.scrollTargetBehavior(.custom)
.padding(.vertical, 20.0)最后运行一下代码看看新的滚动效果吧 利用 SwiftUI 5.0iOS 17.0中新的滚动目标行为机制我们可以逍遥物外的自由定制滚动视图的滚动对齐模式啦棒棒哒
总结
在本篇博文中我们讨论了什么是 SwiftUI 5.0iOS 17.0中新增的滚动目标行为Target Behavior并且介绍了如何游刃有余应用它们我们在最后还创建了定制的滚动目标行为让自由度更加“出谷迁乔”。
感谢观赏再会啦
