Reputation: 1399
I having problems with getting my scroll view to scroll all the way to the bottom. What's odd is that when it's populated with one set of data, it doesn't have this issue, however, in the other data set it gets to the last item and I can't scroll to the see the bottom half of the HStack.
Here's the code for the view
import SwiftUI
struct FestivalDescription: View {
@Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var passportTitle: String
var passportImageVert: String
var venues: [Venue]
var body: some View {
ZStack {
ScrollView(.vertical, showsIndicators: false) {
GeometryReader { geometry in
ZStack{
if geometry.frame(in: .global).minY <= 0 {
Image(self.passportImageVert)
.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.passportImageVert)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: geometry.size.width, height: geometry.size.height + geometry.frame(in: .global).minY)
}
VStack {
Image("script_passport")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width * 0.75)
Text(self.passportTitle)
.fontWeight(.bold)
.foregroundColor(Color.white)
.padding(.top, 10)
// Insert Navigation Link
NavigationLink(destination: FestivalDetails(passportTitle: self.passportTitle, venues: self.venues, venueProd: [])) {
HStack {
Text("View all Food & Drinks")
.font(.subheadline)
.padding()
}.frame(width: 210, height: 50)
.background(Color.white)
.cornerRadius(4)
.padding(.top, 8)
}
// End Button
}
}
}.frame(height: UIScreen.main.bounds.height * 0.63)
.clipped()// Ends GeometryReader
VStack {
HStack {
Text("Festival Booths")
.font(.title)
.fontWeight(.bold)
Spacer()
}.padding(.top, 24)
.padding(.bottom, 16)
ForEach(self.venues) { venue in
NavigationLink(destination: VenueDetails(title: venue.title, venueImage: venue.venueImage, venueDesc: venue.venueDesc, venueArea: venue.venueArea, venueLat: venue.venueLat, venueLong: venue.venueLong, venueProd: venue.venueItems)) {
HStack {
VStack {
Image(venue.venueImage)
.renderingMode(.original)
.resizable()
.frame(minWidth: 0, maxWidth: 366, minHeight: 0, maxHeight: 300)
.scaledToFill()
HStack {
Text(venue.title)
.font(.body)
.fontWeight(.semibold)
.foregroundColor(Color("Charcoal"))
Spacer()
}
HStack(alignment: .top) {
Text(venue.venueDesc)
.font(.footnote)
.foregroundColor(Color("bodyText"))
.multilineTextAlignment(.leading)
.lineLimit(2)
.frame(height: 40)
Spacer()
}
Spacer()
}
}
}.padding(.bottom, 16)
}
// End VStack of Venues
// Spacer()
}.padding(.horizontal, 24)
.background(Color("bodyBackground"))
// Ends Bottom Layer VStack
}
.edgesIgnoringSafeArea(.top) // Ends ScrollView
.background(Color("bodyBackground"))
ZStack {
GeometryReader { geometry in
ZStack {
VStack {
Text("")
.frame(width: geometry.size.width, height: 120)
.background(Color("navBackground"))
.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(Color("Charcoal"))
.padding(.leading, 16)
HStack {
Text("Passports · Passport Details")
.font(.system(size: 15))
.fontWeight(.bold)
.foregroundColor(Color("Charcoal"))
.padding()
Spacer()
}
}.frame(width: gr.size.width * 0.92, height: 48)
.background(Color("navBackground"))
.cornerRadius(8)
.shadow(color: Color("Shadow"), radius: 10, x: 2, y: 7)
}.padding(.leading, 16)
Spacer()
}
}
.padding(.top, 50)
.edgesIgnoringSafeArea(.top)
} // Ends Floating Menu ZStack
} // Ends Main ZStack
}
}
Upvotes: 2
Views: 7041
Reputation: 886
For my codebase, if you put GeometryReader outside ScrollView then my ScrollView will scroll to the bottom.
GeometryReader {
ScrollView {
//...stuff
}
}
Upvotes: 3
Reputation: 1399
Turns out my issue was with the aspect ratio modifier on my image. I set it to fit instead of fill and that fixed the issue.
Upvotes: 0