CODEWITHSUNDEEP
iosswiftui
Muhammad Shauket
Muhammad Shauket

Reputation: 2778

SwiftUI - List scrolling underneath status bar text

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")
    }
}
}

Upvotes: 16

Views: 6740

Answers (3)

Alan Scarpa
Alan Scarpa

Reputation: 3560

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.

Upvotes: 19

kontiki
kontiki

Reputation: 40549

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

enter image description here

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)
    }
}

Upvotes: 15

Ketan Odedra
Ketan Odedra

Reputation: 1283

You can also use VStack and set .padding() of it.

Code : 

 struct ContentView : View {
    var body: some View { 
       VStack {
            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()
     }
  }

Upvotes: 0

Related Questions