How to disable SwiftUI ScrollView clipping

user_6317114 0
Viewed 1916

See the following sample code:

ScrollView(.horizontal, showsIndicators: false) {
    HStack(spacing: 20) {
        ForEach(0 ..< 12) { index in
            Rectangle()
                .foregroundColor(.white)
                .frame(width: 100, height: 100, alignment: .center)
                .shadow(radius: 20)
        }
    }
}

This sample code will result in a horizontal ScrollView with Rectangle as elements.

However, as it seems the ScrollView actually clips it's content so any shadow on the top and bottom will be clipped.

Is there any way to disable automatic clipping by the scrollview or another way to achieve this?

swiftui ios
1 Answers

Shadow won't affect the frame of the Rectangle. So, try to add padding to the Rectangle, so the Shadow will be still visible, by increasing the frame size of the Rectangle including shadow..

ForEach(0 ..< 12) { index in
    Rectangle()
        .foregroundColor(.white)
        .frame(width: 100, height: 100, alignment: .center)
        .shadow(radius: 20)
        .padding(20) //<< Padding here for the radius
}
user_118780690
Related