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

Question on ScrollView and SafeArea (Day 39)

Forums > 100 Days of SwiftUI

In the lesson for Day 39, the following program is shown:

ScrollView {
    VStack(spacing: 10) {
        ForEach(0..<100) {
            Text("Item \($0)")
                .font(.title)
        }
    }
}

It is then said:

If you run that back in the simulator you’ll see that you can drag the scroll view around freely, and if you scroll to the bottom you’ll also see that ScrollView treats the safe area just like List and Form – their content goes under the home indicator, but they add some extra padding so the final views are fully visible.

In my simulator I do not see this. The items go under the home indicator and are partially covered by it. Same with the top safe area. My understanding is that they should be cut off above the home indicator. Is my understanding wrong or does my simulator work differently? I use XCode 13.4, simulator set to iPhone 11 with iOS 15.5.

Can anyone shed some light on this? Is there a setting I missed? Thanks!

Picture:

https://www.dropbox.com/s/892gmb37lc1l8xy/simulator.jpg?dl=1

   

Jero wonders how safe is the safe area!

..... snip ....... their content goes under the home indicator, but they add some extra padding so the final views are fully visible

In my simulator I do not see this. The items go under the home indicator and are partially covered by it. Same with the top safe area.

Jero further wonders:

Can anyone shed some light on this? Is there a setting I missed?

Yes! Indeed, you did miss something, but it's not a setting!

What @twoStraws said:

if you scroll to the bottom you’ll also see that ScrollView treats the safe area
just like List and Form – their content goes under the home indicator,
but they add some extra padding so the final views are fully visible.

Your screen shot does NOT show the bottom element. It shows Item 63. Item 63 is not the last element in the scroll view, so yes, it's under the safe area and partially clipped. This should indicate to your user to continue scrolling to see all of Item 63.

But when you get to Item 99, you'll see that there's extra padding after it. It is NOT in the safe area, therefore also NOT hidden by the home indicator.

   

I missed that indeed! I had understood that the area for the scroll view as a whole was padded so as to respect the safe area. But it is the content of the scroll view that is padded inside it. Thanks for clarifying!

   

Hacking with Swift is sponsored by Fernando Olivares

SPONSORED Fernando's book will guide you in fixing bugs in three real, open-source, downloadable apps from the App Store. Learn applied programming fundamentals by refactoring real code from published apps. Hacking with Swift readers get a $10 discount!

Read the book

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.