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()上使用.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中的视图压缩

  .fixedSize(horizontal: false, vertical: true)

例如：我有以下VStack：

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

哪个呈现压缩的Text（）

VStack with compressed elements

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

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

VStack doesn't compresss content

Answer 2

您可以尝试将layoutPriority(_:)操作符添加到您的第一个VStack中。这就是文档中关于该方法的内容：

在一组同级视图中，提高视图的布局优先级会鼓励该视图在缩小组时缩小，而在拉伸组时更早拉伸。

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

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

希望它能起作用！

Answer 3

看来VStack中的所有视图都没有足够的空间，它会压缩其中的一些视图。您可以将其嵌入ScrollView

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

Answer 4

我认为您的最高视图（在NavigationView中）必须是一个List，以便它可以滚动：

NavigationView {
            List {
                ...

或使用ScrollView。

堆栈自动适合屏幕。如果您希望内容超出此范围，则可以在UIKit中使用ScrollView或TableView等

编辑：

实际上，有点谷歌搜索带来了这个结果，这似乎正是您要制作的： https://developer.apple.com/tutorials/swiftui/composing-complex-interfaces

Answer 5

{
  "name": "",
  "success": false,
  "error": "",
  "data": {
    "video": ""
  }
}

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

问题

更新

5 个答案: