Is there a way I can get shadows applied to an image to also show outside of the parent view? Below you can see a sample, where I list out some images in a ScrollView
and HStack
. The image/artwork has a shadow applied to it, but this gets clipped by the ScrollView
.
ScrollView(.horizontal, showsIndicators: false) {
HStack {
ForEach(stationsFeed.items.sorted(by: { $0.updatedAt > $1.updatedAt }).prefix(15)) { item in
NavigationLink(destination: StationDetailView(station: item)) {
VStack(alignment: .leading) {
if item.artwork != nil {
KFImage(self.artworkURLForStation(item)!)
.resizable()
.frame(width: 130, height: 130)
.scaledToFit()
.cornerRadius(6)
.shadow(radius: 5)
} else {
RoundedRectangle(cornerRadius: 6)
.background(Color.purple)
.shadow(radius: 5)
}
Text(item.name)
.font(.callout)
.foregroundColor(.primary)
Text(item.categories.first?.name ?? "N/A")
.font(.callout)
.foregroundColor(.secondary)
}
.frame(minWidth: 0, maxWidth: 130, alignment: .leading)
}
.buttonStyle(PlainButtonStyle())
}
}
}
To make shadow uncut, add padding to HStack
ScrollView(.horizontal, showsIndicators: false) {
HStack {
ForEach(stationsFeed.items.sorted(by: { $0.updatedAt > $1.updatedAt }).prefix(15)) { item in
// ... other code
}.padding() // << here !!
}