Jason Tremain
Jason Tremain

Reputation: 1399

SwiftUI - ScrollView not scrolling all the way to the bottom

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.

enter image description here

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

Answers (2)

candyline
candyline

Reputation: 886

For my codebase, if you put GeometryReader outside ScrollView then my ScrollView will scroll to the bottom.

GeometryReader { 
    ScrollView {
        //...stuff
    }
}

Upvotes: 3

Jason Tremain
Jason Tremain

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

Related Questions