In SwiftUI the scrollview inner UI View's shadow will be cut off by the size of scrollview?

Question

After updating the Xcode11 beta3, I found the scrollview inner view's shadow will be cut off at the bound, but it ok in the Xcode11 beta2. I just use the bottom padding for fixing it, but I don't think it's a good solution. Is there any other solutions to fix the problem?

ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 30) {
                    ForEach(courses) { item in
                        PresentationLink(destination: ContentView()) {
                            CourseView(
                                title: item.title,
                                image: item.image,
                                color: item.color,
                                shadowColor: item.shadowColor
                            )
                        }
                    }
                }
                .padding(.leading, 40)
                .padding(.bottom, 60)

the CourseView() has a shadow modifier, the definition's body just like:

var body: some View {
        return VStack(alignment: .leading) {
            Text(title)
                .font(.title)
                .fontWeight(.bold)
                .color(.white)
                .padding(30)
                .lineLimit(4)
                .padding(.trailing, 50)
            Spacer()
            Image(image)
                .resizable()
                .renderingMode(.original)
                .aspectRatio(contentMode: .fit)
                .frame(width: 246, height: 150)
                .padding(.bottom, 30)
            }
            .background(color)
            .cornerRadius(30)
            .frame(width: 246, height: 360)
            .shadow(color: shadowColor, radius: 20, x:0, y: 20)
    }

I hope the CourseView()'s shadow could display OK, not be cut off by the bound of ScrollView.

Answer 1

Try to use Spacer() after and before your horizontal stack. This way your horizontal stack (HStack) will take full height of your scroll view. Hope it helps

Answer 2

I have a workaround for you issue. The solution is use the offset in the next view and overlap it on top of the ScrollView. In your case it would look like something like this:

ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 30) {
                    ForEach(courses) { item in
                        PresentationLink(destination: ContentView()) {
                            CourseView(
                                title: item.title,
                                image: item.image,
                                color: item.color,
                                shadowColor: item.shadowColor
                            )
                        }
                    }
                }
                .padding(.leading, 40)
                .padding(.bottom, 60)
}
SomeView().offset(x:0, y: -60) // 60 is your bottom padding so we offset by negative 60 to counter it.