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

问题描述

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

In my SwiftUI application, I'm trying to implement a UI similar to this:

我为类别 1 和类别 2 添加了两行.结果如下所示:

I've added the two rows for category 1 and category 2. The result looks like this:

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

现在，当添加第三个类别的视图 - 一个带有图像的 VStack 时 - 会发生以下情况:

Now, when added the view for the third category – an VStack with images – the following happens:

这发生在我用 VStack 替换 Spacer() 之后:

This happened, after I replaced Spacer(), with said 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)
            }
        }
    }
}

问题

似乎视图被压缩了.我找不到任何抗压缩性或内容拥抱优先级修饰符来解决此问题.
我还尝试在 CategoryRow 上使用 .fixedSize() 和 .frame(width:height:) .

如何防止这些视图被压缩?

How can I prevent the compression of these views?

我尝试将整个外部堆栈视图嵌入到滚动视图中:

I've tried embedding the whole outer stack view in a scroll view:

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

...结果更糟:

推荐答案

你可能会阻止 VStack 中的视图被使用

You might prevent the views in VStack from being compressed by using

  .fixedSize(horizontal: false, vertical: true)

例如:我有以下 VStack:

For example:I have the following VStack:

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

渲染压缩的 Text()

Which render compressed Text()

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

When I add .fixedSize(horizontal: false, vertical: true)it doesn't compress anymore

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

这篇关于在 SwiftUI VStack 和 List 中被其他视图压缩的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！