在 SwiftUI VStack 和 List 中被其他视图压缩的视图

Question

在我的 SwiftUI 应用程序中，我正在尝试实现与此类似的 UI：

我为类别 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()and .frame(width:height:)on CategoryRow。

如何防止压缩这些视图？

---

更新

我试过在滚动视图中嵌入整个外部堆栈视图：

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

...结果更糟：

Answer 1

您可能会使用以下方法阻止 VStack 中的视图被压缩

  .fixedSize(horizontal: false, vertical: true)

例如：我有以下 VStack：

VStack(alignment: .leading){
        ForEach(group.items) {
            FeedCell(item: $0)
        }
    }

其中呈现压缩的 Text()

当我添加 .fixedSize(horizo​​ntal: false, vertical: true) 它不再压缩

VStack(alignment: .leading){
        ForEach(group.items) {
            FeedCell(item: $0)
                .fixedSize(horizontal: false, vertical: true)
        }
    }

Answer 2

您可以尝试将layoutPriority()运算符添加到您的第一个VStack. 这是文档中关于该方法的内容：

在一组兄弟视图中，提高视图的布局优先级会鼓励该视图在该组收缩时稍后收缩，而在该组被拉伸时更早伸展。

所以有点像Autolayout中的抗内容压缩优先级。但是这里的默认值是 0，所以你只需要将它设置为 1 就可以得到想要的效果，就像这样：

VStack(alignment: .leading) {
    CategoryRow(...)
    CategoryRow(...)
    Spacer()
}.layoutPriority(1)
VStack(alignment: .leading) {
    ...
}

希望它有效！