一个 SwiftUI 库,为 SwiftUI 添加了强大的滚动功能

ScrollKit 徽标

版本 斯威夫特 5.7 麻省理工学院执照 推特: @danielsaidi

关于ScrollKit

ScrollKit 是一个 SwiftUI 库,它为 SwiftUI 添加了强大的滚动功能,例如偏移跟踪和粘性滚动标题视图。

ScrollKit 有一个在滚动时为您提供滚动视图偏移量,一个在导航栏下方滚动时将标题视图固定到顶部,还有一个在向下拉滚动视图时自动伸展。ScrollViewWithOffsetScrollViewWithStickyHeaderScrollViewHeader

结果可能如下所示,也可能完全不同:

滚动视图设计为易于使用,基本上只是向标准 SwiftUI 添加更多属性。它们可以在所有Apple平台上使用,包括iOS,macOS,tvOS和watchOS。ScrollView

安装

ScrollKit 可以使用 Swift Package Manager 安装:

https://github.com/danielsaidi/ScrollKit.git

或使用可可豆荚:

pod DSScrollKit

Supported Platforms

ScrollKit supports , , and .iOS 14macOS 11tvOS 14watchOS 7

Getting started

The online documentation has a getting started guide to help you get started with ScrollKit.

To track the scroll offset, you can use a instead of a regular :ScrollViewWithOffsetScrollView

struct MyView: View {

    @State
    private var offset = CGPoint.zero
    
    func handleOffset(_ scrollOffset: CGPoint) {
        self.offset = scrollOffset
    }

    var body: some View {
        ScrollViewWithOffset(onScroll: handleOffset) {
            // Add your scroll view content here as regular
        }
    }
}

You can then use this offset in any way you like, to for instance fade in a navigation bar title.

To create a scroll view with a sticky header, just create a and provide it with a header view and header height:ScrollViewWithStickyHeader

struct MyView: View {

    @State
    private var offset = CGPoint.zero
    
    @State
    private var visibleRatio = CGFloat.zero
    
    func handleOffset(_ scrollOffset: CGPoint, visibleHeaderRatio: CGFloat) {
        self.offset = scrollOffset
        self.visible = visibleHeaderRatio
    }
    
    func header() -> some View {
        ZStack(alignment: .bottomLeading) {
            Color.blue
            Color.yellow.opacity(visibleRatio)  // Fades in
        }
    }

    var body: some View {
        ScrollViewWithStickyHeader(
            header: header,
            headerHeight: 250,
            onScroll: handleOffset
        ) {
            // Add your scroll view content here as regular
        }
    }
}

The header visible ratio is based on the header height and scroll view offset and lets you adjust your content as the header is scrolled under the navigation bar.

Documentation

The online documentation contains more information, code examples, etc., and makes it easy to overview the various parts of the library.

Demo Application

This project contains a demo app that lets you explore ScrollKit on iOS and macOS. To run it, just open and run .Demo/Demo.xcodeproj

Support

You can sponsor this project on GitHub Sponsors or get in touch for paid support.

Contact

Feel free to reach out if you have questions or if you want to contribute in any way:

License

ScrollKit is available under the MIT license. See the LICENSE file for more info.

GitHub

点击跳转