I have built a custom cardView
for a shopping cart carousel. For this I designed it in CardView
and then pass it to Carousel.
The problem I am facing is my card not moving to left side more. I tried different paddings and VStack alignment set to .leading
also but its not move more to left side. I want to remove extra space from left side so I can adjust card accordingly.
CardView:
struct CardView: View {
private let name: String
private let description: String
private let type: String
private let buttonTitle: String
init(name: String, description: String, type: String, buttonTitle: String) {
self.name = name
self.description = description
self.type = type
self.buttonTitle = buttonTitle
// MARK: - Constants
private struct ViewConstants {
static let screenWidth = Constants.DeviceConfig.screenWidth
static let cardRatio = 300.0/337.0
static let cardWidth = 300.0
static let cardHeight = 369.0
static let imageHeight: CGFloat = cardWidth/2 + 20
}
var body: some View {
VStack(spacing: 8) {
Image("laptop")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(height: ViewConstants.imageHeight)
.padding(.top, 10)
Text("Personal Laptop")
.lineLimit(1)
.multilineTextAlignment(.center)
.padding(.bottom, 2)
Text("The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog")
.lineLimit(3)
.multilineTextAlignment(.center)
.padding(.horizontal, 24)
Button(action: {
print("sign up bin tapped")
onTap()
}){
Text("Click for Offer")
.frame(height: 10)
.font(.system(size: 18))
.padding()
.foregroundColor(.black)
.overlay(
RoundedRectangle(cornerRadius: 25)
.stroke(Color.black, lineWidth: 2)
)
}
.padding(.top, 4)
.padding(.bottom, 24)
}
.frame(width: ViewConstants.screenWidth - 100, height: ViewConstants.cardHeight)
.background(Color.yellow)
.cornerRadius(12)
}
}
Main Page I called CardView with Carousel:
private var carouselContent: some View {
VStack(alignment: .leading) {
CarouselView(
itemsPadding: 12,
trailingSpaces: 20 * 5,
index: $viewModel.Index,
list: viewModel.cartProducts,
showIndicator: true,
contentView: { cart in
CardView(name: cart.name, description: cart.description, type: cart.type, buttonTitle: cart.buttonTitle) {}
}
)
}
}