我的应用程序中的 zIndex 与图像集合有问题 我已向图像添加了捏缩放功能,但是当缩放图像时,它不会位于集合中下一个图像的顶部。
使用VStack时一切都很好。仅在使用 LazyVStack 时出现问题
这是内容视图的源代码。
struct ContentView: View {
@StateObject var vm: PostsViewModel
init(_ viewModel: PostsViewModel? = nil) {
let vm = viewModel != nil ? viewModel : PostsViewModel()
_vm = StateObject(wrappedValue: vm!)
}
var body: some View {
if vm.isLoading {
ProgressView()
} else {
ScrollView (.vertical, showsIndicators: false) {
LazyVStack (spacing: 34) {
ForEach(vm.collectionResponse.data, id: \.id, content: {
post in
PostView(imageUrl: post.attachments.first!.url)
})
}
.padding([.horizontal], 12)
}
}
}
}
帖子查看源代码:
struct PostView: View {
@State var imageUrl: String
@State var offset: CGPoint = .zero
@State var scale: CGFloat = 0
@State var scalePosition: CGPoint = .zero
init(imageUrl: String) {
self.imageUrl = imageUrl
}
var body: some View {
KFImage(URL(string: imageUrl))
.cacheMemoryOnly()
.resizable()
.scaledToFill()
.frame(maxWidth: getRect().width, maxHeight: 500)
.cornerRadius(12.0)
.offset(x: offset.x, y: offset.y)
.overlay(
ZoomGesture(
scale: $scale,
offset: $offset,
scalePosition: $scalePosition)
)
.scaleEffect(
1 + (scale < 0 ? 0 : scale),
anchor: .init(x: scalePosition.x, y: scalePosition.y))
.zIndex(scale > 0 ? 1000 : 0)
}
}
谢谢你
它对我有用,有两个小变化:
zIndex
设置为 2:.zIndex(scale > 0 ? 1000 : 2)
zIndex
上的 LazyVStack
设置为 1:LazyVStack (spacing: 34) {
// ...
}
.padding([.horizontal], 12)
.zIndex(1)