SwiftUI - List scrolling underneath status bar text

Question

I Create List and add VStack inside and added some views inside VStack. When I run the project, I observer scrolling of List going beyond the safe area. FYI if I remove Frame property still same result.Simulator gif

struct ContentView : View {
var body: some View {

    List(0..<5) { item in
        HStack(alignment: VerticalAlignment.top, spacing: 5) {
            Image(systemName: "photo")
            VStack(alignment: HorizontalAlignment.leading, spacing: 10) {
                Text("USA")
                    .font(.headline)

                Text("This is an extremely long string that will never fit even the widest of Phones Excerpt From: Paul Hudson. “SwiftUI by Example”. Apple Books. ")
                    .lineLimit(nil)
                    .font(.subheadline)
            }
        }
    }
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
    .background(Color.red)
        .onAppear() {
            print("on Appear")

    }.onDisappear() {
        print("on Disappear")
    }
}
}

Answer 1

Inspired by Shauket Sheikh. You can directly add the .padding(.top) to the List and it's done. No need for a VStack.

struct ContentView : View {
    var body: some View {
            List(0..<5) { item in
                HStack(alignment: VerticalAlignment.top, spacing: 5) {
                    Image(systemName: "photo")
                    VStack(alignment: HorizontalAlignment.leading, spacing: 10) {
                        Text("USA")
                            .font(.headline)
                        Text("This is an extremely long string that will never fit even the widest of Phones Excerpt From: Paul Hudson. “SwiftUI by Example”. Apple Books. ")
                            .lineLimit(nil)
                            .font(.subheadline)
                    }
                }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                .background(Color.red)
                .onAppear() {
                    print("on Appear")
            }.onDisappear() {
                print("on Disappear")
            }
        .padding(.top)
    }
}

Answer 2

I had the same problem with my ScrollView

My solution was simpler than the rest, so give this a shot:

Just add .clipped() modifier to your List or ScrollView and this should prevent your content from scrolling out of its bounds.

And you can then combine this with edgesIgnoringSafeArea(.bottom) if you want your content to still scroll off screen from the bottom. But watch out - edgesIgnoringSafeArea(.bottom) has to come after .clipped() if you want this effect.