[英]SwiftUI ScrollView with content frame update closure
我想要一个ScrollView
,您可以在其中了解用户滚动时内容框架的变化(类似于didScroll
中的UIScrollView
委托)。
有了这个,您可以根据滚动行为执行布局更改。
通过使用View Preferences作为在 View Hierarchy 中通知上游布局信息的方法,我设法为这个问题提供了一个很好的解决方案。
有关查看首选项如何工作的非常详细的解释,我建议阅读kontiki关于该主题的这3 篇文章系列
对于我的解决方案,我实现了两个ViewModifiers
:一个是使用锚首选项对其布局进行视图报告更改,第二个是允许View
处理对其子树上视图框架的更新。
为此,我们首先定义一个Struct
来向上游携带可识别的帧信息:
/// Represents the `frame` of an identifiable view as an `Anchor`
struct ViewFrame: Equatable {
/// A given identifier for the View to faciliate processing
/// of frame updates
let viewId : String
/// An `Anchor` representation of the View
let frameAnchor: Anchor<CGRect>
// Conformace to Equatable is required for supporting
// view udpates via `PreferenceKey`
static func == (lhs: ViewFrame, rhs: ViewFrame) -> Bool {
// Since we can currently not compare `Anchor<CGRect>` values
// without a Geometry reader, we return here `false` so that on
// every change on bounds an update is issued.
return false
}
}
我们定义了一个符合PreferenceKey
协议的Struct
来保存视图树首选项的变化:
/// A `PreferenceKey` to provide View frame updates in a View tree
struct FramePreferenceKey: PreferenceKey {
typealias Value = [ViewFrame] // The list of view frame changes in a View tree.
static var defaultValue: [ViewFrame] = []
/// When traversing the view tree, Swift UI will use this function to collect all view frame changes.
static func reduce(value: inout [ViewFrame], nextValue: () -> [ViewFrame]) {
value.append(contentsOf: nextValue())
}
}
现在我们可以定义我提到的ViewModifiers
:
对其布局进行视图报告更改:
这只是向 View 添加了一个transformAnchorPreference
修饰符,它使用一个处理程序简单地构造一个具有当前帧Anchor
值的ViewFrame
实例并将其附加到FramePreferenceKey
的当前值:
/// Adds an Anchor preference to notify of frame changes
struct ProvideFrameChanges: ViewModifier {
var viewId : String
func body(content: Content) -> some View {
content
.transformAnchorPreference(key: FramePreferenceKey.self, value: .bounds) {
$0.append(ViewFrame(viewId: self.viewId, frameAnchor: $1))
}
}
}
extension View {
/// Adds an Anchor preference to notify of frame changes
/// - Parameter viewId: A `String` identifying the View
func provideFrameChanges(viewId : String) -> some View {
ModifiedContent(content: self, modifier: ProvideFrameChanges(viewId: viewId))
}
}
为视图提供更新处理程序以在其子树上更改帧:
这会在视图中添加一个onPreferenceChange
修饰符,其中帧锚点更改列表被转换为视图坐标空间上的帧( CGRect
),并报告为由视图 ID 键入的帧更新字典:
typealias ViewTreeFrameChanges = [String : CGRect]
/// Provides a block to handle internal View tree frame changes
/// for views using the `ProvideFrameChanges` in own coordinate space.
struct HandleViewTreeFrameChanges: ViewModifier {
/// The handler to process Frame changes on this views subtree.
/// `ViewTreeFrameChanges` is a dictionary where keys are string view ids
/// and values are the updated view frame (`CGRect`)
var handler : (ViewTreeFrameChanges)->Void
func body(content: Content) -> some View {
GeometryReader { contentGeometry in
content
.onPreferenceChange(FramePreferenceKey.self) {
self._updateViewTreeLayoutChanges($0, in: contentGeometry)
}
}
}
private func _updateViewTreeLayoutChanges(_ changes : [ViewFrame], in geometry : GeometryProxy) {
let pairs = changes.map({ ($0.viewId, geometry[$0.frameAnchor]) })
handler(Dictionary(uniqueKeysWithValues: pairs))
}
}
extension View {
/// Adds an Anchor preference to notify of frame changes
/// - Parameter viewId: A `String` identifying the View
func handleViewTreeFrameChanges(_ handler : @escaping (ViewTreeFrameChanges)->Void) -> some View {
ModifiedContent(content: self, modifier: HandleViewTreeFrameChanges(handler: handler))
}
}
让我们使用它:
我将通过一个例子来说明用法:
在这里,我将收到Header View frame 在ScrollView
内更改的通知。 由于这个Header View是在ScrollView
内容的顶部,所以上报的 frame origin 上的 frame 变化相当于ScrollView
的contentOffset
变化
enum TestEnum : String, CaseIterable, Identifiable {
case one, two, three, four, five, six, seven, eight, nine, ten
var id: String {
rawValue
}
}
struct TestView: View {
private let _listHeaderViewId = "testView_ListHeader"
var body: some View {
ScrollView {
// Header View
Text("This is some Header")
.provideFrameChanges(viewId: self._listHeaderViewId)
// List of test values
ForEach(TestEnum.allCases) {
Text($0.rawValue)
.padding(60)
}
}
.handleViewTreeFrameChanges {
self._updateViewTreeLayoutChanges($0)
}
}
private func _updateViewTreeLayoutChanges(_ changes : ViewTreeFrameChanges) {
print(changes)
}
}
这个问题有一个优雅的解决方案,Soroush Khanlou 已经发布了它的要点,所以我不会复制粘贴它。 你可以在这里找到它,是的......可惜它还不是框架的一部分!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.