skip to Main Content

enter image description here

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


  1. Add .clipped() just after your .background(Color.green), such as:

    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)
            .clipped()  // <--- here
        }
        .aspectRatio(2/3, contentMode: .fit)
    }
    
    Login or Signup to reply.
  2. use .clipped() in your private func cardView for each shape…

    @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)
                .clipped()                                 <--- add here
        case .diamond:
            Diamond()
                .fill(mode: fillingMethod, color: color)
        }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search