View going under Status Bar in SwiftUI

Question

How can I stop a view in SwiftUI going under the Status Bar when using a ScrollView? I already tried to place a view directly under the status bar, but it didn't have an effect.

I didn't use .edgesIgnoringSafeArea anywhere.

My Code:

ScrollView {
    HStack {
        Spacer()
        Text("ScrollMe")
            .padding()
    }
}

Screenshot:

Are you using `.edgesIgnoringSafeArea` somewhere? That'll cause this to happen. — jnpdx, Mar 24 '21 at 15:42

score 4 · Accepted Answer · answered Mar 24 '21 at 17:12

This is expected behavior for a ScrollView to scroll off the screen into the safe area insets.

If you really want to avoid this behavior, you need some other interim view with a non-zero height that will sit below the safe area. For example, modifying your code:

struct ContentView: View {
    var body: some View {
        VStack {
            Spacer().frame(height: 1)
            ScrollView {
                HStack {
                    Spacer()
                    Text("ScrollMe")
                        .padding()
                }
            }
        }
    }
}

score -2 · Answer 2 · answered Mar 24 '21 at 14:51

-2

You will have to add constraints to layout the view respectively for each device. You can do it like this image, then it will have the space(f.e. 240) to the view port you selected:

yourView.heightAnchor.constraint(equalToConstant: 240)

answered Mar 24 '21 at 14:51

Henri Stimm

1

Using constraints does not mean that you have to set them specifically for each device (see https://stackoverflow.com/questions/46317061/how-do-i-use-safe-area-layout-programmatically). Also, the OP specifically asked about SwiftUI, which does not use constraints like this. – jnpdx Mar 24 '21 at 15:44

View going under Status Bar in SwiftUI

2 Answers2