ios – Create reusable compositional swift UI view that scales

I’m making a buying and selling card sport the place my pals and I could make playing cards by inputting our stats and share them. I’m operating into bother with the cardboard UI although as a result of I need to have the ability to show playing cards in numerous areas the place the size is totally different however the facet ratio is identical (nearly as if the cardboard view was a picture). What’s one of the simplest ways to attain this if I’m attempting to have a flexible reusable view?

That is what I’ve received thus far.

The subviews by no means appear to line up or scale correctly. I’m new to swift ui and nonetheless do not know finest practices so any enter can be appreciated.

struct CardView: View {
    
    var physique: some View {
        GeometryReader { geometry in
            let width = geometry.measurement.width
            let top = geometry.measurement.top
            let headerHeight = top / 12
            let cardPadding = width * 0.03
            
            VStack(spacing: top * 0.02) {
                CardHeaderView()
                    .body(maxHeight: headerHeight)
                
                CardImageView()
                    

                CardContentView()
                
                
                Spacer()
            }
            .padding(.all, cardPadding)
            .background(
                Picture("texture")
                    .resizable()
                    .scaledToFill()
                    .clipped()
            )
            .border(Shade.crimson, width: width * 0.01)
            .clipped()
        }
        .aspectRatio(2.5 / 3.5, contentMode: .match)
    }
        
}

// one subview for instance

struct hpView: View {
    
    @State personal var isMovingAround = false
    
    var physique: some View {
        GeometryReader { geometry in
            let width = geometry.measurement.width
            let top = geometry.measurement.top
            let hpWidth = width * 1
            let hpHeight = top * 1
            
        ZStack {
            RoundedRectangle(cornerRadius: top / 2)
                .body(width: hpWidth, top: hpHeight)
                .foregroundStyle(.indigo.gradient)
            RoundedRectangle(cornerRadius: top / 2)
                .strokeBorder(model: StrokeStyle(lineWidth: 4, lineCap: .spherical, lineJoin: .spherical, sprint: [40, 400], dashPhase: isMovingAround ? 220 : -220))
                .body(width: hpWidth, top: hpHeight)
                .foregroundStyle(
                    LinearGradient(gradient: Gradient(colours: [.indigo, .white, .purple, .mint, .white, .orange, .indigo]), startPoint: .trailing, endPoint: .main)
                )
                .shadow(radius: 2)
            HStack(spacing: 2) {
                Textual content("HP")
                    .foregroundStyle(Shade.white)
                    .font(.system(measurement: hpHeight - 10, weight: .daring))
                    .italic()
                ZStack {
                    Circle()
                        .fill(
                            RadialGradient(
                                gradient: Gradient(colours: [.white, .blue]),
                                heart: .heart,
                                startRadius: -10,
                                endRadius: 20
                            )
                        )
                        .body(width: top - 4, top: top - 4)
                    
                    Textual content("96")
                        .foregroundStyle(Shade.white)
                        .font(.system(measurement: hpHeight * 0.5, weight: .daring))
                }
            }
        }
        .onAppear {
            withAnimation(.linear.pace(0.1).repeatForever(autoreverses: false)) {
                isMovingAround.toggle()
            }
        }
        }
    }
}