问题描述
我需要在 ScrollView 前面放置一个半透明矩形,但是当我将所有内容(矩形和 ScrollView)放入 ZStack 时,滚动和触摸事件在该矩形内停止工作。
Atm 我正在使用 .background 修饰符,因为它不会影响滚动,但我仍在寻找方法使其正确地将矩形放置在我的 ScrollView 上方(前面)。
有什么办法可以将 View 放在 ScrollView 上,这样它就不会影响它的功能吗?
这是我现在使用的代码(我更改了颜色并移除了不透明度以使对象可见,因为我的原始矩形是半透明的并且包含几乎不可见的渐变)
struct ContentView: View {
var body: some View {
ZStack {
ScrollView {
Lazyvstack(spacing: 0) {
ForEach(0...100,id:\.self) { val in
ZStack {
Text("test")
.font(.system(size: 128))
} // ZStack
.background(Color.blue)
} // ForEach
}
}
.background(RadialGradient(gradient: Gradient(stops: [
.init(color: Color.blue,location: 0),.init(color: Color.red,location: 1)]),center: .top,starTradius: 1,endRadius: 200)
.mask(
vstack(spacing: 0) {
Rectangle()
.frame(width: 347,height: 139)
.padding(.top,0)
Spacer()
}
))
}
}
}
解决方法
这是一种可能的开始方法 - 使用 UIVisualEffectView。 Blur
视图取自 How do I pass a View into a struct while getting its height also? 主题。
struct ScrollContentView: View {
var body: some View {
ZStack {
ScrollView {
LazyVStack(spacing: 0) {
ForEach(0...100,id:\.self) { val in
ZStack {
Text("test")
.font(.system(size: 128))
} // ZStack
.background(Color.blue)
} // ForEach
}
}
Blur(style: .systemThinMaterialLight)
.mask(
VStack(spacing: 0) {
Rectangle()
.frame(width: 347,height: 139)
.padding(.top,0)
Spacer()
}
)
.allowsHitTesting(false)
}
}
}
,
我决定在这里发布一个解决方案。它基于 Asperi 建议的方法。
2Asperi:谢谢,一如既往地感谢您的帮助。
我尝试将 .opacity 和蒙版应用于 Blur,但没有奏效。
所以我在 makeUIView 中的 .layer 属性上应用了 mask 并且效果很好
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
ZStack {
ScrollView {
LazyVStack(spacing: 0) {
ForEach(0...100,id:\.self) { val in
ZStack {
Text("test")
.font(.system(size: 128))
} // ZStack
.background(Color.white)
} // ForEach
}
}
Blur(style: .systemThinMaterial)
.mask(
VStack(spacing: 0) {
Rectangle()
.frame(width: 347,height: 139)
.padding(.top,0)
Spacer()
}
)
.allowsHitTesting(false)
}
}
}
}
struct Blur: UIViewRepresentable {
var style: UIBlurEffect.Style = .systemMaterial
func makeUIView(context: Context) -> UIVisualEffectView {
let blurEffectView = UIVisualEffectView(effect: UIBlurEffect(style: style))
let gradientMaskLayer = CAGradientLayer()
gradientMaskLayer.type = .radial
gradientMaskLayer.frame = CGRect(x: 0,y: 0,width: 347,height: 256)
gradientMaskLayer.colors = [UIColor.black.cgColor,UIColor.clear.cgColor]
gradientMaskLayer.startPoint = CGPoint(x: 0.5,y: 0)
gradientMaskLayer.endPoint = CGPoint(x: 1,y: 1)
gradientMaskLayer.locations = [0,0.6]
blurEffectView.layer.mask = gradientMaskLayer
return blurEffectView
}
func updateUIView(_ uiView: UIVisualEffectView,context: Context) {
uiView.effect = UIBlurEffect(style: style)
}
}
我唯一不明白的是为什么 startPoint 和 endPoint 仅在我将它们设置为 [0.5,0] & [1,1] 而不是 [0.5,0] & [0.5,1] 时才起作用 - 我期望它应该确定径向梯度的方向,在我的情况下它应该从 .topCenter 到 .topBottom(它确实如此,但我不了解 endPoint 的性质)..