如何解决在 ScrollView 前面放置一个矩形会影响滚动
我需要在 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 的性质)..
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。