在我的SwiftUI应用程序中,我正在尝试实现类似于此图的UI:
我已经添加了类别1和类别2的两行。结果看起来像这样:
NavigationView {
VStack(alignment: .leading) {
CategoryRow(...)
CategoryRow(...)
Spacer()
}
.navigationBarTitle(Text("Featured"))
}
现在,当添加第三个类别的视图 - 一个带有图像的VStack
时,会发生以下情况:
![](https://istack.dev59.com/ldswm.webp)
VStack
替换了Spacer()
后。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:)
。
如何防止这些视图被压缩?
更新
我尝试将整个外部堆栈视图嵌入滚动视图中:
NavigationView {
ScrollView { // also tried List
VStack(alignment: .leading) {
CategoryRow(...)
CategoryRow(...)
ForEach(...) { landmark in
landmark.image(forSize: 200)
}
}
.navigationBarTitle(Text("Featured"))
}
}
...结果更糟糕:
.scaledToFit()
吗? - naudecruywagen