给定一个ScrollView
,我如何让一个VStack
在它里面,占据所有剩余的空间?
在下面的代码中,我希望底部的VStack占据屏幕中所有剩余的空间。我试过将maxHeight
设置为infinity
,但到目前为止没有任何效果。预期结果是黄色VStack占据整个屏幕。
struct ContentView: View {
var body: some View {
ScrollView {
VStack {
HStack {
Text("Title")
.font(.largeTitle)
.fontWeight(.bold)
.padding(.leading)
Spacer()
}
Spacer()
.frame(height: 60)
HStack(alignment: .center) {
Text("Header Text")
}
.frame(height: 60)
.frame(maxWidth: .infinity)
.background(Color.white)
.cornerRadius(6.5)
.padding(.horizontal)
Spacer()
.frame(height: 60)
// I want this to occupy all the remaining space
VStack {
Text("ABC")
Text("DEF")
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.yellow)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.green.ignoresSafeArea())
}
}
1条答案
按热度按时间628mspwn1#
问题在于
ScrollView
和VStack
的组合。默认情况下,ScrollView
只占据其子视图所需的位置,这阻止了VStack
的扩展。一种解决方案是使用GeomtryReader
,如以下代码所示: