Клип изображение на квадрат в SwiftUI

Question

Я пытаюсь поместить несколько ячеек рядом друг с другом, где каждая ячейка состоит из изображения и текста ниже. Сама ячейка должна быть квадратной, а изображение должно быть масштабировано, чтобы заполнить оставшееся пространство (обрезая часть изображения).

Сначала я попытался сделать изображение квадратным, а текст ниже. Теперь моя проблема в том, что я не знаю, как правильно добиться этого в SwiftUI. Я могу заставить его работать, используя этот код:

VStack {
    Image(uiImage: recipe.image!)
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(width: 200, height: 200, alignment: .center)
        .clipped()
    Text(recipe.name)
}

Проблема в том, что мне нужно указать фиксированный размер кадра. Мне нужен способ создать ячейку с соотношением сторон 1: 1 и изменяемым размером, чтобы я мог разместить их динамическое количество на экране рядом друг с другом.

Я также пыталсяиспользуя

VStack {
    Image(uiImage: recipe.image!)
        .resizable()
        .aspectRatio(1.0, contentMode: .fit)
        .clipped()
    Text(recipe.name)
}

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

Моя следующая идея состояла в том, чтобы обрезать его до квадратной формы. Для этого я сначала попытался обрезать его в форме круга (потому что, видимо, это не квадратная форма):

VStack {
    Image(uiImage: recipe.image!)
        .resizable()
        .aspectRatio(contentMode: .fit)
        .clipShape(Circle())
    Text(recipe.name)
}

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

Так я что-то не вижу или это единственный вариант, чтобы обрезать изображение вокруг модификатора кадра?

EDIT

Чтобы уточнить: мне наплевать на текст, а не на то, чтобы вся ячейка (или, если проще, изображение) была квадратной, без указания ее размера с помощью .frame и без неквадратного исходного изображениярастягивается, чтобы привести его в соответствие.

Таким образом, идеальным решением было бы, чтобы VStack был квадратным, но получить квадратное изображение также было бы хорошо. Он должен выглядеть как на рисунке 1, но без использования модификатора .frame.

Answer 1

Я думаю, что ZStack может лучше соответствовать вашим потребностям, если нет необходимости в прозрачности текста. Попробуйте эти модификаторы на изображении.

Если вам нужно сохранить динамическую ширину, вы можете использовать Geometry Reader или параметр, который передается при инициализации. Модификатор .clipped() использует ограничивающую рамку, чтобы замаскировать вид, поэтому вам необходимо установить ее для обрезки изображения.

        HStack {
            ForEach(0..<3, id: \.self) { index in
                ZStack {
                    GeometryReader { proxy in
                        Image(systemName: "pencil")
                            .resizable()
                            .scaledToFill()
                            .frame(width: proxy.size.width)
                        VStack {
                            Spacer()
                            Text("yes")
                                .frame(width: proxy.size.width)
                                .background(Color.white)
                        }
                    }
                }
                .clipped()
                .aspectRatio(1, contentMode: .fit)
                .border(Color.red)
            }
        }