Представления, сжатые другими представлениями в SwiftUI VStack и List

Question

В моем приложении SwiftUI я пытаюсь реализовать интерфейс, подобный следующему:

Я добавил две строки для категории 1 и категории 2. Результат выглядит следующим образом:

NavigationView {
    VStack(alignment: .leading) {
        CategoryRow(...)
        CategoryRow(...)
        Spacer()
    }
    .navigationBarTitle(Text("Featured"))
}

Теперь, когда добавлено представление для третьей категории - VStack с изображениями - происходит следующее:

Это произошло после того, как я заменил Spacer() на VStack:

VStack(alignment: .leading) {
    Text("Rivers")
        .font(.headline)
    ForEach(self.categories["Rivers"]!.identified(by: \.self)) { landmark in
        landmark.image(forSize: 200)
    }
}

Мой CategoryRow реализован следующим образом:

VStack(alignment: .leading) {
    Text(title)
        .font(.headline)
    ScrollView {
        HStack {
            ForEach(landmarks) { landmark in
                CategoryItem(landmark: landmark, isRounded: self.isRounded)
            }
        }
    }
}

Вопрос

Кажется, что представления сжаты.Я не смог найти какие-либо модификаторы приоритета сопротивления сжатию или содержимого, чтобы исправить это.
Я также пытался использовать .fixedSize() и .frame(width:height:) на CategoryRow.

Как я могу предотвратить сжатиеиз этих представлений?

---

Обновление

Я попытался встроить весь внешний вид стека в представление прокрутки:

NavigationView {
    ScrollView { // also tried List
        VStack(alignment: .leading) {
            CategoryRow(...)
            CategoryRow(...)
            ForEach(...) { landmark in
                landmark.image(forSize: 200)
            }
        }
        .navigationBarTitle(Text("Featured"))
    }
}

... и результатхуже:

Answer 1

Похоже, в VStack недостаточно места для всех ваших представлений, и некоторые из них сжимаются.Вы можете вставить его в ScrollView

NavigationView {
 ScrollView {
   VStack(alignment: .leading) {
      CategoryRow(...)
      CategoryRow(...)
      /// you images and so on
   }
  }
}

Answer 2

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

NavigationView {
            List {
                ...

Или используйте ScrollView.

Стек автоматически помещается на экране. Если вы хотите, чтобы ваш контент превышал это, вы бы использовали ScrollView или TableView и т. Д. I UIKit

EDIT:

На самом деле, маленький Гуглинг принес этот результат, который, кажется, именно то, что вы делаете: https://developer.apple.com/tutorials/swiftui/composing-complex-interfaces