scrollview - SwiftUI - 根据滚动视图的位置更改视图的不透明度
问题描述
这更像是一个“可能”的问题。
我目前有一个浮动自定义导航栏,它位于其自己的父容器中,具有白色背景和 0% 的不透明度。在 scrollView 滚动超过滚动视图中的英雄图像后,我想将该父容器的不透明度从 0% 更改为 50%。
var body: some View {
ZStack {
ScrollView(.vertical, showsIndicators: false) {
GeometryReader { geometry in
ZStack{
if geometry.frame(in: .global).minY <= 0 {
Image(self.venueImage)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: geometry.size.width, height: geometry.size.height)
.offset(y: geometry.frame(in: .global).minY/9)
.clipped()
} else {
Image(self.venueImage)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: geometry.size.width, height: geometry.size.height + geometry.frame(in: .global).minY)
.clipped()
.offset(y: -geometry.frame(in: .global).minY)
}
}
}.frame(height: 300)
VStack {
HStack {
Text(self.title)
.font(.title)
.fontWeight(.bold)
Spacer()
}.padding(.horizontal, 24)
HStack {
Text(self.venueArea)
.foregroundColor(Color("bodyText"))
Spacer()
}.padding(.horizontal, 24)
VStack {
ForEach(self.venueProd) { gc in
VStack {
HStack {
Text(gc.title)
.font(.system(size: 17))
.fontWeight(.semibold)
Spacer()
}
HStack {
Text(gc.productDescription)
.foregroundColor(Color("bodyText"))
.font(.system(size: 15))
.padding(.top, 5)
Spacer()
}
HStack {
Text("$\(gc.productPrice, specifier: "%.2f")")
Spacer()
}.padding(.top, 8)
Divider()
}.padding(.bottom, 8)
}
Spacer()
}.padding(.horizontal, 24)
.padding(.top, 24)
.padding(.bottom, 60)
Spacer()
}
}.edgesIgnoringSafeArea(.top)
// AREA I'M TRYING TO MODIFY OPACITY ON SCROLL
ZStack {
GeometryReader { geometry in
ZStack {
VStack {
Text("")
.frame(width: geometry.size.width, height: 120)
.background(Color.white)
.opacity(0.3 )
Spacer()
}
}.edgesIgnoringSafeArea(.top) // Ends ZStack
} // Ends Geometry Reader
VStack {
GeometryReader { gr in
HStack {
Button(action: {self.presentationMode.wrappedValue.dismiss()}) {
Image(systemName: "chevron.left")
.foregroundColor(.black)
.padding(.leading, 16)
HStack {
Text("Venues · Venue Details")
.font(.system(size: 15))
.fontWeight(.bold)
.foregroundColor(Color.black)
.padding()
Spacer()
}
}.frame(width: gr.size.width * 0.92, height: 48)
.background(Color.white)
.cornerRadius(8)
}.padding(.leading, 16)
Spacer()
}
}
.padding(.top, 50)
.edgesIgnoringSafeArea(.top)
} // Ends Floating Menu ZStack
} // Second ZStack
}
}
解决方案
这是一个想法的演示。
代码只是显示了方法,由于简单,它可以很容易地集成/转移。所有背景颜色只是为了更好的可见性,计算可能更复杂并包含动画,但想法保持不变 - 可以使用GeometryProxy
并取决于其他视图的不透明度更改来读取全局坐标中的图像矩形通过相应@State
的 .
struct TestScrollDependentOpacity: View {
@State private var barOpacity: Double = 0
var body: some View {
ZStack(alignment: .top) {
mainContent
floatingBar
}
}
private var mainContent: some View {
ScrollView {
GeometryReader { g -> AnyView in
let rect = g.frame(in: .global)
DispatchQueue.main.async {
self.barOpacity = rect.maxY < 0 ? 0.5 : 0.0
}
return AnyView(Image(systemName: "sun.max")
.resizable()
.aspectRatio(contentMode: .fit)
.position(x: g.size.width / 2.0, y: g.size.height / 2.0))
}
.frame(height: 100).background(Color.yellow)
VStack(alignment: .leading) {
ForEach (0..<40) { i in
HStack {
Text("Text \(i)").padding()
Spacer()
}
}
}.background(Color.green)
}
}
private var floatingBar: some View {
HStack {
Button("Left") { }
Spacer()
Button("Right") { }
}
.padding()
.background(Color.white.opacity(barOpacity))
.edgesIgnoringSafeArea(.top)
}
}
struct TestScrollDependentOpacity_Previews: PreviewProvider {
static var previews: some View {
TestScrollDependentOpacity()
}
}
推荐阅读
- r - 使用 R [文本分析] [n-gram] 组合相似的字符串
- python - 如何读取文本文件中的特定单词?
- r - 在 R 中将 .CSV 文件添加为 Excel 表格
- amazon-web-services - 用于检查资源标签的 Clarity Terraform 测试
- r - 使用 rjags 包的 R 中 Weibull AFT 贝叶斯生存模型中的时变协变量
- ansible - 如何过滤删除json_query中的方括号?
- typescript - 在Angular中动态禁用FormControl的反应形式
- javascript - axios获取一个参数,多个值用逗号隔开
- xamarin.android - ViewPagerIndicator 点未显示在顶部?它显示在视图下方。如何修复
- discord - 如何制作一个在响应中显示随机百分比的命令?不和谐蟒蛇