Обновление SwiftUI Просмотр размера, чтобы соответствовать изображению

Question

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

Прямо сейчас это выглядит так:

struct ItemCell: View {
    var body: some View {
        Group {
            CustomImageView(from: imageURL, placeholder: PlaceholderView(), config: { $0.resizable() })
                .aspectRatio(contentMode: .fit)
                .frame(minWidth: 0, maxWidth: 150, minHeight: 0, maxHeight: 190, alignment: .bottomLeading)
        }.background(Color.red) // To show that the view isn't resizing properly

    }
}

struct PlaceholderView: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 3, style: .continuous)
                .frame(width: 150, height: 190)
                .foregroundColor(Color(.secondarySystemBackground))
            Image(systemName: "globe")
                .resizable()
                .scaledToFit()
                .frame(width: 50)
                .foregroundColor(.secondary)
        }
    }
}

CustomImageView адаптировано из этой статьи при загрузке изображения асинхронно . ItemCell расположены горизонтально ScrollView. Когда я проверяю это, он:

• правильно отображает вид заполнителя перед загрузкой изображения;
• изменяет размер изображения, чтобы сохранить его соотношение сторон и вписывается в кадр 150x190, , но имеет странную анимацию, где некоторые изображения сжимаются, а затем расширяются назад ; Кроме того, некоторые изображения кажутся слишком сильно сжатыми ;
• не изменяет размер родительского вида, чтобы соответствовать размеру изображения должным образом, но вместо этого сохраняет полную исходную высоту и некоторая (?) дополнительная ширина в некоторых ячейках.

Эти две проблемы показаны на рисунке ниже, с голубыми изображениями и красным фоном. Обратите внимание на дополнительную высоту в первой и третьей ячейках и дополнительную ширину во второй. Также обратите внимание, что первое изображение оказывается меньше, чем при первой загрузке, даже если оно сначала помещается в исходную рамку 150x190.

Как я могу исправить эти проблемы?

Answer 1

Разобрался, как это сделать. Было несколько проблем с моим исходным кодом. Во-первых, ItemCell s, используемые в ScrollView, должны быть модифицированы с помощью модификатора вида .fixedSize(), например, так:

ScrollView(...) {
    HStack(...) {
        ForEach(...) { ...
            ItemCell()
                .fixedSize()
        }
    }
}

Затем, изменяя фрейм CustomImageCell для использования idealHeight вместо maxHeight и создание Group a VStack с Spacer() до pu sh всего снизу, как @ Paulw11 предложил в комментариях:

struct ItemCell: View {
    var body: some View {
        VStack {
            Spacer()
            CustomImageView(from: imageURL, placeholder: PlaceholderView(), config: { $0.resizable() })
                .aspectRatio(contentMode: .fit)
                .frame(maxWidth: 150, idealHeight: 190)
        }

    }
}

Эти Изменения исправляют как проблему анимации изменения размера изображения, так и проблему с дополнительным пространством.