The background color set at the top of my third card and the bottom of my ninth card in the preview screen exceeds the border of the card(I am listening the CS193P)
here is my code
import SwiftUI
struct CardView: View {
let cardShape: CardViewShape
let color: Color
let elementsNum: Int
let fillingMethod: FillingMethod
var body: some View {
GeometryReader { geometry in
VStack(alignment: .center, spacing: 5) {
Spacer()
ForEach(1..<elementsNum+1, id:.self) {index in
cardView(for: cardShape, in: geometry)
}
Spacer()
}
.frame(width: geometry.size.width)
.border(Color.orange, width: 5)
.background(Color.green)
}
.aspectRatio(2/3, contentMode: .fit)
}
@ViewBuilder
private func cardView(for cardShape: CardViewShape, in geometry: GeometryProxy) -> some View {
switch (cardShape) {
case .circle:
let width = min(geometry.size.width, geometry.size.height/CGFloat(elementsNum)) - 10
Circle()
.fill(mode: fillingMethod, color: color)
.frame(maxWidth: width)
case .rectangle:
let width = geometry.size.width * 0.65
let height = geometry.size.height / 5
Rectangle()
.fill(mode: fillingMethod, color: color)
.frame(width: width, height: height)
case .diamond:
Diamond()
.fill(mode: fillingMethod, color: color)
}
}
}
2
Answers
Add
.clipped()
just after your.background(Color.green)
, such as:use
.clipped()
in yourprivate func cardView
for each shape…