WWDC22 SALE: Save 50% on all my Swift books and bundles! >>

ScrollView doesnt scroll whole content, only certain height

Forums > SwiftUI

I created ScrollView inside GeometryReader and NavigationView like this:

var body: some View {

    NavigationView {
        GeometryReader { geo in

                ScrollView {
                    ZStack(alignment: .top) {

                        VStack(spacing: 0) {

                            ZStack {
                                Rectangle()
                                    .fill(Color.background)
                                    .frame(width: geo.size.width, height: geo.size.height * 0.3)
                                    .background(Color.background)
                                    .environment(\.colorScheme, .dark)

                                renderImage(blur: 0)
                                    .frame(width: (geo.size.width * 0.25), height: (geo.size.width * 0.25))
                                    .offset(x: -(geo.size.width * 0.45), y: geo.size.height * 0.12)

                                renderImage(blur: 1)
                                    .frame(width: (geo.size.width * 0.2), height: (geo.size.width * 0.2))
                                    .offset(x: geo.size.width * 0.46, y: -(geo.size.height * 0.05))

                                renderImage(blur: 1.5)
                                    .frame(width: (geo.size.width * 0.15), height: (geo.size.width * 0.15))
                                    .offset(x: geo.size.width * 0.45, y: geo.size.height * 0.1)
                            }

                            Rectangle()
                                .fill(Color.background)
                                .frame(width: geo.size.width, height: geo.size.height)
                        }

                        VStack {
                            renderHeader()
                            renderNewElements()
                            renderForEachItems()
                                .padding()
                        }
                    }
                }
                .addAppThemeBackground()
                .navigationBarHidden(true)
          }
    }
}

Problem here is that I can scroll only specified height (I cant scroll to see all ForEachItems, screen can only scroll a little).

I tried to use fixedSize(), .frame(minHeight: geo.size.height), .frame(minHeight: geo.size.height, maxHeight: .infinity), .frame(height: geo.size.height), but neither one works. I also tried to add those modifiers to VStack which contains methods, but result is always the same.

I used those ZStacks to achieve design where 30% of screen is dark color, then Images are added, new Rectangle which Color cover some of Image size and at the end VStack which contains values.

renderHeader() and renderNewElements have .fixedSize() modifier.

I also noticed when I am scrolling (how much I can), elements of the renderForEachItems can be seen under the TabView.

   

Save 50% in my Black Friday sale.

SAVE 50% To celebrate WWDC22, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.