我正在学习 SwiftUI 并试图实现在滚动内容时背景图像变得模糊的效果。
我目前在 Mac 上使用 Playgrounds(这就是 ArtworkImage 公开的原因),其中包含代码的两个文件。
我尝试按照此处的解释进行操作,但运气不佳-使用 GeometryReader 的 ScrollView 效果
主要(电影视图)
import SwiftUI
import PlaygroundSupport
struct MovieView: View {
var body: some View {
ArtworkImage()
.overlay(
ScrollView { <- the amount scrolled will determine the blur effect
VStack(alignment: .leading, spacing: 40) {
Spacer()
.frame(height: 280)
MovieInfo()
CastRow()
MovieRow()
Spacer()
}
}
)
}
}
PlaygroundPage.current.setLiveView(MovieView())
ArtworkImage.swift(在 MovieView Sources 中)
import SwiftUI
public struct ArtworkImage: View {
public init(){}
public var body: some View {
let poster: Image = Image(uiImage: #imageLiteral(resourceName: "wandavision.jpg"))
GeometryReader { geo in
poster
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: geo.size.width)
.blur(radius: 80, opaque: true)
.ignoresSafeArea()
}
.overlay(
VStack {
GeometryReader { geo in
poster
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: geo.size.width, height: 456, alignment: .top)
.mask(
Rectangle()
.fill(LinearGradient(gradient: Gradient(colors: [Color.clear, Color.black]), startPoint: .bottom, endPoint: .top))
)
.blur(radius: [based on the amount the user has scrolled the ScrollView in the MovieView view])
}
Spacer()
}
)
}
}
我正在尝试做的(不确定这是否是最好的方法),存储用户滚动的单位数量(以像素为单位?),并将其传递给ArtworkImage
View,我可以在其中使用它在.blur()
修改器的计算中。
我希望这是有道理的。任何帮助表示赞赏。