Уменьшить масштаб изображения и рамки

Question

Я хочу уменьшить изображение и разместить текст рядом с ним. Логически я попробовал scaleEffect вот так:

HStack(alignment: .bottom) {
    Image("anno")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(width: 180, height: 280, alignment: .center)
        .clipped()
        .scaleEffect(0.8, anchor: .bottomLeading)
    VStack(alignment: .leading) {
        Text("Title")
            .font(.headline)
        Text("Description")
    }
    .layoutPriority(2)
}

Но, похоже, он масштабирует только изображение, а не рамку вокруг него, что означает, что оно занимает то же место, что и без масштабирования, и текст может занимать освободившееся пространство.

пример изображения

Как масштабировать вид, а не только картинку внутри?

Спасибо

Answer 1

Поскольку ScaleEffect применяется к контенту, вы должны вычислить масштабированный кадр и применить новый кадр к view. Для этого можно использовать scaledFrame:

Image("anno")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .scaledFrame(width: 180, height: 280, alignment: .bottomLeading, scale: 0.8) // <- This line
    .clipped()

С помощью этого расширения:

extension View {
    public func scaledFrame(width: CGFloat, height: CGFloat, alignment: Alignment = .center, scale: CGFloat) -> some View {
        self.frame(width: width * scale,
                   height: height * scale,
                   alignment: alignment)
    }
}

Answer 2

Вместо масштабирования изображения уменьшите кадр, изображение автоматически масштабируется до него

HStack(alignment: .bottom) {
    Image("anno")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(width: 150, height: 250, alignment: .center)     // << for example
        .clipped()
    VStack(alignment: .leading) {
      // ... other code

Answer 3

Хорошо, поэтому использование рамки с меньшей шириной и высотой кажется единственным решением для уменьшения вида. но поскольку я повторно использую пользовательский вид с изображением, простое добавление frame обрежет изображение. Здесь scaleEffect входит в

HStack(alignment: .bottom) {
    CustomImageView()
        .scaleEffect(0.7, anchor: .center)
        .frame(width: 126, height: 196) // original width&height * 0.7 (the scale rate)

    VStack(alignment: .leading) {
        Text("Title")
             .font(.headline)
        Text("Description")
    }
    .layoutPriority(2)
}