如何解决Swiftui:带有多个图像的粘性、弹性标题?
在详细信息视图中,我想创建一个带有可水平滚动的多个图像的粘性、有弹性的标题。
我有粘性、有弹性的标题。我还有多个图像可以使用 TabView (PageTabViewStyle()) 水平查看。但是,当结合这两个功能时,我遇到了一个问题:每当整个标题被拉伸时,TabView 都会重置为数组中的第一个图像。我希望它留在屏幕上的图像上。
任何想法将不胜感激!
标签视图:
struct DetailGalleryView: View {
let item: Item
let gallery: [ItemImage] = Bundle.main.decode("gallery.json")
var body: some View {
let detailPhotos = gallery.filter{$0.type == item.id}
ZStack {
TabView{
ForEach(detailPhotos) { photo in
ZStack(alignment: .bottomTrailing){
Image(photo.id)
.resizable()
.scaledToFill()
.frame(width: UIScreen.main.bounds.width)
.clipped()
Text("Photo: \(photo.licence)")
.padding(4)
.background(Color.black)
.font(.caption)
.foregroundColor(.white)
.offset(x: -5,y: -5)
.opacity(0.5)
}
}
}
.edgesIgnoringSafeArea(.all)
.tabViewStyle(PageTabViewStyle())
}
}
}
粘性标题:
struct StickyHeader<Content: View>: View {
var minHeight: CGFloat
var content: Content
init(minHeight: CGFloat = 200,@ViewBuilder content: () -> Content) {
self.minHeight = minHeight
self.content = content()
}
var body: some View {
GeometryReader { geo in
if(geo.frame(in: .global).minY <= 0) {
content
.frame(width: geo.size.width,height: geo.size.height,alignment: .center)
} else {
content
.offset(y: -geo.frame(in: .global).minY)
.frame(width: geo.size.width,height: geo.size.height + geo.frame(in: .global).minY)
}
}.frame(minHeight: minHeight)
}
}
在详细视图正文中使用它:
// ...
StickyHeader {
DetailGalleryView(item: item)
}
.frame(minHeight: UIScreen.main.bounds.height/2.1)
// ...
解决方法
尝试保留 TabView
中的选择,例如
struct DetailGalleryView: View {
let item: Item
let gallery: [ItemImage] = Bundle.main.decode("gallery.json")
@State private var selection: ... // give it type of photo.id with some default value
var body: some View {
let detailPhotos = gallery.filter{$0.type == item.id}
ZStack {
TabView(selection: $selection){
ForEach(detailPhotos) { photo in
ZStack(alignment: .bottomTrailing){
Image(photo.id)
.resizable()
.scaledToFill()
.frame(width: UIScreen.main.bounds.width)
.clipped()
Text("Photo: \(photo.licence)")
.padding(4)
.background(Color.black)
.font(.caption)
.foregroundColor(.white)
.offset(x: -5,y: -5)
.opacity(0.5)
}.tag(photo.id)
}
}
.edgesIgnoringSafeArea(.all)
.tabViewStyle(PageTabViewStyle())
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。