可滚动的全屏视图 swift
Scrollable full screen view swift
我希望在 Swift UI 中创建全屏可滚动视图。将视图放入滚动视图和垂直堆栈后,我无法让视图全屏显示?有什么建议么?
这是我的代码的样子
struct ContentView : View {
var body: some View {
//var posts = [Post(postColor: .red), Post(postColor: .blue), Post(postColor: .green)]
ScrollView(.vertical, showsIndicators: false) {
VStack {
Post(postColor: .red)
Post(postColor: .blue)
Post(postColor: .green)
}
}
}
}
struct Post : View {
var postColor : Color
var body : some View {
VStack(alignment: .leading) {
HStack {
Text("Name")
.font(.title)
.fontWeight(.heavy)
Spacer()
}
Text("@Username")
.lineLimit(nil)
.font(.body)
Spacer()
}.background(postColor)
}
}
图片
This is the output I have after embedding in a scrollview.
图片
I wish to have a full screen view like this but with the ability to scroll down to the next view(basically scroll down to next screen)
您可以使用 GeometryReader
来实现:
struct FullScreenViewsInScrollView: View {
var body: some View {
GeometryReader { geometry in
ScrollView {
VStack(spacing: 0) {
Rectangle()
.foregroundColor(.red)
.frame(height: geometry.size.height)
Rectangle()
.foregroundColor(.blue)
.frame(height: geometry.size.height)
Rectangle()
.foregroundColor(.green)
.frame(height: geometry.size.height)
}
}
}
}
}
结果应该是(我在实时预览中向下滚动了一点):
我希望在 Swift UI 中创建全屏可滚动视图。将视图放入滚动视图和垂直堆栈后,我无法让视图全屏显示?有什么建议么?
这是我的代码的样子
struct ContentView : View {
var body: some View {
//var posts = [Post(postColor: .red), Post(postColor: .blue), Post(postColor: .green)]
ScrollView(.vertical, showsIndicators: false) {
VStack {
Post(postColor: .red)
Post(postColor: .blue)
Post(postColor: .green)
}
}
}
}
struct Post : View {
var postColor : Color
var body : some View {
VStack(alignment: .leading) {
HStack {
Text("Name")
.font(.title)
.fontWeight(.heavy)
Spacer()
}
Text("@Username")
.lineLimit(nil)
.font(.body)
Spacer()
}.background(postColor)
}
}
图片 This is the output I have after embedding in a scrollview.
图片 I wish to have a full screen view like this but with the ability to scroll down to the next view(basically scroll down to next screen)
您可以使用 GeometryReader
来实现:
struct FullScreenViewsInScrollView: View {
var body: some View {
GeometryReader { geometry in
ScrollView {
VStack(spacing: 0) {
Rectangle()
.foregroundColor(.red)
.frame(height: geometry.size.height)
Rectangle()
.foregroundColor(.blue)
.frame(height: geometry.size.height)
Rectangle()
.foregroundColor(.green)
.frame(height: geometry.size.height)
}
}
}
}
}
结果应该是(我在实时预览中向下滚动了一点):