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

在我的SwiftUI应用程序中，我尝试实现类似于以下内容的UI：

我已经为类别1和类别2添加了两行。结果如下所示：

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

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

现在，当添加第三个类别的视图时，即带有图像的

VStack

，会发生以下情况：

这是在我用所说的

VStack

替换

Spacer（）

后发生的：

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

My

CategoryRow

的实现如下：

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

问题: 这些观点似乎被压缩了。我找不到任何压缩阻力或内容优先修改器来修复此问题。
我还尝试在

CategoryRow

上使用

.fixedSize（）

和

.frame（宽度：高度：）

如何防止压缩这些视图

---

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

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

…结果更糟：

我认为您的最顶层视图（在NavigationView中）需要是一个列表，以便它可以滚动：

NavigationView {
            List {
                ...

或者使用滚动视图

堆栈自动适合屏幕。如果你想让你的内容超出这个范围，你应该使用ScrollView或TableView等UIKit

编辑：

事实上，谷歌搜索带来了这个结果，这似乎正是你正在做的：

---

在

VStack

中，似乎没有足够的空间容纳所有视图，并且压缩了其中一些视图。您可以将其嵌入到

滚动视图中

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

---

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

  .fixedSize(horizontal: false, vertical: true)

例如： 我有以下VStack：

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

哪个渲染压缩文本（）

当我添加.fixedSize时（水平：false，垂直：true） 它不再压缩了

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

---

您可以尝试将

layoutPriority（）

操作符添加到第一个

VStack

。以下是有关该方法的文档说明：

在同级视图组中，提高视图的布局优先级会鼓励该视图在收缩组时稍后收缩，在拉伸组时更快拉伸

这有点像Autolayout中的内容压缩优先级。但此处的默认值为0，因此您只需将其设置为1即可获得所需效果，如下所示：

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

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

希望它能起作用

struct ContentView1:视图{
struct ContentView1: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    CategoryListView {
                        CategoryView()
                    }

                    CategoryListView {
                        SquareCategoryView()
                    }
                    
                    CategoryListView {
                        RectangleCategoryView()
                    }
                }
                .padding()
            }
            .navigationTitle("Featured")
        }
    }
}

struct CategoryListView<Content>: View where Content: View {
    private let viewSize: CGFloat = 150
    var content: () -> Content
    
    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }
    
    var body: some View {
        VStack {
            HStack {
                Text("Category name")
                Spacer()
            }
            ScrollView(.horizontal, showsIndicators: false){
                HStack {
                    ForEach(0..<10) { _ in
                        content()
                    }
                }
            }
        }
    }
}

struct ContentView1_Previews: PreviewProvider {
    static var previews: some View {
        ContentView1()
    }
}

struct CategoryView: View {
    private let viewSize: CGFloat = 150
    var body: some View {
        Circle()
            .fill()
            .foregroundColor(.blue)
            .frame(width: viewSize, height: viewSize)
    }
}

struct RectangleCategoryView: View {
    private let viewSize: CGFloat = 350
    var body: some View {
        Rectangle()
            .fill()
            .foregroundColor(.blue)
            .frame(width: viewSize, height: viewSize * 9 / 16)
    }
}

struct SquareCategoryView: View {
    private let viewSize: CGFloat = 150
    var body: some View {
        Rectangle()
            .fill()
            .foregroundColor(.blue)
            .frame(width: viewSize, height: viewSize)
    }
}

var body：一些观点{
导航视图{
滚动视图{
VStack{
类别列表视图{
类别视图（）
}
类别列表视图{
SquareCategoryView（）
}
类别列表视图{
矩形类别视图（）
}
}
.padding（）
}
.navigationTitle（“特色”）
}
}
}
结构CategoryListView:视图，其中内容：视图{
私有let viewSize:CGFloat=150
变量内容：（）->内容
初始化（@ViewBuilder内容：@escaping（）->content）{
self.content=内容
}
var body：一些观点{
VStack{
HStack{
文本（“类别名称”）
垫片（）
}
滚动视图（.horizontal，showsIndicators:false）{
HStack{
弗雷奇（0..我确实这样做了，但同样的事情发生了：视图被压缩，都使用了ScrollView和列表。我确实这样做了，但同样的事情发生了：视图被压缩，都使用了ScrollView和列表。是的，我有那个教程的屏幕截图，但即使它们在那里显示，它们也没有实现exactly是那个UI，而是3个类别行。因为每个类别行都不是很高，所以它们没有到达视图的底部，因此，一开始就不会被压缩。请参阅我编辑的问题。我还尝试删除最顶部的堆栈视图，以便
CategoryRow
直接位于
列表
/
滚动视图
中-不走运。你试过
.scaledToFit（）
？谢谢。我有多行
Text（）
和一个
Image（）.resizeable（）
来争取垂直空间，通过这一点，我可以强制文本优先并抵抗压缩。