ScrollView 剪切的阴影

Question

有没有办法可以将阴影应用于图像以同时显示在父视图之外？您可以在下面看到一个示例，其中我列出了 aScrollView和中的一些图像HStack。图像/艺术品应用了阴影，但这会被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())
                                            }
                                        }
                                    }

Answer 1

要使阴影不被剪切，请向 HStack 添加填充

ScrollView(.horizontal, showsIndicators: false) {
   HStack {
      ForEach(stationsFeed.items.sorted(by: { $0.updatedAt > $1.updatedAt }).prefix(15)) { item in
       // ... other code
   }.padding()        // << here !!
}

Answer 2

我已经找到了解决这个问题的一个不错的方法。

这是之前的图片

这是之后的图像

我向 ScrollView 和 ScrollView 的内容添加了 2 个填充，填充量相同，但其中一个具有负值，如下所示：

struct ScrollViewClippingProblem: View {
var body: some View {
    VStack {
        Text("Lorem Ipsum")
            .font(.title)
        
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(alignment: .top) {
                ForEach(0..<10, content: { item in
                    Text("\(item)")
                        .font(.title)
                        .padding()
                        .background(Circle().fill(.red))
                        .shadow(color: .blue, radius: 10, x: 15, y: 10)
                })
            }
            .padding(.vertical, 40) // <- add padding here to make the space for the shadow
        }
        .padding(.vertical, -40) // <- add NEGATIVE padding here of the same value to shrink the space you created with the padding above
        
        Text("Lorem Ipsum")
            .font(.title)
    }
    .background(.ultraThinMaterial)
}}

我希望这对某人有帮助！:)