Scaled Images Don't accessible in Grid view with right way - swift

Question

Main View Code , My Subview CodeMy CardView is in ZStack and, when stretching the background image, didn't select in the right way a GridView in Main View here is my codes of main and subview
ScrollView {
NavigationLink("", destination: CardCategoryView(cardCategoryVm: .init(card: cardsVm.selectedCard)), isActive: $cardsVm.isShowingCardCategory)
LazyVGrid(columns: gridColoumns,spacing: 8) {
ForEach(cardsVm.cards?.vendor ?? [] ,id: \.self) { symbol in
StoreCardView(image: symbol.image ?? "")
.frame(width: UIScreen.main.bounds.width / 2 - 20,height: UIScreen.main.bounds.width / 2 - 20)
.padding(.top)
.onTapGesture {
let _ = print(symbol.name)
cardsVm.selectedCard = symbol
cardsVm.isShowingCardCategory = true
}
}
}
}
struct StoreCardView: View {
var image:String
var body: some View {
GeometryReader { reader in
ZStack{
KFImage(URL(string:image))
.resizable()
.scaleEffect(x: 3, y: 3, anchor: .center)
.aspectRatio(contentMode: .fit)
.frame(width: reader.size.width , height: reader.size.height , alignment: .center)
.clipped()
.blur(radius: 25, opaque: true)
.opacity(0.7)
.cornerRadius(8)
KFImage(URL(string:image))
.resizable()
.aspectRatio( contentMode: .fill)
.frame(width: reader.size.width/2, height: reader.size.height/2, alignment: .center)
.clipShape(Circle())
.shadow(color: .movColor.opacity(0.4),radius: 5,
x: 0,
y: 0
)
//
} .fixedSize(horizontal: true, vertical: true)
.frame(width: reader.size.width, height: reader.size.height, alignment: .center)
.clipped()
}
}
}
I made it in Ztack and gave it a fixed frame with Scale Effect and it didn't work also, how can I make the background image stretching and didn't effect on gridview at main view