how to disable ScrollView clipping content in SwiftUI

user_8020754 0
Viewed 1676

I need that red rectangle should be visible until reach to the leading or trailing edge of the device. So the problem is scrollview cliping red boxes (hiding) as move beyond the scrollview container size. code:

struct test: View {
var body: some View {
    ScrollView(.horizontal,showsIndicators:false) {
        LazyHStack{
            ForEach(0...4,id:\.self){i in
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 60, height: 50, alignment: .center)
            }
        }.padding(.horizontal, 4)
    }.background(Color.yellow)
    .frame(width: 68, height: 60, alignment: .trailing)
}

}

Results: enter image description here

Expected:(I also produce this result by setting ScrollView full width and adding padding (.padding(.horizontal, UIScreen.main.bounds.width/2 )) to LazyHStack) But it is a hack by adding space at start and end, and problem remain unresolved, that is clipping of ScrollView content

enter image description here

swiftui swift ios
3 Answers

I'm not exactly sure what the problem is, but you probably want the padding to be on the Text and not the ScrollView. Correct me if this isn't what you are looking for.

struct test: View {
    var body: some View {
        ScrollView(.horizontal) {
            Text("Hello, World!")
                .frame(width: UIScreen.main.bounds.width, alignment: .leading)
                .padding(.horizontal, 40)
        }
        .background(Color.yellow)
    }
}

Result:

"Hello, World!" in scroll view, offset 40pts right. Scrollview takes up entire screen width.

user_143518180

It seems to be working for me when I remove the line: .frame(width: UIScreen.main.bounds.width, alignment: .leading).
On an iPhone XR, I'm seeing a horizontal ScrollView with a yellow background starting at 40 offset from leading and ending at 40 offset from trailing. Is this what you're trying to achieve?
Also, I'm pretty sure UIScreen.main.bounds.width is going to return the width of the device, which will be a problem if you want your text to take up 80 pixels less than that value (since your ScrollView has 40 padding either side).

user_154498260

if I understand correct from your answers, this is the result you want:

    struct test: View {
    var body: some View {
         GeometryReader { geo in
             VStack {
                 Spacer()
                 HStack {
                     ScrollView(.horizontal,showsIndicators:false) {
                        LazyHStack{
                            ForEach(0...4,id:\.self){i in
                                Rectangle()
                                    .fill(Color.red)
                                    .frame(width: 60, height: 50, alignment: .center)
                            }
                        }
                        .padding(.horizontal,40)
                    }
                    .background(Color.yellow)
                    .frame(width: geo.size.width, height: 60, alignment: .center)
                 }
                 Spacer()
             }
        }
    }
}

Result: screenshot

user_35263800
Related