Создайте многоразовое композиционное представление быстрого пользовательского интерфейса, которое масштабируется. ⇐ IOS

[Anonymous]

Я создаю коллекционную карточную игру, в которой мы с друзьями можем создавать карточки, вводя нашу статистику и делясь ею. Однако у меня возникли проблемы с пользовательским интерфейсом карты, потому что я хочу иметь возможность отображать карты в разных областях, где масштаб разный, но соотношение сторон одинаковое (почти как если бы представление карты было изображением). Как лучше всего добиться этого, если я пытаюсь создать универсальное многоразовое представление?
Это то, что у меня пока получилось.
Подвиды никогда не выстраиваются в линию и не масштабируются должным образом. Я новичок в Swift UI и до сих пор не знаю лучших практик, поэтому буду рад любому вкладу.
struct CardView: View {

var body: some View {
GeometryReader { geometry in
let width = geometry.size.width
let height = geometry.size.height
let headerHeight = height / 12
let cardPadding = width * 0.03

VStack(spacing: height * 0.02) {
CardHeaderView()
.frame(maxHeight: headerHeight)

CardImageView()

CardContentView()

Spacer()
}
.padding(.all, cardPadding)
.background(
Image("texture")
.resizable()
.scaledToFill()
.clipped()
)
.border(Color.red, width: width * 0.01)
.clipped()
}
.aspectRatio(2.5 / 3.5, contentMode: .fit)
}

}

// one subview as an example

struct hpView: View {

@State private var isMovingAround = false

var body: some View {
GeometryReader { geometry in
let width = geometry.size.width
let height = geometry.size.height
let hpWidth = width * 1
let hpHeight = height * 1

ZStack {
RoundedRectangle(cornerRadius: height / 2)
.frame(width: hpWidth, height: hpHeight)
.foregroundStyle(.indigo.gradient)
RoundedRectangle(cornerRadius: height / 2)
.strokeBorder(style: StrokeStyle(lineWidth: 4, lineCap: .round, lineJoin: .round, dash: [40, 400], dashPhase: isMovingAround ? 220 : -220))
.frame(width: hpWidth, height: hpHeight)
.foregroundStyle(
LinearGradient(gradient: Gradient(colors: [.indigo, .white, .purple, .mint, .white, .orange, .indigo]), startPoint: .trailing, endPoint: .leading)
)
.shadow(radius: 2)
HStack(spacing: 2) {
Text("HP")
.foregroundStyle(Color.white)
.font(.system(size: hpHeight - 10, weight: .bold))
.italic()
ZStack {
Circle()
.fill(
RadialGradient(
gradient: Gradient(colors: [.white, .blue]),
center: .center,
startRadius: -10,
endRadius: 20
)
)
.frame(width: height - 4, height: height - 4)

Text("96")
.foregroundStyle(Color.white)
.font(.system(size: hpHeight * 0.5, weight: .bold))
}
}
}
.onAppear {
withAnimation(.linear.speed(0.1).repeatForever(autoreverses: false)) {
isMovingAround.toggle()
}
}
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... hat-scales