CardView Size Kingfisher

Milotronik

Mar 15th, 2025 (edited)

204

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

Swift 2.08 KB | None | 0 0

raw download clone embed print report

import SwiftUI
import Kingfisher
enum CardSize {
case small
case large
}
struct CardView: View {
let imageURL: URL?
private let smallSize: CGFloat = 210
@Binding var cardSize: CardSize // Binding to allow external control
var body: some View {
let cardWidth = cardSize == .small ? smallSize : UIScreen.main.bounds.width - 32
let cardHeight = cardWidth.aspectRatioHeight
VStack {
KFImage(imageURL)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: cardWidth - 16, height: cardHeight - 16) // Inner padding simulation
.clipped()
.cornerRadius(10)
}
.frame(width: cardWidth, height: cardHeight) // Card dimensions based on image size
.background(Color.white) // Background color for the card
.cornerRadius(12) // Corner radius for the entire card
.overlay(
RoundedRectangle(cornerRadius: 12) // Border for the card
.stroke(Color.black, lineWidth: 2)
)
.padding(8) // Outer padding around the card
}
}
extension CGFloat {
var aspectRatioHeight: CGFloat {
self / 16 * 9
}
}
struct ContentView: View {
@State private var cardSize: CardSize = .small // State variable to track size
var body: some View {
VStack {
// Pass the binding to CardView
CardView(imageURL: URL(string: "https://i.postimg.cc/GHLSWpkp/Travel-test-03.png"), cardSize: $cardSize)
.padding()
Button(action: {
// Toggle between small and large sizes by assigning a new value
cardSize = (cardSize == .small ? .large : .small)
}) {
Text(cardSize == .small ? "Make Large" : "Make Small")
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
}
}
}
#Preview {
ContentView()
}

Add Comment

Please, Sign In to add comment