FancyScrollView

我花了很多时间寻找一种方法，在 SwiftUI 内部重现 Stock Apple Apps（即 App Store 和 Apple Music）中 ScrollView 的 UI。

这就是结果！我称之为 FancyScrollView。它是一个 ScrollView，带有一些额外的功能。

滚动时的精美模糊效果

使用 FancyScrollView 代替普通的 ScrollView，它将在安全区域添加漂亮的模糊效果。让您的视图在滚动时看起来更简洁！

FancyScrollView {
	VStack {
		...
	}
}

效果展示

包含 Header

我真的很惊讶，我找不到一个合适的 Package 来为 ScrollView 添加漂亮的视差 Header。所以我把它包含在这里了！你可以自定义它的所有方面。

向上滚动行为

您可以指定以下两种行为之一

public enum ScrollUpHeaderBehavior {
    case parallax // Will zoom out all pretty ;)
    case sticky // Will stay at the top
}

向下滚动行为

public enum ScrollDownHeaderBehavior {
    case offset // Will move the header with the content
    case sticky // Will stay at the top and the content will cover the header
}

让我们看看它们的实际效果！

这是滚动行为之间的每种组合

视差 + 偏移 (默认)

这是默认设置，似乎是市场上最中性和标准的 ScrollView Header 版本。很有可能，您会想要这个！

FancyScrollView(title: "The Weeknd",
                headerHeight: 350,
                scrollUpHeaderBehavior: .parallax,
                scrollDownHeaderBehavior: .offset,
                header: { Image(...).resizable().aspectRatio(contentMode: .fill) }) {
	...
}

效果展示

视差 + 粘性

此组合旨在模仿 Apple Music 中艺术家详情视图的 Header。

FancyScrollView(title: "The Weeknd",
                headerHeight: 350,
                scrollUpHeaderBehavior: .parallax,
                scrollDownHeaderBehavior: .sticky,
                header: { Image(...).resizable().aspectRatio(contentMode: .fill) }) {
	...
}

效果展示

粘性 + 偏移

此组合旨在模仿 App Store 中“Today”展示的 Header。

FancyScrollView(title: "The Weeknd",
                headerHeight: 350,
                scrollUpHeaderBehavior: .sticky,
                scrollDownHeaderBehavior: .offset,
                header: { Image(...).resizable().aspectRatio(contentMode: .fill) }) {
	...
}

效果展示

粘性 + 粘性

我不确定谁会需要这种行为，但它看起来很酷。所以，你喜欢就好！

FancyScrollView(title: "The Weeknd",
                headerHeight: 350,
                scrollUpHeaderBehavior: .sticky,
                scrollDownHeaderBehavior: .sticky,
                header: { Image(...).resizable().aspectRatio(contentMode: .fill) }) {
	...
}

效果展示

已知问题