我是 Swift UI 的新手,我很难让特定的 UI 按我想要的方式运行。
我有一个包含一些内容的
ScrollView
。 VStack 中的内容可以小到 1-3 个文本组件,大到超过 60 个组件。
我希望滚动视图能够根据需要增长。一旦没有剩余空间,就继续使用最大可用高度并利用滚动。
问题来了,即使我有 6 个项目,
ScrollView
占据了整个高度并将文本推到了下面。您可以检查红色背景和被按下的“就在ScrollView下方”。
struct ContentTestView: View {
var body: some View {
VStack {
// ScrollView should wrap content height...
ScrollView {
VStack(alignment: .leading) {
ForEach(0..<6) { index in
Text("Item \(index)")
.padding()
.background(Color.gray.opacity(0.3))
.cornerRadius(8)
.padding(.bottom, 4)
}
}
.frame(maxWidth: .infinity) // Fill max width
}
.background(.red)
Text("Just right below the ScrollView")
Spacer() // There should be a space if the scroll view content is not too big
Text("Bottom")
.padding()
.frame(maxWidth: .infinity) // Fill max width
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentTestView()
}
}
我尝试过使用
fixedSize()
,但这并不像我预期的那样工作,因为它会推动其他 VStack 同级,并且不会按照我想要的方式滚动。
这里的解决方案是什么?我希望
ScrollView
能够增长到所需的程度,一旦内容填满整个高度,它应该看起来像我向您展示的上一张图片。
在android上我可以通过在
.weight(1f, fill = false)
中使用ScrollView
来实现,但这里没有类似的方法。
我要哭了,我在一些文章上找到了解决方案并进行了修改。 我在使用 Swift UI 时感到非常痛苦。我仍然需要习惯他们解决问题的方式,这应该更容易哈哈
在 ScrollView 内容中使用 GeometryReader 并将该大小保存在状态中。然后使用 ScrollView 中存储的尺寸高度。
struct ContentTestView: View {
@State
private var scrollViewContentSize: CGSize = .zero
var body: some View {
VStack {
// ScrollView should wrap content height...
ScrollView {
VStack(alignment: .leading) {
ForEach(0..<5) { index in
Text("Item \(index)")
.padding()
.background(Color.gray.opacity(0.3))
.cornerRadius(8)
.padding(.bottom, 4)
}
}
.background(
GeometryReader { geo -> Color in
DispatchQueue.main.async {
scrollViewContentSize = geo.size
}
return Color.clear
}
)
.frame(maxWidth: .infinity) // Fill max width
}
.frame(
maxHeight: scrollViewContentSize.height
)
.background(.red)
Text("Just right below the ScrollView")
Spacer()
Text("Bottom")
.padding()
.frame(maxWidth: .infinity) // Fill max width
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentTestView()
}
}