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!

   

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.