0

我正在学习 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()
            }
        )
    }
}

我正在尝试做的(不确定这是否是最好的方法),存储用户滚动的单位数量(以像素为单位?),并将其传递给ArtworkImageView,我可以在其中使用它在.blur()修改器的计算中。

我希望这是有道理的。任何帮助表示赞赏。

4

0 回答 0